Parlez de la conception de l'architecture de base de jQuery

jQuery n'est pas étranger à tout le monde, je ne dirai donc pas grand-chose ici sur ce que c'est et ce qu'il fait. Le but de cet article est de discuter du cœur de jQuery à travers une simple analyse du code source. , et comment jQuery exploite les fonctionnalités avancées de JavaScript pour créer une bibliothèque JavaScript aussi performante.

1 Première introduction à jQuery

Du point de vue des fonctions principales, jQuery ne fait qu'une chose simple et ordinaire : interroger. Sa syntaxe est si concise et claire que de nombreuses personnes ont déjà utilisé jQuery sans savoir ce qu'est le javascript. Pour le décrire en un mot, c'est : simplicité et simplicité.

Du point de vue de la conception, nous pouvons diviser les méthodes fournies par jQuery en deux grandes catégories : les méthodes statiques et les méthodes d'instance. Les méthodes statiques sont des méthodes accessibles directement via $. Ces méthodes ne fonctionnent généralement pas sur les éléments DOM, mais fournissent des outils courants, tels que les requêtes ajax et certaines opérations courantes sur les chaînes. De plus, jQuery fournit également son propre mécanisme d'extension, vous pouvez. écrivez les composants dont vous avez besoin via la méthode extend. La méthode d'instance est différente de la méthode statique. Elle est utilisée pour opérer sur les éléments DOM interrogés par jQuery. jQuery exécute $() pour construire un objet jQuery. Cet objet stocke tous les éléments DOM interrogés dans une méthode tableau, puis dans. this La chaîne de prototypes de l'objet implémente des méthodes pour faire fonctionner ces DOM. Par exemple, la méthode each() est utilisée pour parcourir chaque élément du DOM.

Vous remarquerez peut-être que je viens de dire que cet objet est stocké "sous forme de tableau", c'est-à-dire que l'objet construit par jQuery n'est pas un tableau, alors quel est exactement cet objet ? En fait, cet objet est le cœur de jQuery, également appelé « objet jQuery ». Par conséquent, l’objectif de cet article est d’analyser et de discuter des objets jQuery.

2 objets jQuery

Généralement, nous utiliserons jQuery comme ceci :

$('div').each(function(index){
  //this ...
});

$('div') renvoie après exécution Renvoie un Objet jQuery. La méthode each() parcourt les éléments DOM dans cet objet. Regardons d'abord le processus d'exécution de $('div') (le code source de cet article est tiré de jQuery 3.0) :

jQuery = function( selector, context ) {
 
 return new jQuery.fn.init( selector, context );

}

Cette méthode est la méthode de saisie de $('div'). $ est l'abréviation de jQuery, qui est équivalente à jQuery('div'). On peut voir que cette méthode ne fait qu'une seule chose, et c'est. pour renvoyer l'objet d'instance de fonction jQuery.fn.init (), alors qu'est-ce que jQuery.fn.init Regardons le code suivant :

init = jQuery.fn.init = function( selector, context, root ) {
 //... 
 return this;
}
init.prototype = jQuery.fn;

jQuery.fn.init et init font référence à la même méthode ? . Cette méthode est basée sur Le sélecteur interroge les éléments DOM qui remplissent les conditions et les renvoie, mais vous constaterez que ce qui est renvoyé est ceci : Qu'est-ce que c'est ? Nous l'analyserons plus tard. Regardons d'abord la phrase suivante :

init.prototype = jQuery.fn;
Que signifie cette phrase ? La phrase fait pointer l'objet prototype de la méthode init vers l'objet jQuery.fn, alors qu'est-ce que c'est que jQuery.fn ? Continuons à regarder le code :

jQuery.fn = jQuery.prototype = {

 // The current version of jQuery being used
 jquery: version,

 constructor: jQuery,

 // The default length of a jQuery object is 0
 length: 0,

 // Execute a callback for every element in the matched set.
 each: function( callback ) {
  return jQuery.each( this, callback );
 },
  
 splice: arr.splice
};

Afin d'économiser de l'espace, j'ai omis une partie du code. Comme on peut le voir ici, jQuery.fn est en fait l'objet prototype de jQuery. object définit quelques références à this La méthode sur laquelle l'objet opère. Si vous vous sentez un peu confus à ce stade, ne vous inquiétez pas, faisons le tri entre les idées : jQuery définit d'abord une méthode init, puis définit une série de méthodes de fonctionnement sur le prototype d'objet init prototype. Enfin, l'objet instance de la méthode init est renvoyé. Le processus ci-dessus peut donc être simplifié comme suit (représentation pseudocode) :

var init = function(selector,context,root){
 //...
 return this;
}

init.prototype = {
 length:0,
 each:function(callback){
  //...
 },
 splice:[].splice
}

jQuery = function(selector,context,root){

 return new init(selector,context,root);
}

Alors la question est de savoir pourquoi les méthodes dans jQuery.fn ne sont-elles pas directement définies sur le prototype d'init, mais définies sur le prototype de jQuery ? Sur l'objet ?

En fait, le but de ceci est d'améliorer l'efficacité des requêtes de jQuery. S'il est directement défini sur l'objet prototype d'init, alors chaque fois qu'une requête est exécutée, un objet prototype aussi énorme sera créé dans la mémoire, et si cet objet est défini sur le prototype de jQuery, cet objet sera initialisé lorsque jQuery sera chargé et existera toujours en mémoire Chaque fois que $() sera exécuté dans le futur, il vous suffit de pointer le prototype dans init vers. cet objet. Au lieu de créer le même objet à chaque fois.

Jetons un coup d'œil à ce que this renvoie dans la fonction init. J'ai dit dans mon blog précédent que this dans la fonction pointe toujours vers l'appelant pendant l'exécution. Alors, qui est l'appelant de init ? Il semble que l'appelant ne puisse pas être trouvé dans le code ci-dessus. À ce stade, nous devons comprendre en profondeur le mécanisme de fonctionnement du nouvel opérateur. En empruntant la description du nouvel opérateur dans mon blog précédent, nous effectuerons le processus d'exécution de. new init(). Il se décompose comme suit :

new init(selector,context,root) = {

 var obj = {};

 obj.__proto__ = init.prototype;

 init.call(obj,selector,context,root);

 return typeof result === 'obj'? result : obj;

}