Detaillierte Implementierung von jquery.Callbacks

Vorwort

jQuery.Callbacks wurde nach Version 1.7 aus dem _Deferred-Objekt extrahiert und wird hauptsächlich zum Hinzufügen, Entfernen, Auslösen und Sperren der Funktionswarteschlange usw. verwendet Operationen und bietet vier Optionen einmal, Speicher, eindeutig und stopOnFalse für eine spezielle Steuerung.

Funktionseinführung

Das Rückrufmodul von jq bietet hauptsächlich Dienste für andere Module. Es ist wie eine sanfte kleine Frau, die still im Hintergrund bezahlt. Deferred ist wie ein Riese, der in jq so prominent ist, aber intern wird er von Callbacks bedient.

Mehrere Zustände von Rückrufen:

einmalig – Die Rückruffunktion wird nur einmal ausgeführt

eindeutig – Die Funktion kann nicht wiederholt zur Rückrufliste hinzugefügt werden

Speicher – Zustandsspeicher, der hauptsächlich in Deferred verwendet wird

stopOnFalse – Wenn die Rückgabe „false“ auftritt, beenden Sie die Rückrufliste und setzen Sie die Ausführung fort

Ich habe es implementiert Ich selbst Mehrere einfache Methoden von Rückrufen

hinzufügen – Fügen Sie eine Funktion zur entsprechenden Rückruffunktionsliste hinzu

Feuer – Lösen Sie den Rückruf aus, und die Rückruffunktionsliste führt die Funktionen nacheinander aus

hat - Ob es eine eingehende Funktion in der Rückruffunktionsliste gibt

klar - Löschen Sie die Rückruffunktionsliste

Gesamtstruktur

Um das gewünschte Rückrufmodul zu erhalten, müssen wir zunächst Folgendes tun:

cb = Callback('memory once') // 得到一个拥有记忆功能并只执行一次的回调模块

Da wir basierend auf einem bestimmten Status unterschiedliche Instanzen abrufen müssen, können wir feststellen, dass wir ein Objekt zum Speichern benötigen der Zustand

var callbackState = {}

Wir haben „memory Once“ an die Callback-Funktion übergeben. Wie zeichnen wir diese beiden Zustände auf? Hier implementieren wir es mit einer Funktion, die in Nachahmung von jq geschrieben wurde:

var createCallbackState = function (options) {  
var states = options.split(' ')  
var obj = {}  
for (var i = 0; i < states.length; i++) {   
obj[states[i]] = true }  
return obj  
}

Der obige Code ändert „Speicher einmal“ in {Speicher: wahr, einmal: wahr} Wenn sich dieses Objekt im Status-Cache-Objekt befindet, geben Sie es direkt zurück. Wenn nicht, erstellen Sie es zuerst und geben Sie es dann zurück.

Als nächstes folgt der gesamte Code der Callback-Funktion.

var Callback = function (options) {    
var state = callbackState[options] //获取状态模式  
if (!state) {   
callbackState[options] = state = createCallbackState(options)  
}  
var list = [], // 回调函数列表   
memory,  // 存储是否为 记忆状态   
has = function (fn) {   
for (var i = 0; i < list.length; i++) {    
if (list[i] === fn) {    
return true   
}   
}   
return false  
},  
add = function () {   
var i = 0,    
args = arguments,   
len = args.length   
for (; i < len; i++) {    
if (state.unique && has(args[i])) { // 如果是unique状态下并回调列表已经拥有该函数，则不添加    
continue   
}    
list.push(args[i])  
 }   
 },   
 fire = function (context, args) {   
 var i = 0,    
 len = list.length,    
 item   
 for (; i < len; i++) {    
 item = list[i]    
 if (item.apply(context,args) === false && state.stopOnFalse) { //如果函数运行返回false，并且是stopOnFalse状态，终止循环    
 break;
 }   
 }   
  }    
  return {   
  add: function () {   
  add.apply(null,arguments)   // 如果memory模式并且已经拥有了memory信息，接着出发函数  
  if (state.memory && memory) {    
  fire(memory[0], memory[1])    
  list = []   
  }   
  },  
  fire: function (context, args) {   // 如果memory模式，并且list是空，代表触发在添加前，保存memory信息   
  if (state.memory && !list.length) {    
  memory = [context, args]    
  return  
  }   
  fire(context,args)  
  if (state.once) {    
  this.clear()   
  }   
  },   
  has: function (fn) {   
  return has(fn)   
  },   
  clear: function () {   
  list = []   
  } 
   }   
    }

Nachdem die Callback-Funktion ausgeführt wurde, gibt sie ein Objekt zurück, das dann mehrere einfache Funktionen enthält.

Lassen Sie mich die Implementierung dieses Teils vorstellen.

Zuerst habe ich, wie jq, auch die internen Add-, Fire- und Die has-Methode ist hauptsächlich auf logische Anforderungen zurückzuführen. Die Methode zum Zurückgeben des Objekts verwendet die Funktion Once und den Speicherstatus. Die internen Add- und Fire-Methoden sind reine Additions- und Auslösefunktionen.

Schauen wir uns zunächst die cb.add-Methode an. Die Add-Methode kann mehrere Funktionen empfangen, daher

add.apply(null,arguments)

verwendet die interne Add-Methode Funktion hinzufügen

Der nächste Teil der Funktion besteht darin, festzustellen, ob sich das Rückrufmodul im Speicherstatus befindet. Schüler, die das verzögerte Modul verstehen, sollten wissen, dass sich dieses Modul im Promise-Modus befindet und die Rückruffunktion für den Erfolg abonniert oder Fehlerstatus, und dann einen bestimmten Zeitpunkt aufrufen, bezieht sich dieser Modus auf den Rückruf im Speicherstatus. Es gibt eine seltsame Sache an diesem Modus. Wenn Sie zuerst erfolgreich veröffentlichen, ist die Rückrufliste jedoch leer. Dann scheitert das Programm nicht an der Veröffentlichung, sondern wartet auf die erfolgreiche Rückruffunktion. Sobald die Rückruffunktion hinzugefügt wurde, wird sie sofort ausgeführt.

ist der folgende Code

// 如果memory模式并且已经拥有了memory信息，立刻触发函数  
if (state.memory && memory) {  
fire(memory[0], memory[1])  
list = []  
}

Tipps: „Wenn Sie zuerst erfolgreich veröffentlichen, die Rückrufliste jedoch leer ist, schlägt das Programm nicht mit der Veröffentlichung fehl, sondern wartet darauf, dass die Rückruffunktion erfolgreich hinzugefügt wird. Sobald die Rückruffunktion hinzugefügt wurde, führen Sie sie sofort aus.“ Das Verständnis des folgenden Codes ist

var cb = Callback('memory') // 得到记忆功能的回调模块   
cb.fire() // 触发回调队列   
cb.add(fn) //添加回调函数，自动执行了！   
function fn () {  
console.log('fn')  
}

Wenn er sich in einem Nicht-Speicherzustand befindet, ist der obige Code ungültig. Zur Ausführung muss es erneut ausgelöst werden.

Nach dem oben Gesagten ist die Feuerfunktion leicht zu verstehen und kann zwei Parameter empfangen: den Funktionskontext und das Funktionsparameterarray.

Verkettet mit dem Speicherstatuscode in add ist der folgende Code die Operation im Speicherstatus während des Feuers

// 如果memory模式，并且list是空，代表触发在添加前，保存memory信息   
if (state.memory && !list.length) {    
memory = [context, args]    
return  
}

Wenn er sich im Speicherstatus befindet und die Rückrufliste leer ist, Speichern Sie den Funktionsausführungskontext und das Parameterarray und führen Sie ihn sofort aus, wenn Sie auf das Hinzufügen warten.

Darüber hinaus ist der Code sehr einfach und leicht zu verstehen. Die Callback-Funktion ist eine sehr einfache Funktion.

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder bei der Arbeit helfen kann,