À propos de chaque méthode dans jQuery (que fait jQuery)_jquery

1. On estime que de nombreuses personnes utiliseront la méthode each dans jQuery.

Alors jetons un coup d'œil à ce que jQuery a fait.

Retrouvez le code source de chacun dans jquery :

Copiez le code Le code est le suivant :

each: function( object, callback, args ) {
nom de la var, i = 0,
length = object.length,
isObj = length === jQuery || .isFunction( objet );

if ( args ) {
if ( isObj ) {
for ( nom dans l'objet ) {
if ( callback.apply( objet[ nom ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i ], args ) = == false ) {
break;
}
}
}

// Un cas spécial et rapide pour l'utilisation la plus courante de chacun
} else {
if ( isObj ) {
for ( nom dans l'objet ) {
if ( callback.call( objet[ nom ], nom, objet[ nom ] ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.call( object[ i ], i, object[ i ] ) === false ) {
break;
}
}
}

return object;
ce code C'est relativement simple, il ne devrait y avoir aucun problème

Afin de tester ce truc, j'ai écrit le js suivant

Copie. code

Le code est le suivant : $.each($(".demo"),function(){ console.log("show ");

});

Puis ajoutez un morceau de html :

Copiez le code

Le code est le suivant :

Utilisez ensuite le code source de jQuery pour déboguer, en pensant que vous pouvez obtenir les bons résultats. Mais c'est dommage.

Comme vous pouvez le voir, l'objet ici n'est pas les trois objets html que je veux, mais les 8 types de données intégrés de js. Après

, j'ai ajouté un morceau de code au code source de jquery :



Copiez le code

Le code est comme suit : console.log(Object.prototype.toString(object)); console.log(length);

L'entrée après
est la suivante suit :

C'est-à-dire que lorsque le document est chargé, jQuery utilisera each pour parcourir l'objet dom, même s'il n'est pas utilisé



Copier le code

Le code est le suivant : $(function(){ }); Après avoir traversé l'objet spécifié, le bullage continuera à traverser l'élément parent.

2. Utilisez les paramètres de la fonction de rappel selon le code source de jQuery

Copiez le code


Le code est tel suit :

$.each($(".demo"),function(a,b){ console.log(a "" $(a).attr("class" )); } )

Vous pouvez voir à partir du code source :

Copiez le code

Le code est le suivant :

callback.call( object[ i ], i, object[ i ] ) Enfin, l'objet actuel est passé à la fonction de rappel via la méthode d'appel, vous pouvez alors procéder comme ci-dessus Utiliser les propriétés de l'objet actuel. Bien sûr, vous pouvez également l'appeler directement en utilisant ceci.

Si on parle de choses plus compliquées, par exemple, ici je passe $(".demo") comme objet à $.each()

Parfois ce n'est pas passé jQuery ou objet html . Mais un objet ou un tableau.

Et il existe de nombreux autres objets ou méthodes dans le tableau.

De cette façon, vous pouvez obtenir plus d'effets.

3. Utilisez call ou apply pour implémenter le mode de rappel

Comme vous pouvez le voir dans le code ci-dessus :




Copier le code<.>

Le code est le suivant :

callback.call(obj,args)

Copier le code Le code est le suivant :

callback.apply([obj],args )

, il vous suffit de passer la fonction de rappel pour l'appeler vous-même, ce qui est très utile pour améliorer la réutilisation du code.

Mais il y a aussi quelques défauts, comme une lisibilité réduite du code, un couplage accru, etc.

Si vous recevez quelque chose de temps en temps, enregistrez-le pour éviter de l'oublier !