jquery.Callbacksの詳細な実装

前書き

jQuery.Callbacks は、バージョン 1.7 以降に jquery に追加されました。これは、主に、関数キューの追加、削除、起動、ロックなどの操作を実行するために使用され、特別な制御のための、memory、unique、stopOnFalse の 4 つのオプション。

機能紹介

jq の Callbacks モジュールは、主に他のモジュールにサービスを提供し、裏で黙ってお金を払う優しい女性のようなものです。 Deferred は巨人のような存在で、JQ 内では非常に目立っていますが、内部的には Callbacks によって仕えられています。

コールバックのいくつかの状態:

コールバック関数は 1 回のみ実行されますOnFalse -- return false が発生したときにコールバックリストを終了し、実行を継続します

私が自分で実装したいくつかの簡単なコールバックメソッド

を使用してout から off の off to ‐ ‐ ‐‐‐‐‐ コールバック、コールバック関数をトリガーします リストは関数を順番に実行します

特定の状態に基づいて異なるインスタンスを取得する必要があるため、次のようにします。状態を保存するためにオブジェクトが必要であると判断できます

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

コールバック関数に「memory Once」を渡しましたが、これら 2 つの状態をどのように記録するのでしょうか? さて、ここでは、次のように jq で書かれた関数として実装されています。

var callbackState = {}

上記のコードは、「memory Once」を {memory: true, Once: true} に変更します。 、状態キャッシュ オブジェクトにこのオブジェクトがある場合は直接返し、ない場合は最初に作成してから返します。

次は Callback 関数のコード全体です

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

Callback 関数が実行されるとオブジェクトが返され、そのオブジェクトにはいくつかの単純な関数が含まれています。

この部分の実装を紹介します。

まず、jq と同様に、内部の add、fire、 has メソッドは、主に論理的な必要性によるもので、内部の add メソッドと fire メソッドは純粋に関数を追加してトリガーするものです。

まず cb.add メソッドを見てみましょう。add メソッドは複数の関数を受け取ることができるので、

内部 add を使用して関数を追加します

関数の次の部分は、コールバックかどうかを決定することです。モジュールはメモリ ステータスであり、Deferred モジュールを理解している学生は、このモジュールが Promise モードであり、成功または失敗ステータスのコールバック関数をサブスクライブし、特定の瞬間にそれをトリガーすることを知っているはずです。このモードには奇妙な点があり、最初にパブリッシュが成功してもコールバック リストが空の場合、プログラムはパブリッシュに失敗しませんが、コールバック関数が追加されると、成功したコールバック関数が追加されるまで待機します。それはすぐに実行されます。

は次のコードです

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 = []   
  } 
   }   
    }

ヒント: 「最初に公開に成功しても、コールバック リストが空の場合、プログラムは公開に失敗しませんが、成功したコールバック関数が追加されるまで待機します。コールバック関数が追加されたら、すぐに実行します。」 以下のコードを理解してください

add.apply(null,arguments)

非メモリ状態の場合、上記のコードは無効です。実行するには再度起動する必要があります。

上記の後、fire 関数は関数コンテキストと関数パラメータ配列の 2 つのパラメータを受け取ることができることが簡単に理解できます。

追加でメモリ状態コードと接続すると、次のコードは起動中のメモリ状態での操作です

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

メモリ状態でコールバックリストが空の場合は、関数実行コンテキストとパラメータ配列を保存し、を追加したらすぐに実行してください。

上記に加えて、コードは非常にシンプルで理解しやすいです。 非常に単純な関数です。理解するのが難しいのはメモリのステータスだけです。

まとめ

以上がこの記事の内容です

この記事の内容が皆様の勉強や仕事に少しでもお役に立てれば幸いです