[Javascript] Zepto-Quellcode-Rückrufanalyse

Das Callback-Modul wird zur Verwaltung von Callback-Funktionen verwendet und ist auch der grundlegende Teil des Deferred-Delay-Objekts. Werfen wir nun einen Blick auf seinen Quellcode.
Optionaler Parameter:

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

Dies ist ein optionaler Parameter, den Sie unten testen können:

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('中');

Das Folgende ist das Ausgabeergebnis:

a: hello,
a:中,
b:中

Sie können Ja sehen , wenn wir zum zweiten Mal auslösen, wird auch Funktion a ausgeführt.
Wenn Sie Parameter für Experimente hinzufügen, fügen Sie zuerst Speicher hinzu

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

Fügen Sie den Speicherparameter hinzu, wann die Rückruffunktion zum letzten Mal ausgelöst wurde. Alle danach hinzugefügten Funktionen werden sofort mit diesem Parameter ausgeführt. Wenn wir uns die Verwendung von Once

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

ansehen, können wir sehen, dass die Feuermethode zwar zweimal ausgeführt wird, das Ergebnis jedoch nur einmal ausgegeben wird. Die anderen beiden Parameter sind leicht zu verstehen, sodass Sie die Details selbst ausprobieren können.

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

Schauen wir uns die Bedeutung jedes Parameters an. Der Speicher speichert den Kontext und die Parameter, die beim Auslösen des Rückrufs ausgelöst wurden . Die Funktion „FiringStart“ hat die Rückrufaufgabe gestartet, „FiringLength“, die Länge der Rückrufaufgabe, „FiringIndex“ und „Liste“ stellen die tatsächliche Rückrufwarteschlange dar. Wenn sie nicht einmal ausgelöst wird, wird sie zum Zwischenspeichern der Aufgabe verwendet Parameter, die während des Auslösevorgangs nicht ausgeführt werden.

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()
  }
}

Die Feuerfunktion ist die einzige integrierte Funktion. Ihre Funktion besteht darin, die Callback-Ausführung der Liste auszulösen. Schauen wir uns zunächst die Parameter an, die sie übergibt Wir rufen extern $.Callbacks auf, Daten sind hier ein Array, Daten[0] stellen den Kontext dar, Daten[1] sind die Parameter des Methodenaufrufs. Dann gibt es die Initialisierung jedes Parameters. Speicher bedeutet, dass die Daten gespeichert werden und „fired“ wahr ist. Wenn „firedStart“ 0 ist, ist „firedIndex“ 0, „firedStart“ ist auf „0“ gesetzt und die „fired“-Rückrufmarkierung ist festgelegt Das Schießen ist wahr.
Durchlaufen Sie dann die Rückrufliste und führen Sie die Rückrufe nacheinander aus. Das if-Urteil bedeutet, dass der Speichercache geleert wird, wenn die Rückruffunktion „false“ zurückgibt und „options.stopOnFalse“ „false“ ist. Nachdem die Durchquerung abgeschlossen ist, ändern Sie den Ausführungsstatus in „false“. Wenn die Liste vorhanden ist und der Stapel ebenfalls vorhanden ist, nehmen Sie die Aufgabenparameter heraus und rufen Sie zur Ausführung die Feuerfunktion auf. Wenn Speicher vorhanden ist, löschen Sie die Liste, andernfalls führen Sie die Rückrufausführung aus.

Schließlich gibt diese Datei Rückrufe zurück:

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;
  }
}

Die Hauptfunktion dieser Funktion besteht darin, zu handeln wie eine Liste Es gibt einen Push-Rückruf im Inneren. Stellen Sie zunächst fest, ob die Liste vorhanden ist, und fügen Sie intern eine Add-Methode hinzu, um einen Rückruf zur Liste hinzuzufügen ein Array, wird die Add-Methode erneut aufgerufen. Rufen Sie dann die Add-Methode auf und übergeben Sie die Argumente. Wenn der Rückruf ausgeführt wird, korrigieren Sie die Länge der Callback-Aufgabe „firelength“ auf die Länge der aktuellen Aufgabenliste, damit nachfolgend hinzugefügte Rückruffunktionen ausgeführt werden können. Wenn Speicher vorhanden ist, setzen Sie den Start auf die erste Position in der neu hinzugefügten Liste und rufen Sie dann Feuer auf.
Sehen wir uns an, wie fireWith funktioniert:

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;
}

Die übergebenen Parameter umfassen Kontext und Parameterliste. Die Bedingungen für die Funktionsausführung sind, dass die Liste vorhanden ist und der Rückruf nicht ausgeführt wird oder dass der Stapel vorhanden ist und der Stapel leer sein kann. Weisen Sie zunächst die Argumente neu zu. args[0] ist der Kontext und args[1] ist die kopierte Liste. Wenn der Rückruf ausgeführt wird, fügen Sie Argumente zum Stapel hinzu oder führen Sie einfach Argumente aus.

Verwandte Artikel:

Einführung in das Gesture-Modul im Zepto-Quellcode

Eine kurze Analyse der Callback-Methode in Javascript

Das obige ist der detaillierte Inhalt von[Javascript] Zepto-Quellcode-Rückrufanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!