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
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 :
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 ?
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 :
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().
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 :
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) :
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 :
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 :
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
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 :
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() :
.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 ) :
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
},
>
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.
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.
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 :
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.
.size() est le suivant :
La méthode .toArray() convertit l'objet jQuery actuel en un vrai tableau. Le tableau converti contient tous les éléments :
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 :
// Renvoie un tableau « propre »
This.toArray() :
// Renvoie uniquement l'objet
( num < 0 ? this[ this.length num ] : this[ num ] );
},
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() :
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.
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
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 :
未完待续、、、今天就先到这里了，下次补齐。别急哈小伙伴们
Quels sont les quatre outils d'analyse du Big Data ?
analyses statistiques
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
