Une brève discussion sur 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 un objet jQuery après exécution. La méthode each() parcourt les éléments DOM de 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'). que cette méthode ne fait qu'une seule chose est de renvoyer l'objet instance de la fonction jQuery.fn.init(). Alors, qu'est-ce que jQuery.fn.init ? Regardons le code suivant :

init = jQuery.fn.init = = jQuery.fn;

<.>

jQuery.fn.init et init font référence à la même méthode. Cette méthode interroge les éléments DOM qualifiés en fonction du sélecteur et les renvoie. Mais vous constaterez que ce qui est renvoyé est ceci : Nous l'analyserons plus tard. Regardons d'abord la phrase suivante :

init.prototype = jQuery.fn;

Que signifie cette phrase ? Cette phrase fait pointer l'objet prototype de la méthode init vers jQuery. objet, 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
};

Pour gagner de la place, j'ai omis une partie du code. Comme on peut le voir ici, jQuery.fn est en fait l'objet prototype. de jQuery. Cet objet prototype Définit quelques méthodes pour opérer sur cet objet. 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, pourquoi les méthodes dans jQuery.fn ne sont-elles pas directement définies sur le prototype d'init ? Pour le définir sur l'objet prototype de jQuery ?

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éera d'abord un objet ordinaire obj, puis pointera 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.

Une fois init() exécuté, stockera tous les objets DOM correspondants sous la forme d'un tableau dans cet objet et le renverra, c'est-à-dire que l'objet obj sera renvoyé et le nouvel opérateur sera finalement, cet objet obj est renvoyé en tant que nouvel objet d'instance. Ainsi, 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 , les objets Instance ont donc également 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 uniquement 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. faire des compromis et ne pas en faire trop. Cela dépend de jQuery !