jquery.Callbacksの詳細な実装-jsチュートリアル-php.cn

jquery.Callbacksの詳細な実装

高洛峰

リリース： 2016-12-03 13:25:52

オリジナル

1034 人が閲覧しました

前書き

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

機能紹介

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

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

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

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

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

には -Tato -callback 関数リストがあります実行する必要があります:

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

ログイン後にコピー

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

var callbackState = {}

ログイン後にコピー

Callback 関数に「memory Once」を渡しましたが、これら 2 つの状態をどのように記録するのでしょうか?次のように、jq で書かれた関数を使用して実装します。

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

ログイン後にコピー

上記のコードは、'memory Once' を {memory: true, Once: true} に変更します。このオブジェクトが状態キャッシュオブジェクトに存在する場合、それはそうでない場合は、最初に作成されてから返されます。

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

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

ログイン後にコピー

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

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

まず、jq と同様に、内部の add、fire、および has メソッドも定義しました。主な理由は、オブジェクトを返すメソッドに Once およびメモリ状態の制御が実装されるためです。メソッドは純粋な加算とトリガー関数です。

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

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

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

は次のコードです

add.apply(null,arguments)

ログイン後にコピー

ヒント: '先に公開に成功したが、コールバックリストが空の場合、プログラムは公開に失敗しませんが、成功したコールバック関数が追加されるまで待機します。コールバック関数が追加されると、次のコードを即座に実行します

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

ログイン後にコピー

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

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

addでメモリ状態コードと接続すると、以下のコードは起動時のメモリ状態での操作です

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

ログイン後にコピー

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

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