Analyse de la méthode addClass() du code source jQuery interprétation_jquery

Cet article analyse plus en détail la méthode addClass() d'interprétation du code source jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Étendez la fonction addClass à l'objet prototype jQuery, jQuery.fn est jQuery.prototype

Copier le code Le code est le suivant :

jQuery.fn.extend({
/*
On peut voir qu'il s'agit d'une méthode plug-in avec une fonction nommée addClass.
*/
AddClass : fonction (valeur) {
        var classes, elem, cur, clazz, j, finalValue,
            i = 0,
/*
Cela représente l'objet jQuery sélectionné par le sélecteur à ajouter en tant que classe, et len ​​est la longueur du tableau d'objets jQuery.
*/
            len = this.length,
//Lorsqu'un opérande n'est pas une valeur booléenne, l'opération && ne renvoie pas nécessairement une valeur booléenne. A ce stade, elle suit les règles suivantes :
. //1. Si le premier opérande n'est pas de type booléen, renvoie le deuxième opérande ;
//2. Si le deuxième opérande n'est pas de type booléen, l'objet ne sera renvoyé que si le résultat de l'évaluation du premier opérande est vrai
; //3. Si aucun des opérandes n'est de type booléen, renvoie le deuxième opérande
. //4. Si l'un des opérandes est nul, renvoie null
//5. Si l'un des opérandes est NaN, renvoie NaN;
//6. Si l'un des opérandes n'est pas défini, renvoie undéfini.
//Cas 1 : si la valeur est nulle, ce qui est conforme à la règle 4, renvoie null, c'est-à-dire que la valeur continue est nulle
 ; //Cas 2 : Si la valeur est indéfinie, ce qui est conforme à la règle 6, undéfini est renvoyé, c'est-à-dire que la valeur continue est indéfinie
 ; //Cas 3 : Si la valeur est NaN, ce qui est conforme à la règle 5, renvoie NaN, c'est-à-dire que la valeur continue est NaN
 ; //Cas 4 : Si la valeur est un type numérique, renvoie false ;
//Cas 5 : Si la valeur est de type booléen, renvoie false ;
// Cas 7 : Si la valeur est de type Tableau, Objet, Fonction, elle est conforme à la règle 2, mais le type de valeur === 'string' est faux, donc l'objet est renvoyé et false est renvoyé.
//Cas 8 : Si la valeur est un type chaîne et répond à la règle 2, renvoie la valeur.
//Par conséquent, cette phrase peut uniquement déterminer si la valeur est un type chaîne et renvoyer la valeur chaîne pour continuer. Tout autre type finit par renvoyer false ou est un type qui peut être implicitement converti en false.
              procéder = typeof value === "string" && value;
//Puisque ce qui précède ne peut déterminer que s'il s'agit d'un type chaîne, la phrase suivante sert à déterminer si la valeur est un type fonction. La fonction globale isFunction de jQuery est utilisée pour juger, qui est $.isFunction().
            if ( jQuery.isFunction( value ) ) {
//Si la valeur est un type Fonction, allez ici.
//Renvoie l'objet jQuery pour l'appel en chaîne.
//Voici l'objet jQuery sélectionné par votre sélecteur.
               renvoie this.each(function( j ) {
// Commencer l'itération. Ce n'est pas ici un objet jQuery, mais l'objet DOM de l'itération en cours, il est donc enveloppé avec jQuery(this) et devient un objet jQuery, afin que vous puissiez utiliser les méthodes jQuery. j représente l'index de chaque parcours. Transmettez une fonction de valeur qui renvoie une valeur pour définir le nom de la classe. La fonction value appelle le DOM actuel comme objet d'exécution à chaque fois et transmet la valeur d'index DOM actuelle et le nom de la classe. La valeur renvoyée par la fonction value est à nouveau appelée par jQuery(this).addClass (valeur de retour La addClass). () est appelée à nouveau. Si une chaîne est renvoyée, une autre branche if est exécutée. Si la fonction renvoyée est toujours une fonction, continuez à appeler la fonction renvoyée.
jQuery( this ).addClass( value.call( this, j, this.className ) );
            });
>
//Le produit obtenu auparavant est une chaîne. Ici, nous déterminons s'il s'agit d'une chaîne vide. Les chaînes non vides sont implicitement converties en vrai. La chaîne vide est implicitement convertie en false, donc le bloc d'instruction if ne sera plus exécuté. Le programme passera au retour final this, et l'objet jQuery sera renvoyé et l'exécution sera terminée.
           if (continuer) {
//exécute une chaîne non vide et commence à exécuter le bloc d'instruction if. Supposons que la valeur soit "show bd1".
//rnotwhite est une expression régulière (/S /g), ce qui signifie faire correspondre globalement des caractères autres que des espaces une ou plusieurs fois.
//(value || "") renvoie "show bd1", ce qui est très simple.
//"show bd1".match((/S /g)) || [] renvoie ["show", "bd1"]. Si vous ne savez pas ce que fait la correspondance, veuillez le vérifier.
classes = ( valeur || "" .match( rnotwhite ) || //Maintenant, les classes sont ['show', 'bd1'] un tableau dans lequel vous souhaitez ajouter le nom de la classe.
// Commencez à parcourir ci-dessous et ajoutez des classes pour chaque objet DOM.
                pour ( ; i < len; i ) {
// c'est l'objet jQuery, elem est l'objet DOM actuel.
                 elem = this[i];
/*
L'opérateur === a une priorité plus élevée que l'opérateur &&. Il détermine d'abord si le type de nœud DOM est un nœud d'élément.
rclass est une expression régulière/[trnf]/g;
L'opérateur ternaire entre parenthèses indique si le nœud DOM actuel possède déjà une classe. Si tel est le cas, le caractère de tabulation, le caractère de saut de ligne, le caractère de retour chariot, etc. qui peuvent exister dans la classe seront remplacés par une chaîne avec un espace " ". , et ajoutez un espace avant et après la classe actuelle ; si le nœud DOM actuel n'a pas de classe, une chaîne avec un espace " " est également donnée. Finalement ça devient
cur = elem.nodeType === 1 && "show bd1", c'est très familier, oui, il est évalué selon les 6 premières règles.
Supposons que le type de nœud d'elem soit 1, alors cur = true && " ", et enfin cur = "show bd1".
Si le type de nœud d'elem n'est pas 1, alors cur = false && " ", et enfin cur = false.
*/
Cur = elem.nodeType === 1 && ( elem.className ?
                         ( " " elem.className " " ).replace( rclass, " " ):" ");
//Maintenant cur = "show bd1", entrez le bloc d'instruction if pour l'exécution.
Si ( cur ) {
j = 0;
/*
les cours sont ["show bd1"]
Boucle pour vérifier si la classe à ajouter existe déjà dans la classe que possède déjà l'élément DOM actuel.
Sinon, ajoutez cette classe.
*/
Tandis que ((Clazz = Classes [J]) {
Si ( cur.indexOf( " " clazz " " ) < 0 ) {
                                                                                                                                                                                                                                         " ;
                                                                                                          }                  }
/*
Enfin, utilisez $.trim() pour supprimer les espaces aux deux extrémités de la classe "show bd1".
Vérifiez si la classe de l'élément DOM actuel est la même que la classe épissée. Évitez la duplication inutile du rendu de la même classe.
*/
                           finalValue = jQuery.trim( cur );
Si ( elem.className !== finalValue ) {
à                  }
                }
            }
>
//Renvoie cet objet jQuery pour les futurs appels de chaîne.

retourne ceci ; >

});

J'espère que cet article sera utile à la programmation jQuery de chacun.