Une brève analyse des principes internes de jQuery et des méthodes de mise en œuvre_jquery

J'ai étudié le code source de jQuery pendant cette période. Grâce au développement croissant de jQuery, de plus en plus d'experts étudient jQuery. Les supports d'apprentissage sont également plus faciles à trouver que les deux années précédentes. de bonnes ressources, telles que la série d'analyses de code source Gao Yun jQuery1.6.1. Ces tutoriels analysent en détail les principes internes et les méthodes d'implémentation de jQuery, ce qui est très utile pour apprendre et comprendre jQuery. Cependant, je pense personnellement que de nombreux tutoriels ne comprennent pas pleinement les résultats globaux de jQuery. J'essaie d'expliquer l'implémentation interne de jQuery dans son ensemble.

Comme nous le savons tous, il existe deux façons d'appeler jQuery. L'une est une implémentation de haut niveau, qui implémente la sélection DOM en passant un paramètre, comme la sélection de tous les éléments h1 via $("h1"), et la seconde. est une implémentation de niveau relativement bas, si l'opération ajax est implémentée via $.ajax. Alors, quelle est la différence entre ces deux méthodes ? Utilisez la fonction typeof pour détecter $('h1') et $.ajax. Les types sont respectivement objet et fonction. Quiconque a un peu appris jQuery le sait ou en a entendu parler. Le premier renvoie un objet jQuery. Objet jQuery et qu'est-ce que c'est et quelle est la relation entre jQuery et jQuery ? Imprimons d'abord les propriétés et les valeurs correspondantes de l'objet jQuery via for(var i in $(")) document.write(i ” :::” $(“”)[i] ””); Il possède plus de 100 propriétés. En saisissant $("*") dans la console, vous pouvez voir que la plupart des propriétés sont des propriétés héritées du prototype jQuery. L'objet jQuery est en fait un tel objet :

.

Supposons donc que l'implémentation de jQuery puisse être similaire à ceci :

function jQuery(){
 this[0]="Some DOM Element";
 this[1]="Some DOM Element";
 this[2]="Some DOM Element";
 this.length=3;
 this.prevObject="Some Object";
 this.context="Some Object";
 this.selector="Some selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}

Ces codes peuvent créer un objet jQuery avec les propriétés ci-dessus via l'opérateur new, mais en fait nous n'utilisons pas l'opérateur new lorsque nous appelons jQuery pour créer un objet jQuery. Regardons l'implémentation de jQuery :

var jQuery = function( selector, context ) {
 // The jQuery object is actually just the init constructor 'enhanced'
 return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn=jQuery.prototype={
 jquery: core_version,
 init:function(selector,context){
 //some code
 return this;
 }
 //some code there
 //......
}
jQuery.fn.init.prototype=jQuery.fn;

Il y a plusieurs choses très intelligentes ici. Le premier point est de créer des objets via la méthode init de l'attribut prototype jQuery pour atteindre l'objectif de créer des objets sans utiliser new. Le deuxième point est de gérer le pointeur this dans l'initialisation. méthode. Nous savons qu'en appelant init pour renvoyer une instance jQuery, alors cette instance doit hériter des propriétés de jQuery.prototype, puis celle-ci dans init héritera des propriétés de jQuery.prototype. Cependant, cela dans init est soumis à des restrictions de portée et ne peut pas accéder aux autres propriétés de jQuery.prototype. jQuery pointe son prototype vers jQuery.fn via la phrase « jQuery.fn.init.prototype=jQuery.fn », de sorte que jQuery. L'objet généré par init a les propriétés de jQuery.fn.

À ce stade, un prototype de base de jQuery a fait surface. Il y a deux objets ici, l'un est le constructeur jQuery et l'autre est l'objet généré par ce constructeur (nous l'appelons un objet jQuery, qui n'est pas différent d'un objet ordinaire), comme le montre le diagramme de relation suivant :

Vous pouvez voir que le constructeur jQuery et jQuery.prototype ont leurs propres propriétés et méthodes. Les méthodes d'appel des deux objets sont différentes. Les deux objets ont une méthode d'extension, qui est utilisée pour étendre leurs propres propriétés et méthodes. au sein de jQuery, l'implémentation d'extend repose en fait sur le même code, qui sera analysé en détail dans l'analyse ultérieure du code source.