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('中');
|
ログイン後にコピー
以下はその出力結果です:
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 === ' function ') {
if (!options.unique || !Callbacks.has(arg)) list.push(arg);
} else if (arg && arg.length && typeof arg !== 'string') 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 サイトの他の関連記事を参照してください。