【JavaScript】zeptoソースコードコールバック解析-jsチュートリアル-php.cn

【JavaScript】zeptoソースコードコールバック解析

php是最好的语言

リリース： 2018-08-06 15:21:18

オリジナル

1650 人が閲覧しました

Callback モジュールはコールバック関数を管理するために使用され、遅延遅延オブジェクトの基本部分でもあります。次に、そのソースコードを見てみましょう。
オプションのパラメーター:

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

ログイン後にコピー

これはオプションのパラメーターです。以下でテストできます:

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

ログイン後にコピー

以下はその出力結果です:

a: hello,
a:中,
b:中

ログイン後にコピー

2 回目に起動すると、関数も次のようになります。実行されました。
実験用のパラメータを追加するときは、まずメモリを追加します

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

ログイン後にコピー

メモリパラメータを追加すると、コールバック関数が最後にトリガーされた時間が記録され、その後追加されたすべての関数はこのパラメータを使用してすぐに実行されます。 Once

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

ログイン後にコピー

の使い方を見ると、fireメソッドは2回実行されているにもかかわらず、結果は1回しか出力されていないことがわかります。他の 2 つのパラメーターは理解しやすいため、詳細を自分で試すことができます。

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

ログイン後にコピー

各パラメータの意味を見てみましょう。メモリは、コールバックがトリガされたかどうかを意味し、コールバックがトリガされることを意味します。タスクは位置を開始し、firingLength コールバックはタスクの長さ、firingIndex 内の現在のコールバックのインデックス、およびリストは実際のコールバックキューを表します。一度もトリガーされない場合は、タスクパラメータをキャッシュするために使用されます。トリガープロセス中には実行されません。

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

ログイン後にコピー

fire 関数は唯一の組み込み関数です。その機能は、リストのコールバック実行をトリガーすることです。まず、渡されるパラメーターを見てください。これは、$ と呼ばれる fire とは異なります。外部からのコールバック。ここでのデータは配列であり、data[0] はコンテキストを表し、data[1] はメソッド呼び出しのパラメーターです。次に、各パラメータの初期化が行われます。つまり、options.memory が true の場合はデータを保存し、fired は true、firingStart が 0 の場合は firingIndex が 0、firingStart が 0 に設定され、起動コールバックマークが起動されます。真実。
その後、コールバックリストを調べてコールバックを 1 つずつ実行します。この内部の if 判定は、コールバック関数が false を返し、options.stopOnFalse が false の場合、メモリキャッシュがクリアされることを意味します。走査が完了したら、実行ステータスを false に変更します。リストが存在し、スタックも存在する場合は、タスクのパラメーターを取り出し、fire 関数を呼び出して実行します。メモリが存在する場合はリストをクリアし、そうでない場合はコールバックの実行が実行されます。最後に、このファイルはその具体的な実装を見てみましょう:

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

ログイン後にコピー

この関数の主な機能は、リストにコールバックをプッシュすることです。まず、リストが存在するかどうかを確認します。存在する場合は、start にリストの長さが割り当てられ、渡したパラメーターがリストにコールバックを追加するために内部的に add メソッドが追加されます。配列の場合は、add メソッドが再度呼び出されます。次に、add メソッドを呼び出して引数を渡します。コールバックが進行中の場合は、後から追加されたコールバック関数を実行できるように、コールバックタスクの fireLength の長さを現在のタスクリストの長さに修正します。メモリが存在する場合は、新しく追加されたリストの最初の位置に開始を設定してから、fire を呼び出します。

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

ログイン後にコピー

渡されるパラメータにはコンテキストとパラメータリストが含まれます。関数の実行条件は、リストが存在し、コールバックが実行されないこと、またはスタックが存在し、スタックが空であってもよいことです。まず、args[0] がコンテキスト、args[1] がコピーされたリストを再割り当てします。コールバックが進行中の場合は、引数をスタックに追加するか、引数を実行します。

Zepto ソースコードの Gesture モジュールの紹介

JavaScript の Callback メソッドの簡単な分析

以上が【JavaScript】zeptoソースコードコールバック解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。