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;

}

Comme le montre le processus de décomposition ci-dessus, lorsque JavaScript crée un objet instance via new, il crée d'abord un objet ordinaire obj, puis pointe l'attribut interne __proto__ d'obj vers l'objet prototype d'init, donc obj Le la chaîne de prototypes sera modifiée et l'étape 3 utilise la méthode d'appel pour appeler init(), donc ceci dans init fait référence à l'objet obj ici.

Après l'exécution de init(), tous les objets DOM correspondants seront stockés dans l'objet this sous la forme d'un tableau et renvoyés, c'est-à-dire que l'objet obj sera renvoyé et le nouvel opérateur finira par revenir cet objet obj. Renvoyé en tant que nouvel objet d'instance. Par conséquent, l'objet instance renvoyé par l'opérateur new a deux caractéristiques : premièrement, il contient le jeu de résultats de la requête DOM, et deuxièmement, sa chaîne de prototypes hérite du prototype d'init, et le prototype d'init pointe vers l'objet jQuery.fn, donc l'objet d'instance dispose également de ces méthodes de fonctionnement.

jQuery créera un objet jQuery à chaque fois qu'il exécute une requête, et dans la même application, tous les objets jQuery partageront le même objet prototype jQuery. Par conséquent, l'objet jQuery contient non seulement le jeu de résultats de la requête DOM, mais hérite également des méthodes de fonctionnement de l'objet prototype jQuery. De cette façon, vous pouvez appeler directement des méthodes pour manipuler ces éléments DOM après l'interrogation. Il s'agit de la conception de l'architecture de base de jQuery, qui est simple, pratique et pratique !

Si vous ne comprenez toujours pas l'explication ci-dessus, ne vous inquiétez pas, j'ai écrit un petit projet complet jDate selon les idées de conception de jQuery, vous pouvez comparer et comprendre ! Le projet jDate a été téléchargé sur GitHub. Vous pouvez cliquer ici pour voir le code complet : jDate. Si vous avez des opinions différentes, n'hésitez pas à en discuter !

3 défauts de jQuery

En analysant l'architecture de base de jQuery, nous constaterons qu'à chaque fois qu'une requête est exécutée, jQuery doit construire un jQuery complexe en mémoire Objet , bien que chaque objet jQuery partage le même prototype jQuery, le processus de requête de jQuery est bien plus compliqué que vous ne le pensez. Il doit prendre en compte divers identifiants correspondants et la compatibilité des différents navigateurs. Par conséquent, si vous effectuez simplement quelques opérations simples sur le DOM, il est recommandé d'utiliser la méthode native querySelector au lieu de jQuery. Cependant, lorsque vous utilisez la méthode native, vous devrez peut-être effectuer des travaux de compatibilité pour différents scénarios d'application. apprenez à faire des compromis et à ne pas en faire trop. Cela dépend de jQuery !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il incitera tout le monde à apprendre jquery. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery !