Explication détaillée de l'analyse globale de l'architecture de jquery et des exemples d'implémentation_jquery

Le framework jQuery dans son ensemble est très compliqué et pas facile à comprendre. J'ai étudié ce framework lourd et puissant ces derniers jours. L'architecture globale de jQuery peut être divisée en : module d'entrée, module sous-jacent et module fonctionnel. Ici, nous prenons jquery-1.7.1 comme exemple d'analyse.

L'architecture globale de jquery

Copier le code Le code est le suivant :

16 (fonction (fenêtre, non définie) {
                    // Construire un objet jQuery
22 variables jQuery = (function() {
25 var jQuery = function(sélecteur, contexte) {
27                     return new jQuery.fn.init (sélecteur, contexte, rootjQuery);
28},
// Un tas de déclarations de variables locales
97 jQuery.fn = jQuery.prototype = {
98          constructeur : jQuery,
99 init : fonction (sélecteur, contexte, rootjQuery) { ... },
// Un tas de propriétés et méthodes de prototypes
319};
322          jQuery.fn.init.prototype = jQuery.fn;
324        jQuery.extend = jQuery.fn.extend = function() { ... };
388 jQuery.extend({
// Un tas de propriétés et de méthodes statiques
892});
955        renvoie jQuery ;
957 })();
//Omettre le code des autres modules...
9246  window.jQuery = window.$ = jQuery;
9266 })( fenêtre );

En analysant le code ci-dessus, nous avons constaté que jquery adopte la méthode d'écriture d'auto-exécution anonyme des fonctions. L'avantage est qu'elle peut prévenir efficacement le problème de l'espace de noms et de la pollution des variables. L'abréviation du code ci-dessus est :

Copier le code Le code est le suivant :

(fonction (fenêtre, non définie) {
var jQuery = fonction() {}
// ...
​ window.jQuery = window.$ = jQuery;
})(fenêtre);

Fenêtre de paramètres

La fonction anonyme passe deux paramètres, l'un est window et l'autre est indéfini. Nous savons que les variables dans js ont des chaînes de portée. Les deux variables transmises deviendront des variables locales de la fonction anonyme et elles seront accessibles plus rapidement. En passant l'objet window, l'objet window peut être utilisé comme variable locale. Ensuite, les paramètres de la fonction deviennent également des variables locales lors de l'accès à l'objet window dans jquery, il n'est pas nécessaire de renvoyer la chaîne de portée en haut. Portée de -niveau, donc L'objet window est accessible plus rapidement.

Paramètre non défini

Lorsque js recherche une variable, le moteur js recherchera d'abord la variable dans le cadre de la fonction elle-même. Si elle n'existe pas, il continuera à chercher vers le haut. Si elle est trouvée, il renverra la variable. . S'il ne le trouve pas, il renverra undéfini. undéfini est une propriété de l'objet window En passant le paramètre undéfini sans attribuer de valeur, la chaîne de portée lors de la recherche d'undéfini peut être raccourcie. Dans le cadre d'une fonction anonyme auto-appelante, assurez-vous que undefined est réellement indéfini. Parce que undefined peut être écrasé et recevoir une nouvelle valeur.

Qu'est-ce que jquery.fn ?

Copier le code Le code est le suivant :

jQuery.fn = jQuery.prototype = {
               constructeur : jQuery,
                init: function(sélecteur, contexte, rootjQuery) { ... },
// Un tas de propriétés et méthodes de prototypes
        };

En analysant le code ci-dessus, nous avons constaté que jQuery.fn est jQuery.prototype. L'avantage de l'écrire de cette façon est qu'il est plus court. Plus tard, nous avons vu que jquery utilisait simplement un symbole $ au lieu de jquery pour plus de simplicité. Par conséquent, lorsque nous utilisons le framework jquery, nous utilisons souvent $(),

.

Constructeur jQuery()

Description de l'image

Les objets jQuery ne sont pas créés via le nouveau jQuery, mais via le nouveau jQuery.fn.init :

Copier le code Le code est le suivant :

var jQuery = fonction (sélecteur, contexte) {

return new jQuery.fn.init( sélecteur, contexte, rootjQuery );

}

Une variable jQuery est définie ici, et sa valeur est le constructeur jQuery, qui est renvoyé et attribué à la variable jQuery à la ligne 955 (le code du haut)

jQuery.fn.init

jQuery.fn (ligne 97 ci-dessus) est l'objet prototype de la fonction constructeur jQuery(), et jQuery.fn.init() est la méthode prototype jQuery, qui peut également être appelée constructeur. Responsable de l'analyse des types de sélecteur de paramètres et du contexte et d'effectuer les recherches correspondantes.

Contexte du paramètre : vous ne pouvez pas le transmettre, ou vous pouvez le transmettre dans un objet jQuery, un élément DOM ou l'un des objets js ordinaires
Paramètre rootjQuery : objet jQuery contenant l'objet document, utilisé pour des situations telles que l'échec de document.getElementById().

Copier le code Le code est le suivant :

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
jQuery(sélecteur [,context])

Par défaut, la recherche des éléments correspondants commence à partir de l'objet document de l'élément racine, c'est-à-dire que la portée de la recherche est l'ensemble de l'arborescence du document, mais vous pouvez également transmettre le contexte du deuxième paramètre pour limiter sa portée de recherche. Par exemple :

Copier le code Le code est le suivant :

$('div.foo').click(function () {
                 $('span',this).addClass('bar');//Limiter la plage de recherche, c'est-à-dire le contexte ci-dessus
});
jQuery.extend() et jQuery.fn.extend()

Les méthodes jQuery.extend(object) et jQuery.fn.extend(object) sont utilisées pour fusionner deux objets ou plus dans le premier objet. Le code source pertinent est le suivant (en partie) :

Copier le code Le code est le suivant :

jQuery.extend = jQuery.fn.extend = function() {
options var, nom, src, copie, copyIsArray, clone, // un ensemble de variables locales définies
cible = arguments[0] || {},
je = 1,
longueur = arguments.longueur,
         profond = faux ;

jQuery.extend(object); Ajouter une méthode de classe à la classe jQuery, ce qui peut être compris comme l'ajout d'une méthode statique. Tel que :

Copier le code Le code est le suivant :

$.extend({
​ajouter:fonction(a,b){returna b;}
});

Ajoutez une "méthode statique" appelée add pour jQuery, puis vous pourrez utiliser cette méthode où jQuery est introduit,

$.add(3,4); //retour 7
jQuery.fn.extend(object), consultez une démonstration de code sur le site officiel comme suit :

Copier le code Le code est le suivant :

<étiquette> Barre
<script><p> jQuery.fn.extend({<br>            vérifier : function() {<br>                renvoie this.each(function() {<br> This.checked = true;<br>             });<br> },<br> ​​​​ décochez : function() {<br>                renvoie this.each(function() {<br> This.checked = false;<br>             });<br> ><br> });<br> // Utilisez la méthode .check() nouvellement créée<br> $( "input[type='checkbox']" ).check();<br> </script>

Moteur de sélection CSS Sizzle

On peut dire que jQuery est né pour exploiter le DOM. La raison pour laquelle jQuery est si puissant est due au moteur de sélection CSS Sizzle. Les règles d'analyse citent un exemple tiré d'Internet :

.

sélecteur："div > p div.aaron input[type="checkbox"]"

Règles d'analyse :

1 Suivez de droite à gauche
2 Retirez le dernier jeton, tel que [type="checkbox"]
                                                                                           correspondances : Tableau[3]
tapez : "ATTR"
                                                                             Case à cocher "]"
                                                                                                  } 3 Type de filtre Si le type est > ~ vide, l'un des quatre sélecteurs de relation, puis ignorez et continuez le filtrage
4 jusqu'à ce qu'il corresponde à l'un des ID, CLASS et TAG, car de cette façon, il peut être obtenu via l'interface du navigateur
5 A cette époque, la collecte des graines a de la valeur, ce qui réduit les conditions de sélection des pinceaux
6. S'il existe plusieurs collections de graines correspondantes, un filtrage supplémentaire est requis. Modifiez le sélecteur : "div > p div.aaron [type="checkbox"]"
. 7 OK, passez à l'étape suivante de la fonction de compilation



Objet différé

Dans le processus de développement de sites Web, nous rencontrons souvent certaines opérations JavaScript qui prennent beaucoup de temps. Parmi elles, il existe à la fois des opérations asynchrones (telles que la lecture ajax des données du serveur) et des opérations synchrones (telles que la traversée d'un grand tableau), et les résultats ne sont pas disponibles immédiatement. L'approche habituelle consiste à leur spécifier des fonctions de rappel. Autrement dit, spécifiez à l'avance quelles fonctions doivent être appelées une fois leur exécution terminée.

Cependant, jQuery est très faible en ce qui concerne les fonctions de rappel. Afin de changer cela, l'équipe de développement jQuery a conçu l'objet différé.

Pour faire simple, l'objet différé est la solution de fonction de rappel de jQuery. En anglais, defer signifie « retard », donc la signification d'un objet différé est de « retarder » l'exécution jusqu'à un certain point dans le futur.

Revoyez la manière traditionnelle d'écrire l'opération ajax de jQuery :

Copier le code

Le code est le suivant : $.ajax({ url : "test.html",

Succès : fonction(){

alert("Haha, réussi!");
　　},
erreur:fonction(){
alert("Quelque chose s'est mal passé !");
　　}
});


Dans le code ci-dessus, $.ajax() accepte un paramètre d'objet. Cet objet contient deux méthodes : la méthode success spécifie la fonction de rappel une fois l'opération réussie et la méthode d'erreur spécifie la fonction de rappel après l'échec de l'opération.

Une fois l'opération $.ajax() terminée, si vous utilisez une version de jQuery inférieure à 1.5.0, l'objet XHR sera renvoyé et vous ne pourrez pas effectuer d'opérations en chaîne si la version est supérieure à 1.5.0 ; , les objets Deferred renvoyés peuvent être chaînés.

Maintenant, la nouvelle façon d'écrire est la suivante :

Copier le code Le code est le suivant :

$.ajax("test.html")
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });

Spécifiez les fonctions de rappel pour plusieurs opérations

Un autre grand avantage de l'objet différé est qu'il vous permet de spécifier une fonction de rappel pour plusieurs événements, ce qui n'est pas possible avec l'écriture traditionnelle.

Veuillez regarder le code suivant, qui utilise une nouvelle méthode $.when() :

Copier le code Le code est le suivant :

$.when($.ajax("test1.html"), $.ajax("test2.html"))

　.done(function(){ alert("Haha, réussi !"); })

.fail(function(){ alert("Erreur!"); });

La signification de ce code est d'effectuer d'abord deux opérations $.ajax("test1.html") et $.ajax("test2.html") Si les deux réussissent, exécutez le rappel spécifié par la fonction done(). ; si l'un ou les deux échouent, la fonction de rappel spécifiée par fail() est exécutée.

Principe d'implémentation de jQuery.Deferred(func)

Trois listes de fonctions de rappel sont maintenues en interne : liste de fonctions de rappel de réussite, liste de fonctions de rappel d'échec et liste de fonctions de rappel de message. D'autres méthodes fonctionnent et détectent autour de ces trois listes.

Structure du code source de jQuery.Deferred( func ) :

Copier le code Le code est le suivant :

jQuery.extend({

Différé : function( func ) {
// Liste des fonctions de rappel de réussite
          var doneList = jQuery.Callbacks( "une fois la mémoire" ),
// Liste des fonctions de rappel d'échec
              failList = jQuery.Callbacks( "une fois la mémoire" ),
// Liste des fonctions de rappel de message
           progressList = jQuery.Callbacks( "memory" ),
// Etat initial
             state = "en attente",
                       // Copie en lecture seule de la file d'attente asynchrone
               promesse = {
// terminé, échoue, progresse
                                  // state, isResolved, isRejected
                              // puis, toujours
                          // tuyau
// promesse             },
                                          // File d'attente asynchrone               différé = promise.promise({}),
             clé ;
​​​​ // Ajoutez des méthodes pour déclencher des listes de réussite, d'échec et de rappel de messages
pour (saisir les listes) {
              deferred[key] = lists[key].fire;
             différé[ clé "Avec" ] = listes[ clé ].fireWith;
>
                // Ajouter une fonction de rappel pour définir le statut
différé.done( function() {
             state = "résolu";
}, failList.disable, progressList.lock )
         .fail( function() {
             state = "rejeté";
            }, doneList.disable, progressList.lock );
                 // Si le paramètre de fonction func est transmis, il sera exécuté.
           if ( func ) {
                func.call(différé, différé);
>

// Retourne la file d'attente asynchrone différée

         retour différé ;

},
>

jQuery.when (différés)

Offre la possibilité d'exécuter des fonctions de rappel basées sur l'état d'un ou plusieurs objets, généralement basées sur une file d'attente asynchrone avec des événements asynchrones.

Utilisation de jQuery.when (différés)

Si plusieurs objets de file d'attente asynchrone sont transmis, la méthode jQuery.when() renvoie une nouvelle copie en lecture seule de l'objet de file d'attente asynchrone principal. La copie en lecture seule suivra l'état final de la file d'attente asynchrone transmise.

Une fois que toutes les files d'attente asynchrones réussissent, la fonction de rappel de réussite de la file d'attente asynchrone « principale » est appelée

 ;

Si l'une des files d'attente asynchrones échoue, la fonction de rappel d'échec de la file d'attente asynchrone principale est appelée.

Copier le code Le code est le suivant :

/*
La requête '/when.do?method=when1' renvoie {"when":1}
La requête '/when.do?method=when2' renvoie {"when":2}
La requête '/when.do?method=when3' renvoie {"when":3}
*/
var whenDone = function(){ console.log( 'done', arguments },
); WhenFail = function(){ console.log( 'fail', arguments };
); $.quand(
$.ajax( '/when.do?method=when1', { dataType: "json" } ),
$.ajax( '/when.do?method=when2', { dataType: "json" } ),
$.ajax( '/when.do?method=when3', { dataType : "json" } )
).done( whenDone ).fail( whenFail );

Description de l'image

File d'attente asynchrone différée

Découplage des tâches asynchrones et des fonctions de rappel

Fournir des fonctions de base pour le module ajax, le module de file d'attente et l'événement ready.

Propriétés et méthodes du prototype

Code source des propriétés et méthodes du prototype :

Copier le code Le code est le suivant :

97 jQuery.fn = jQuery.prototype = {
Constructeur 98 : jQuery,
99 init : fonction (sélecteur, contexte, rootjQuery) {}
Sélecteur 210 : "",
213 jquery : "1.7.1",
216 longueur : 0,
Taille 219 : function() {},
223 toArray : fonction() {},
229 obtenir : fonction (num) {},
241 pushStack : function(elems, name, selector) {},
270 chacun : function( callback, args ) {},
274 prêt : function( fn ) {}, //
284 éq : function( i ) {},
291 premier : function() {},
295 dernier : function() {},
299 tranche : fonction() {},
Carte 304 : fonction (rappel) {},
310 fin : function() {},
316 pousser : pousser,
317 trier : [].trier,
318 épissure : [].splice
319};

L'attribut selector est utilisé pour enregistrer l'expression du sélecteur lorsque jQuery trouve et filtre les éléments DOM.
L'attribut .length représente le nombre d'éléments dans l'objet jquery actuel.
La méthode .size() renvoie le nombre d'éléments dans l'objet jquery actuel. Elle est fonctionnellement équivalente à l'attribut length, mais length doit être utilisée en premier car elle n'a pas de surcharge d'appel de fonction.

Le code source de

.size() est le suivant :

Copier le code Le code est le suivant :

taille()：fonction(){
Renvoie this.length;
>

La méthode .toArray() convertit l'objet jQuery actuel en un vrai tableau. Le tableau converti contient tous les éléments :

Copier le code Le code est le suivant :

toArray : fonction() {
          return slice.call( this );
},

Method.get(index) renvoie l'élément à la position spécifiée dans l'objet jQuery actuel, ou un tableau contenant tous les éléments. Sa source
Le code est le suivant :

Copier le code Le code est le suivant :

Obtenir : fonction (num) {
         return num == null ?

                     // Renvoie un tableau « propre »
This.toArray() :

// Renvoie uniquement l'objet
( num < 0 ? this[ this.length num ] : this[ num ] );
},

Si aucun paramètre n'est transmis, l'appel de .toArray() renvoie un tableau contenant les éléments verrouillés ; si le paramètre index est spécifié, un seul élément est renvoyé. L'index commence à compter à partir de 0 et prend en charge les nombres négatifs.

Tout d'abord, il sera jugé si num est inférieur à 0. S'il est inférieur à 0, l'indice sera recalculé en utilisant la longueur num, puis l'opérateur d'accès au tableau ([]) sera utilisé pour obtenir l'élément à la position spécifiée. Il s'agit d'une petite méthode qui prend en charge les indices négatifs ; s'il est supérieur ou égal à 0, renvoie directement l'élément à la position spécifiée.

Explication détaillée de l'utilisation de eg() et get() : Résumé des méthodes jquery courantes et exemples d'utilisation

La méthode .each() est utilisée pour parcourir l'objet jQuery actuel et exécuter la fonction de rappel sur chaque élément. Method.each() est implémenté en interne en appelant simplement la méthode statique jQuery.each() :

Copier le code Le code est le suivant :

chacun : fonction (rappel, arguments) {
          return jQuery.each( this, callback, args );
},

La fonction de rappel est déclenchée dans le contexte où l'élément actuel est le contexte, c'est-à-dire que le mot-clé this pointe toujours vers l'élément actuel, et retourner false dans la fonction de rappel peut mettre fin au parcours.

La méthode .map() parcourt l'objet jQuery actuel, exécute la fonction de rappel sur chaque élément et place la valeur de retour de la fonction de rappel dans un nouvel objet jQuery. Cette méthode est souvent utilisée pour obtenir ou définir la valeur d'une collection d'éléments DOM.

Copier le code Le code est le suivant :

map: function( rappel ) {
          return this.pushStack( jQuery.map(this, function( elem, i ) {
                return callback.call(elem, i, elem);
         }));
},

La méthode prototype .pushStack() crée un nouvel objet jQuery vide, puis place la collection d'éléments DOM dans cet objet jQuery et conserve une référence à l'objet jQuery actuel.

Le prototype method.pushStack() est l'une des méthodes principales, qui prend en charge les méthodes suivantes :

Traversée d'objets jQuery : .eq(), .first(), .last(), .slice(), .map().

Recherche et filtrage DOM : .find(), .not(), .filter(), .closest(), .add(), .andSelf().

Parcours DOM : .parent(), .parents(), .parentsUntil(), .next(), .prev(), .nextAll(), .prevAll(), .nextUnit(), .prevUnit() , .siblings(), .children(), .contents().

Insertion DOM : jQuery.before(), jQuery.after(), jQuery.replaceWith(), .append(), .prepent(), .before(), .after(), .replaceWith().
Définir la méthode .push(elems, name, selector), qui accepte 3 paramètres :

Éléments de paramètre : tableau d'éléments (ou objet de type tableau) qui seront placés dans le nouvel objet jQuery.

Nom du paramètre : Le nom de la méthode jQuery qui génère le tableau d'éléments elems.

Sélecteur de paramètres : Le paramètre passé à la méthode jQuery, utilisé pour modifier l'attribut prototype.selector.
La méthode .end() termine l'opération de filtrage la plus récente de la chaîne actuelle et restaure les éléments correspondants à leur état précédent

Copier le code Le code est le suivant :

fin : fonction() {
         return this.prevObject || this.constructor(null);
},

Renvoie l'objet jQuery précédent. Si l'attribut prevObect n'existe pas, un objet jQuery vide est construit et renvoyé. La méthode .pushStack() est utilisée pour pousser dans la pile, et la méthode .end() est utilisée pour sortir de la pile

Propriétés et méthodes statiques

Le code source pertinent est le suivant :

Copier le code Le code est le suivant :

388 jQuery.extend({
 389     noConflict : function( deep ) {},
 402     isReady : faux,
 406     prêtAttendez : 1,
 409     holdReady : function( hold ) {},
 418     prêt : fonction (attendre) {},
 444     bindReady : function() {},
 492     isFunction : function( obj ) {},
 496     isArray : Array.isArray || fonction( obj ) {},
 501     isWindow : function( obj ) {},
 505     isNumeric : fonction (obj) {},
 509     tapez : fonction( obj ) {},
 515     isPlainObject : function( obj ) {},
 544     isEmptyObject : function( obj ) {},
 551     erreur : fonction (msg) {},
 555     parseJSON : fonction (données) {},
 581     parseXML : fonction (données) {},
 601     noop : function() {},
 606     globalEval : fonction (données) {},
 619     camelCase : function( string ) {},
 623     nodeName : fonction (elem, nom) {},
 628     chacun : function( object, callback, args ) {},
 669     couper : couper ? fonction( texte ) {} : fonction( texte ) {},
 684     makeArray : fonction (tableau, résultats) {},
 702     inArray : fonction (elem, array, i ) {},
 724     fusionner : fonction (premier, deuxième) {},
 744     grep : function( elems, callback, inv ) {},
 761     carte : fonction( elems, callback, arg ) {},
 794     guide : 1,
 798     proxy : fonction (fn, contexte) {},
 825     accès : fonction (elems, clé, valeur, exec, fn, pass) {},
 852     maintenant : function() {},
 858     uaMatch : fonction (ua) {},
 870     sous : function() {},
 891     navigateur : {}
 892});
 

未完待续、、、今天就先到这里了，下次补齐。别急哈小伙伴们