Explication détaillée des rappels dans le code source jQuery Analysis

L'essence du code met en évidence le concept de séquence et d'ordre, en particulier en JavaScript - après tout, JavaScript est un moteur à thread unique.

Javascript a les caractéristiques de la programmation fonctionnelle, et en raison du moteur JavaScript monothread, nos fonctions doivent toujours être exécutées de manière ordonnée. Un excellent code découpe souvent les fonctions dans leurs propres modules, puis les exécute sous certaines conditions. Puisque ces fonctions sont exécutées de manière ordonnée, pourquoi ne pas écrire un objet de gestion unifié pour nous aider à gérer ces fonctions - donc, les rappels (fonctions de rappel). ) sont nés.

Que sont les rappels

Javascript regorge de programmation fonctionnelle. Par exemple, le window.onload le plus simple accepte une fonction. Ce qui est triste, c'est que window.onload ne peut recevoir qu'une seule fonction si elle est affectée directement. exécuter dans onload, Ensuite, nous devons écrire le code suivant :

Copier le code Le code est le suivant :

fonction a(elem) {

                elem.innerHTML = 'Je suis la fonction a, je souhaite changer la structure HTML de l'élément';

        };

         fonction b(elem) {

                elem.innerHTML = 'Ma fonction b, je souhaite changer le style de l'élément';

>

          window.onload = function () {

               var elem = document.getElementById('test');

un(elem);

              b(elem);

        };

L'intention initiale de la fonction de rappel est de s'appuyer sur une telle chose. Elle ne nous permet plus de disperser ces fonctions, mais d'organiser ces fonctions de manière unifiée. Comme vous pouvez le voir, nous voulons faire deux choses pour un élément dans window.onload : d'abord changer la structure HTML, puis changer le style du HTML. Les deux fonctions opèrent également sur un Elément, et l'exécution finale de ces deux fonctions s'effectue dans l'ordre. Alors pourquoi ne pas écrire un objet comme celui-ci pour gérer ces fonctions. Bien sûr, ce n’est que la signification la plus élémentaire de la fonction de rappel. Nous avons besoin de plus qu’un simple objet de fonction de rappel, nous avons besoin d’une fonction de rappel plus puissante. Eh bien, ce n'est qu'un simple cas d'utilisation, je peux donc vous dire ce que cette fonction de rappel peut faire en plus d'exécuter les fonctions une par une.

L'essence des rappels est de contrôler l'exécution ordonnée des fonctions. Javascript est un moteur monothread, ce qui signifie qu'un seul code JavaScript s'exécute en même temps - même Ajax et setTimeout. Ces deux fonctions semblent asynchrones, mais ce n'est pas le cas. Lorsque le navigateur exécute du code javascript, ces codes seront placés dans une file d'attente de manière ordonnée. Lorsque vous exécutez Ajax, le navigateur les poussera dans la file d'attente de codes. Le navigateur prend le code un par un dans la file d'attente de code lors du traitement du code JavaScript - Rappels, destinés à ce moteur monothread.

Bien sûr, ce que nous voulons, c'est plus qu'un simple objet outil - dans le code source de jQuery, les rappels fournissent la gestion de base d'un ensemble de fonctions, constituent la base de Deferred (file d'attente asynchrone) et servent également de file d'attente. (file d'attente de synchronisation). Deferred est utilisé pour lisser/aplatir la programmation pyramidale (un grand nombre de fonctions de rappel imbriquées, telles que le code en Ajax qui doit être exécuté en fonction du code de retour de la requête et les lecteurs de file d'attente jQuery.animate (moteur d'animation).

Alors écrivons un rappel.

Modèle de rappels

Tableau :
Puisque nos Callbacks veulent accepter une série de fonctions, nous devons avoir un conteneur. Nous pouvons utiliser un tableau et pousser chaque fonction dans le tableau Lorsqu'elle doit être exécutée, bouclez les éléments du tableau à exécuter.

Modèle de travail :

Ces rappels doivent être très puissants. Ce n'est pas aussi simple que de pousser une fonction puis de l'exécuter.
once : toutes les fonctions de l'objet Callbacks actuel ne seront exécutées qu'une seule fois et seront publiées après l'exécution. Nous pouvons fournir une solution stable et efficace aux utilisateurs qui utilisent l'objet Callbacks pour garantir que la fonction ne sera exécutée qu'une seule fois et ne le sera pas. être exécuté à nouveau, ce qui stabilise les threads de ces fonctions.
auto : modèle d'exécution automatique. C'est un modèle intéressant. Certaines fonctions dépendent de la fonction de la couche précédente. Par exemple, l'exécution de la fonction b dépend de la fonction a. Ensuite, nous fournissons un modèle d'exécution automatique : après la première exécution de ce Callbacks, chaque fois qu'elle est ajoutée. Lorsque la fonction atteint les rappels, elle exécute automatiquement les fonctions ajoutées dans le passé et transmet les dernières données de paramètre données aux fonctions passées. Cela élimine le besoin de déclenchements répétés entre ces fonctions dépendantes à partir des rappels. un modèle intéressant.
once&auto : nous pouvons le rendre plus puissant et travailler avec les modèles once et auto en même temps, c'est-à-dire : chaque fois qu'une fonction est ajoutée aux rappels, les fonctions passées seront exécutées, puis ces fonctions passées seront libérées, et les fonctions continueront à être ajoutées la prochaine fois. À ce moment-là, ces fonctions du passé ne seront plus exécutées car le modèle une fois les a publiées.

API :

add(function) - Ajoutez une (ou plusieurs) fonctions à l'objet Callbacks : Bien sûr, si vous n'ajoutez pas de fonctions et que vous êtes simplement curieux de jeter un œil aux Callbacks, nous vous laissons continuer à vous amuser - nous ne lancerons pas d'exception car ce n'est pas quelque chose pour lequel nous sommes bons.
remove(function) - supprime une fonction dans un rappel : maintenant que nous l'avons ajoutée, nous devrions également fournir un plan pour le regretter. Nous sommes très accessibles et tolérons tout ce que d'autres ont fait dans le passé.
has(function) - Détermine si les rappels contiennent une fonction : Oh ? Vous ne savez pas si vous devez inclure cette fonction, mais vous l'avez ajoutée en premier lieu ! Pourquoi es-tu si négligent ? Mais puisque vous me l'avez demandé, je vais quand même vous dire si les rappels contiennent cette fonction. Je sais que vous êtes très occupé et que vous ne pouvez pas tout mémoriser et déterminer.
empty() - Rappels vides : ces fonctions ont-elles perdu leur sens pour vous ? Quoi? Vous n’en voulez plus après son exécution ? Alors tu aimerais pouvoir l'effacer ? Eh bien, pour des raisons de mémoire, je tolère toujours votre demande.
Disable() - Désactiver un rappel : afin de maintenir une existence stable avec le code des autres, j'ai choisi le sacrifice de soi - oui, cette méthode peut désactiver les rappels, les désactiver complètement, comme s'ils n'existaient pas auparavant.
désactivé () - Détermine si les rappels ont été désactivés : si vous ne croyez toujours pas si les rappels sont vraiment sacrifiés, cette méthode peut vous apporter une tranquillité d'esprit.
lock(boolean) - Verrouillez cet objet Callbacks : vous craignez qu'il soit instable, mais vous ne souhaitez pas l'abandonner. Lock est une bonne méthode. Il reçoit un paramètre booléen pour indiquer si l'objet doit être verrouillé. Bien sûr, il n'a aucun paramètre. Permet de déterminer si les rappels sont verrouillés.
fire(data) - Exécuter la fonction dans ce rappel : tout ce que nous faisons n'est-il pas destiné au sort de l'exécution en ce moment ? Les paramètres deviendront les paramètres de ces fonctions qui doivent être exécutées.
fireWith(context,data) - Exécutez la fonction dans Callbacks et spécifiez le contexte. Dans fire(), le Context de toutes les fonctions sont des objets Callbacks, et fireWidth() vous permet de redéfinir le contexte de ces fonctions à exécuter. Quelle que soit la gratuité de la programmation, Callbacks considère tout pour vous.
Fired() - Déterminez si cet objet Callbacks a été exécuté dans le passé : nous pensons que la plupart du temps, vous ne savez pas ce que vous avez fait dans le passé, mais nous enregistrons tout ce que vous faites si vous avez exécuté cet objet Callbacks. le passé, alors vous ne pouvez jamais le nier, car nous savons si vous avez exécuté ces rappels dans le passé.

Mise en œuvre du module de base

Mise en œuvre simple :
Commençons par simplement implémenter un rappel :

Copier le code Le code est le suivant :

(fonction (fenêtre, non définie) {

            var Rappels = function () {

//Protégez ces variables privées via des fermetures

                   var list = [],//Liste des fonctions de rappel

Viré ; // Avez-vous exécuté 

//Renvoie un objet Callbakcs de fermeture

                   revenir {

                         ajouter : fonction (fn) {

//Lorsque les rappels sont supprimés, la liste n'est pas définie

Si (liste) {

//Ajouter une fonction de rappel

                                 list.push(fn);

//Rappels de chaîne de support

                                                                                                          }
                                                                                        renvoie ceci ;
                    },

fireWith : fonction (contexte, données) {

//Déclenchez la fonction de rappel et spécifiez le contexte

Si (liste) {

viré = vrai ;

pour (var i = 0, len = list.length; i < len; i ) {

//Lorsqu'une fonction dans Callbacks renvoie false, arrêtez l'exécution ultérieure de Callbacks

Si (list[i].apply(context, data) === false)

pause;

                                                                                                   }
                                                                                                          }
                                                                                        retournez ceci ;
                    },

Feu : fonction() {

//Fonction de rappel de déclenchement
//Appelle fireWith et précise le contexte

Renvoyez this.fireWith(this, arguments);

                    },

                      vide : fonction () {

//Effacer la liste

                                                                                                                                                   if (list)//Lorsque ces rappels sont supprimés, les rappels ne devraient plus pouvoir continuer à être utilisés 

liste = [];

                                                                                        retournez ceci ;
                    },

                           désactiver : fonction () {

//Abandonnez cet objet Callbacks et la liste de fonctions de rappel suivante ne sera plus exécutée

                         list = undefined;

                                                                                        retournez ceci ;
                    },

                       désactivé : fonction () {//Détecter si ces rappels ont été désactivés 

//Convertir en booléen et renvoyer 

Retour !list;

                    },

                     déclenché : fonction () {//Si ces rappels ont été exécutés 

                 }

                };

            };

// S'inscrire à la fenêtre 

               window.Callbacks = Rappels ;

         }(fenêtre));

Alors testons ces rappels :

Copier le code Le code est le suivant :

        var test = new Callbacks();

         test.add(fonction (valeur) {

                console.log('Fonction 1, la valeur est : ' valeur);

        });

         test.add(fonction (valeur) {

​​​​​​ console.log('Fonction 2, la valeur est :' value);

        });

​​​​ test.fire('Voici la valeur de la fonction 1 et de la fonction 2');

console.log('Vérifiez si la fonction a été exécutée :' test.fired());

         test.disable();//Abandonner ces rappels

console.log('Vérifiez si la fonction est abandonnée :' test.disabled());

         test.add(function () {

console.log('Ajouter une troisième fonction, cette fonction ne doit pas être exécutée');

        });

         test.fire();

Ouvrez la console du navigateur et nous pouvons voir que les résultats d'exécution sont normaux.

implémentation unique et automatique (en mémoire)

une fois :
Once permet à la fonction de ce rappel de s'exécuter une fois, puis de ne plus s'exécuter. Le principe est très simple. Dans le code ci-dessus, nous pouvons voir qu'il existe une liste de variables qui prend le relais de la liste des fonctions, il suffit donc d'effacer les codes qui ont été exécutés dans le passé. Nous utilisons une variable globale pour enregistrer le modèle d'exécution actuel, s'il s'agit d'un modèle unique, invalidez simplement la liste dans fireWith() :

Copier le code Le code est le suivant :

(fonction (fenêtre, non définie) {
var Rappels = fonction (une fois) {
//Protégez ces variables privées via des fermetures
                   var list = [],//Liste des fonctions de rappel
Viré ; // Avez-vous exécuté
//Renvoie un objet Callbakcs de fermeture
                   revenir {
//...Omettre du code
fireWith : fonction (contexte, données) {
//Déclenchez la fonction de rappel et spécifiez le contexte
Si (liste) {
viré = vrai ;
pour (var i = 0, len = list.length; i < len; i ) {
//Lorsqu'une fonction dans Callbacks renvoie false, arrêtez l'exécution ultérieure de Callbacks
Si (list[i].apply(context, data) === false)
pause;
                                                                                                   }                                                                                                           } //Si le modèle once est configuré, la variable globale once est vraie et la liste est réinitialisée
Si (une fois) liste = non défini ;
                                                                                        retournez ceci ;                  }
//...Omettre du code
                };
            };
// S'inscrire à la fenêtre
               window.Callbacks = Rappels ;
         }(fenêtre));

auto :

Le modèle auto (mémoire) porte le nom de la mémoire dans jQuery. Au début, j'ai été dérouté par ce nom. Après avoir soigneusement examiné son utilisation, j'ai décidé de le changer en auto - sa fonction est "après le premier incendie()". , la "fonction add() suivante s'exécute automatiquement" peut être utilisée dans les situations suivantes : après avoir ajouté un ensemble de fonctions aux rappels, et vous devez temporairement ajouter une fonction, puis exécutez immédiatement la fonction nouvellement ajoutée - il faut dire que pour le commodité d'utilisation, ce modèle devient un peu difficile à comprendre. L'implémentation consiste à déterminer s'il s'agit d'un modèle automatique lors de add(). S'il s'agit d'un modèle automatique, exécutez cette fonction. Cependant, nous devons l'exécuter automatiquement après le premier fire(). Les rappels qui n'ont pas été déclenchés() ne doivent pas être automatiquement exécutés. De plus, après chaque exécution automatique, les derniers paramètres utilisés doivent être transmis à cette fonction exécutée automatiquement.

Peut-être penserez-vous au code suivant :

Copier le code Le code est le suivant :

(fonction (fenêtre, non définie) {

            var Rappels = fonction (une fois, auto) {

              var liste = [],

viré,

lastData;//Enregistrer les paramètres de la dernière exécution

                   revenir {

                         ajouter : fonction (fn) {

Si (liste) {

                                 list.push(fn);

​​​​​​​​​​​​
//Le dernier paramètre utilisé est passé, et le Contexte est perdu ici

//Afin d'éviter que le contexte ne soit perdu ici, nous devrons peut-être également déclarer une variable pour sauvegarder le dernier Context utilisé

Si (auto) this.fire(lastData);

                                                                                                          }
                                                                                        retournez ceci ;
                    },

fireWith : fonction (contexte, données) {

Si (liste) {

lastData = data;// — Enregistre le dernier paramètre utilisé 

viré = vrai ;

pour (var i = 0, len = list.length; i < len; i ) {

Si (list[i].apply(context, data) === false)

pause;

                                                                                                   }
                                                                                                          }
Si (une fois) liste = [];

                                                                                        retournez ceci ;
                 }

//Une partie du code est omise

                };
            };

// S'inscrire à la fenêtre 

               window.Callbacks = Rappels ;

         }(fenêtre));

Mais une utilisation plus merveilleuse est adoptée dans jQuery. L'auteur de jQuery est également fier de cette utilisation, c'est pourquoi il a nommé ce modèle mémoire - c'est-à-dire que la variable ci-dessus auto représente non seulement le mode d'exécution automatique actuel, mais sert également. comme dernier conteneur de paramètres, qui représente à la fois l'auto et la mémoire. (Le code suivant n'est pas jQuery et est écrit sur la base d'idées de code jQuery, et non de code source) :

Copier le code Le code est le suivant :

(fonction (fenêtre, non définie) {

            var Rappels = fonction (auto) {

              var liste = [],

viré,

Mémoire,//L'acteur principal est là, c'est la mémoire

coreFire = fonction (données) {

//La véritable méthode de la fonction déclencheur

Si (liste) {

Mémoire = auto && data;//Enregistrer le dernier paramètre S'il n'est pas en mode auto, ce paramètre ne sera pas enregistré 
.
//Si c'est le mode auto, alors cet auto ne sera pas faux, ce sera un tableau

viré = vrai ;

pour (var i = 0, len = list.length; i < len; i ) {

Si (list[i].apply(data[0], data[1]) === false)

pause;

                                                                                                   }
                                                                                                          }
                    };

                   revenir {

                         ajouter : fonction (fn) {

Si (liste) {

//Ajouter une fonction de rappel

                                 list.push(fn);

//Mode d'exécution automatique, notez que si le modèle auto

//la mémoire est attribuée dans coreFire(), la valeur par défaut est false

Si (mémoire) coreFire(auto);

                                                                                                          }
//Rappels de chaîne de support

                                                                                        retournez ceci ;                    },

fireWith : fonction (contexte, données) {

Si (une fois) liste = [];

//Appelez coreFire ici et convertissez les paramètres en tableau

coreFire([contexte, données]);

                                                                                        retournez ceci ;
                 }

                };

            };

               window.Callbacks = Rappels ;

         }(fenêtre));

Nous avons vu dans le code de l'implémentation automatique précédente que nous avions perdu le contexte. jQuery a corrigé ce bug au début de fireWith() - corrige les paramètres dans fireWith(). jQuery extrait la logique qui doit exécuter la fonction dans fireWith(). Nous l'appelons temporairement coreFire(). Dans le fireWith() d'origine, les paramètres sont fusionnés dans un tableau : le premier paramètre représente le contexte et le deuxième paramètre. Les paramètres représentent les paramètres transmis. Exécutez ensuite coreFire().

Pendant add(), jQuery n'a pas attribué de valeur à la variable auto(memory), mais a choisi d'attribuer une valeur à auto(memory) dans coreFire(), garantissant ainsi qu'elle ne sera pas activée avant le premier fire(). Exécuté automatiquement.

Comme mentionné ci-dessus, les paramètres reçus par coreFire() sont en fait un tableau. Le premier paramètre est le contexte et le deuxième paramètre est le paramètre transmis de l'extérieur. En même temps, affectez ce tableau à auto (mémoire), pour que la définition de la variable auto (si exécuter le mode automatiquement) devienne mémoire (mémoire du dernier paramètre passé).

C'est vraiment une idée géniale qui fait d'une pierre deux coups, je dois l'aimer. Je définis cela comme auto car il s'agit d'un modèle exécuté automatiquement, et en passant, les paramètres du dernier fire() sont enregistrés. La définition de jQuery en tant que mémoire peut être le soupir de l'auteur pour le travail miraculeux ici.

Quant à once&auto, il combine simplement ces deux codes. Il vous suffit de déterminer dans coreFire() que s'il est en mode automatique, puis de réinitialiser la liste sur un nouveau tableau, sinon de la définir directement sur non défini.

Code source

Ce code est écrit à la main par moi et correspond à jQuery. Certaines fonctions publiques de jQuery sont écrites. Ce n'est pas un fragment de code, il peut donc être directement référencé et exécuté.

Copier le code Le code est le suivant :

(fonction (fenêtre, non définie) {
/*
* Un objet outil de fonction de rappel. Notez que le tableau sera effacé une fois l'objet de travail terminé :
. * * Fournit un ensemble commun d'API, mais il a le modèle de travail suivant -
*Modèle d'exécution automatique : chaque ajout d'une fonction de rappel est ajouté pour exécuter automatiquement toutes les fonctions de rappel dans l'ensemble de fonctions de rappel existant, et les paramètres de cette fois sont transmis à toutes les fonctions de rappel
*
*/

//Fonction outil
var isIndexOf = Array.prototype.indexOf, //Es6
        toString = Object.prototype.toString, //Méthode Cache toString
TosLice = Array.prototype.slice, // Méthode Caches Slice
                                                        return "object" === typeof document.getElementById ?
               isFunction = function (fn) {
                      //Il y a un problème avec la reconnaissance du DOM et du BOM sous ie
                  essayez {
Retour /^s*bfunctionb/.test("" fn);
                        } attraper (x) {
Renvoyer faux
                }
               } :
               isFunction = function (fn) { return toString.call(fn) === '[object Function]' };
;          })(),
                                                                  //Le premier paramètre représente le tableau à boucler, et le deuxième paramètre est la fonction exécutée à chaque fois dans la boucle
Si (arguments.length < 2 || !isFunction(arguments[1])) return;
                       //Pourquoi la tranche n'est-elle pas valide ? ?
var list = toSlice.call(arguments[0]),
                             fn = arguments[1],
article ;
while ((item = list.shift())) {//Pas de détermination directe de la longueur, accélère
// Pourquoi utiliser call ici, et Apply ne convient pas ?
                               // Terminé - le deuxième paramètre de apply doit être un objet tableau (il n'y a aucune vérification si l'apparence d'un tableau est possible, et l'appel n'a pas cette exigence)
//apply est décrit comme suit : Si argArray (le deuxième paramètre) n'est pas un tableau valide ou n'est pas un objet d'arguments, une TypeError sera provoquée.
                           fn.call(window, item);
            }
},
inArray = function () { //Détecte si le tableau contient un élément et renvoie l'index de l'élément
                                                                                                // Pré-compilation
                 return isIndexOf ? (array, elem, i) {
Si (tableau)
                          return isIndexOf.call(array, elem, i);
                    return -1 ;
               } : fonction (elem, array, i) {
var len;
                    if (tableau) {
                    len = tableau.longueur;
                    je = je ? je &Lt ; 0 ? Math.max(0, len i) : i : 0;
                    pour (; je < len; je ) {
                        if (i in array && array[i] === elem) {
                            reviens-moi ;
                        >
                    >
                >
                retourner -1 ;
            >
        }();

Étiquettes associées：

jquery

source：php.cn

Article précédent：Méthodes et techniques JavaScript pour obtenir le texte sélectionné sur la page_javascript techniques Article suivant：Serialize() compétences serialization_javascript dans JQuery

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur