Analyse du Code JQuery Framework Instance

Avec le développement de l’époque, le camp de JavaScript a vu des cadres de plus en plus excellents, qui simplifie grandement notre travail de développement, lorsque nous utilisons ces cadres ne devrait pas être l’eau potable à réfléchir à comment ils sont construits ? Si vous n’êtes pas content avec juste l’aide de certains prêts à l’emploi APIS, mais une compréhension approfondie de leurs mécanismes de mise en œuvre interne (API sont la chose la plus forte dévaluation, comme on dit), le meilleur moyen est de lire leur code source, pourvu que vous avez bien lu.

J’ai travaillé là-dessus pour les deux derniers jours.JQueryLe code source, ici seront certains de ma compréhension superficielle de partager, mauvais endroit s’il vous plaît correct. Eh bien, voici un regard sur comment jQuery fonctionne probablement, et je suppose que vous avez déjà quelques connaissances de base javascript, et si les bases ne suffisent pas, je vous recommande de lire les deux livres, « Programmation JavaScript avancée » et « Compréhension JavaScript. » Cet article n’est pas adapté pour la JS à l’intérieur de la classe, les objets, fonctions, prototype et autres concepts ne sais pas les amis.

Dès le début, nous commençons par dire :

Tout d’abord créer un objet à l’utilisateur, en supposant que notre cadre est appelé Shaka (mon nom) ;
var Shaka = function () {} ; Ici, nous créons une fonction vide avec rien dedans, et cette fonction est en fait notre constructeur. Afin que l’objet que nous générons pour être en mesure d’invoquer la méthode définie dans le prototype, il faut ajouter quelques méthodes de Shaka dans une sorte de prototype (pensez à Shaka en tant que classe) et de définir :

Shaka.FN = Shaka.prototype = {} ;

La Shaka.fn ici correspond à l’alias de Shaka.prototype, qui est facile à utiliser par la suite, et ils pointent vers la même référence.

OK, nous allons ajouter une méthode sayHello pour ajouter un paramètre à Shaka, afin que ce cadre a l’apparence plus simple déjà, si il a vie alors c’est maintenant 1 ans, regardez le code :

Boîte de Code exécuter
≪ Script type = « Text/javascript » > var Shaka = function (age) {this.age = age ;} ; Shaka.FN = Shaka.prototype = {Sayhello:function () {alert (' Je suis un petit bébé, je suis ' + this.age + « ans. ») ; }} ; Var babyShaka = new Shaka (1) ; babyShaka.sayHello () ; < /script >
[Ctrl + A tous les conseils de sélection : vous pouvez modifier du code tout d’abord, puis appuyez sur run]

Eh bien, ne vous énervez pas, nous avons remarqué qu’il y a quelques différences entre le cadre et jQuery en cours d’utilisation, comme dans JQ, nous pouvons écrire ceci :

JQuery (« #myid »). SomeMethod () ;

Comment cela se produit, c'est-à-dire jQuery () ce constructeur retourne une instance d’objet de jQuery, pour que nous pouvons appeler sa méthode là-dessus, alors le constructeur Shaka doit retourner une instance qui ressemble à ceci :

var Shaka = function () {return / / retourné Shaka ;} ;

Alors comment pouvons-nous obtenir un exemple d’un Shaka, passons en revue tout d’abord le var someObj = new MaClasse () lorsque vous utilisez la méthode de prototype pour simuler la classe ; C’est en fait le temps de créer un nouvel objet someObje, pour utiliser le nouvel objet tant que le pointeur this, pour appeler la fonction MyClass, le constructeur de la classe, puis someObj pour obtenir la méthode définie dans le MyClass.prototype, Ce pointeur au sein de ces méthodes se réfère à l’instance de l’objet actuel.