[Javascript] Code source de zepto Analyse de rappel

Le module Callback est utilisé pour gérer les fonctions de rappel et constitue également la partie de base de l'objet Deferred Delay. Jetons maintenant un œil à son code source.
Paramètres facultatifs :

  Options:
    once: 是否最多执行一次，
    memory: 是否记住最近的上下文和参数
    stopOnFalse: 当某个回调函数返回false时中断执行
    unique: 相同得回调只被添加一次

Il s'agit d'un paramètre facultatif, vous pouvez le tester ci-dessous :

var a = function (value) {
  console.log('a:' + value);
};
var b = function (value) {
  console.log('b:' + value);
};
var callbacks = $.Callbacks();
callbacks.add(a);
callbacks.fire(['hello']);
callbacks.add(b);
callbacks.fire('中');

Voici sa sortie :

a: hello,
a:中,
b:中

Vous pouvez voir que lorsque nous tirerons pour la deuxième fois, la fonction a sera également exécutée.
Lors de l'ajout de paramètres pour les expériences, ajoutez d'abord de la mémoire

var callbacks = $.Callbacks({
  memory: true
});
callbacks.add(a);
callbacks.fire('hello');
callbacks.add(b);
输出：
a:hello,
b:hello

Ajoutez le paramètre de mémoire. La mémoire enregistre la dernière fois que la fonction de rappel a été déclenchée. Toutes les fonctions ajoutées par la suite seront exécutées immédiatement à l'aide de ce paramètre. En regardant l'utilisation d'une fois

var callbacks = $.Callbacks({
  once: true
});
callbacks.add(a);
callbacks.fire('hello');
callbacks.fire('中');
输出：
a:hello

, nous pouvons voir que bien que la méthode fire soit exécutée deux fois, le résultat n'est affiché qu'une seule fois. Les deux autres paramètres sont faciles à comprendre, vous pouvez donc essayer les détails vous-même.

$.Callbacks = function(options) {
  options = $.extend({}, options)
  var memory, 
    fired, 
    firing,
    firingStart,
    firingLength,
    firingIndex,
    list = [],
    stack = !options.once && []
}

Regardez la signification de chaque paramètre. La mémoire se souviendra du contexte et des paramètres du dernier déclencheur en mode mémoire, ce qui signifie que le rappel a été déclenché, ce qui signifie que le rappel est déclenché. Tâche de rappel FireStart La position de départ, la longueur de la tâche de rappel FireLength, l'index du rappel actuel dans FireIndex et la liste représentent la véritable file d'attente de rappel. Si elle n'est pas déclenchée une seule fois, elle est utilisée pour mettre en cache les paramètres de la tâche qui sont. non exécuté pendant le processus de déclenchement.

fire = function(data) {
  memory = options.memory && data
  fired = true
  firingIndex = firingStart || 0
  firingStart = 0
  firingLength = list.length
  firing = true
  for ( ; list && firingIndex < firingLength ; ++firingIndex ) {
    if (list[firingIndex].apply(data[0], data[1]) === false && options.stopOnFalse) {
      memory = false
      break
    }
  }
  firing = false
  if (list) {
    if (stack) stack.length && fire(stack.shift())
    else if (memory) list.length = 0
    else Callbacks.disable()
  }
}

La fonction fire est la seule fonction intégrée. Sa fonction est de déclencher l'exécution du rappel de la liste. Tout d'abord, jetons un œil aux paramètres qu'elle transmet. Ce n'est pas la même chose. comme le feu que nous appelons $.Callbacks en externe. C'est à peu près la même chose, data ici est un tableau, data[0] représente le contexte et data[1] est le paramètre de l'appel de méthode. Ensuite, il y a l'initialisation de chaque paramètre, memory signifie que si options.memory est vrai, les données sont enregistrées et le déclenchement est vrai. Si FireStart est 0, alors FireIndex est 0, FireStart est défini sur 0 et la marque de rappel de déclenchement. le tir est vrai.
Parcourez ensuite la liste de rappel et exécutez les rappels un par un. Le jugement if à l'intérieur de cela signifie que si la fonction de rappel renvoie false et que options.stopOnFalse est false, le cache mémoire sera vidé. Une fois le parcours terminé, modifiez l'état d'exécution sur false. Si la liste existe et que la pile existe également, supprimez les paramètres de la tâche et appelez la fonction fire pour l'exécuter. Si de la mémoire existe, effacez la liste, sinon l'exécution du rappel est effectuée

Enfin, ce fichier renvoie des rappels. Jetons un coup d'œil à son implémentation spécifique :

Callbacks = {
  add: function () {
    if (list) {
      var start = list.length,
        add = function (args) {
          $.each(args, funciton(_, arg) {
            if (typeof arg === 'function') {
              if (!options.unique || !Callbacks.has(arg)) list.push(arg);
            } else if (arg && arg.length && typeof arg !== 'string') add(arg);
          })
        }
      add(arguments)
      if (firing) firingLength = list.length;
      else if (memory) {
        firingStart = start;
        fire(memory)
      }
    }
    return this;
  }
}

La fonction principale de cette fonction. est comme le rappel push dans la liste. Tout d'abord, déterminez si la liste existe. Si elle existe, start se voit attribuer la longueur de la liste et une méthode add est ajoutée en interne. La méthode add interne consiste principalement à ajouter un rappel à la liste si le paramètre que nous transmettons est. un tableau, la méthode add est appelée à nouveau. Appelez ensuite la méthode add et transmettez les arguments. Si le rappel est en cours, corrigez la longueur de la tâche de rappel FireLength à la longueur de la liste de tâches actuelle afin que les fonctions de rappel ajoutées ultérieurement puissent être exécutées. Si de la mémoire existe, définissez le début sur la première position dans la liste nouvellement ajoutée, puis appelez le feu.
Jetons un coup d'œil au fonctionnement de fireWith :

fireWith: function(context, args) {
  if (list && (!fired || stack)) {
    args = args || [];
    args = [context, args.slice ? args.slice() : args];
    if (firing) stack.push(args);
    else fire(args);
  }
  return this;
}

Les paramètres transmis dans le contexte d'inclusion et la liste de paramètres. La condition d'exécution de la fonction est que la liste existe et que le rappel n'est pas exécuté ou que la pile existe et que la pile peut être vide. Tout d’abord, réaffectez args[0] est le contexte et args[1] est la liste copiée. Si le rappel est en cours, ajoutez des arguments à la pile ou exécutez simplement des arguments.

Articles associés :

Introduction au module Gesture dans le code source de Zepto

Une brève analyse de la méthode Callback en Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!