ホームページ > ウェブフロントエンド > jsチュートリアル > 【JavaScript】zeptoソースコード コールバック解析

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

php是最好的语言
リリース: 2018-08-06 15:21:18
オリジナル
1754 人が閲覧しました

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

1

2

3

4

5

Options:

  once: 是否最多执行一次,

  memory: 是否记住最近的上下文和参数

  stopOnFalse: 当某个回调函数返回false时中断执行

  unique: 相同得回调只被添加一次

ログイン後にコピー

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

1

2

3

4

5

6

7

8

9

10

11

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

ログイン後にコピー

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

1

2

3

a: hello,

a:中,

b:中

ログイン後にコピー

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

1

2

3

4

5

6

7

8

9

var callbacks = $.Callbacks({

  memory: true

});

callbacks.add(a);

callbacks.fire('hello');

callbacks.add(b);

输出:

a:hello,

b:hello

ログイン後にコピー

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

1

2

3

4

5

6

7

8

var callbacks = $.Callbacks({

  once: true

});

callbacks.add(a);

callbacks.fire('hello');

callbacks.fire('中');

输出:

a:hello

ログイン後にコピー

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

1

2

3

4

5

6

7

8

9

10

11

$.Callbacks = function(options) {

  options = $.extend({}, options)

  var memory,

    fired,

    firing,

    firingStart,

    firingLength,

    firingIndex,

    list = [],

    stack = !options.once && []

}

ログイン後にコピー

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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 関数を呼び出して実行します。メモリが存在する場合はリストをクリアし、そうでない場合はコールバックの実行が実行されます。最後に、このファイルはその具体的な実装を見てみましょう:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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 がどのように機能するかを見てみましょう:

1

2

3

4

5

6

7

8

9

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 サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート