jQueryソースコードのコールバックの詳細な説明分析

コードの本質は、特に JavaScript におけるシーケンスと順序の概念を強調しています。結局のところ、JavaScript はシングルスレッドエンジンです。

JavaScript には関数型プログラミングの特性があり、JavaScript のシングルスレッドエンジンのため、関数は常に順序正しく実行される必要があります。優れたコードは、関数を独自のモジュールに分割し、特定の条件下で実行することがよくあります。これらの関数は順序立てて実行されるため、これらの関数の管理を支援する統合管理オブジェクト、つまりコールバック (コールバック関数) を作成してみてはいかがでしょうか。）が誕生しました。

コールバックとは

JavaScript には関数型プログラミングが豊富に含まれています。たとえば、最も単純な window.onload は関数を受け取りますが、必要な関数が複数ある場合、window.onload は 1 つの関数しか受け取ることができません。 onload で実行します。次に、次のコードを記述する必要があります:

コードをコピーしますコードは次のとおりです:

関数 a(elem) {

elem.innerHTML = '私は関数 a です。要素の HTML 構造を変更したい';

};

function b(elem) {

elem.innerHTML = '関数 b、要素のスタイルを変更したい';

}

window.onload = function () {

var elem = document.getElementById('test');

a(要素);

b(elem);

};

コールバック関数の本来の目的は、これらの関数を分散させるのではなく、これらの関数を統合した方法で構築することです。ご覧のとおり、window.onload の要素に対して 2 つのことを行います。まず HTML 構造を変更し、次に HTML のスタイルを変更します。 2 つの関数は Element に対しても動作し、これら 2 つの関数の最終的な実行は順番に実行されます。そこで、これらの関数を管理するために次のようなオブジェクトを作成してみませんか。もちろん、これはコールバック関数の最も基本的な意味にすぎません。このような単純なコールバック関数オブジェクトだけではなく、より強力なコールバック関数が必要です。これは単なる単純な使用例なので、このコールバック関数が関数を 1 つずつ実行する以外に何ができるかを説明します。

コールバックの本質は、関数の規則的な実行を制御することです。JavaScript はシングルスレッドエンジンです。つまり、同時に実行されるのは JavaScript 内の 1 つのコードだけです (Ajax と setTimeout も同様)。これら 2 つの関数は非同期であるように見えますが、そうではありません。ブラウザが JavaScript コードを実行すると、これらのコードは順番にキューにプッシュされます。Ajax を実行すると、ブラウザはコードキューにプッシュされます。ブラウザは、このシングルスレッドエンジンに対応した JavaScript コード (コールバック) を処理するときに、コードキューからコードを 1 つずつ取得します。

もちろん、私たちが必要とするのは、そのような単純なツールオブジェクトだけではありません。jQuery ソースコードでは、コールバックは一連の関数の基本的な管理を提供し、Deferred (非同期キュー) の基盤を提供し、Queue も提供します。 (同期キュー)。 Deferred は、ピラミッドプログラミング (リクエストの戻りコードに基づいて実行する必要がある Ajax のコードなど、多数の入れ子になったコールバック関数) をスムーズ/平坦化するために使用され、Queue は jQuery.animate (アニメーションエンジン) を駆動します。

それではコールバックを書きましょう。

コールバックモデル

配列:
コールバックは一連の関数を受け入れる必要があるため、コンテナーが必要です。配列を使用し、各関数を実行する必要がある場合は、配列の項目をループして実行できます。

作業モデル:

このコールバックは、関数をプッシュして実行するだけではなく、非常に強力である必要があります。優れた実行モデルが必要です。
Once: 現在の Callbacks オブジェクト内のすべての関数は 1 回だけ実行され、実行後に解放されます。Callbacks オブジェクトを使用するユーザーに、関数が 1 回だけ実行され、実行されないことを保証する安定した効果的なソリューションを提供できます。が再度実行され、これらの関数のスレッドが安定します。
auto: 自動実行モデルこれは興味深いモデルです。たとえば、関数 b の実行は関数 a に依存します。次に、このコールバックの最初の実行後に、次のような自動実行モデルを提供します。関数がコールバックに到達すると、過去に追加された関数が自動的に実行され、過去の関数に指定された最後のパラメータデータが渡されます。これにより、コールバックからこれらの依存関数間でトリガーを繰り返す必要がなくなります。興味深いモデルです。
Once&auto: これをより強力にして、once モデルと auto モデルを同時に操作できます。つまり、関数がコールバックに追加されるたびに、過去の関数が実行され、その後、これらの過去の関数が解放されます。次回も引き続き機能が追加されますその際、過去の機能は一度リリースされた機種なので実行できなくなります。

API:

add(function) - Callbacks オブジェクトに 1 つ (または複数) の関数を追加します。もちろん、関数を追加せず、単に Callbacks を見てみたいだけの場合は、引き続きお楽しみいただけます。 - 例外はスローしません。それは私たちが得意ではないためです。
Remove(function) - コールバック内の関数を削除します。関数を追加したので、それを後悔するための計画も提供する必要があります。私たちはとても親しみやすく、他の人が過去に行ったことすべてを容認します。
has(function) - コールバックに関数が含まれているかどうかを判断します。この機能を含めるかどうかはわかりませんが、最初から入れておきました。なぜそんなに不注意なのですか？しかし、あなたが私に尋ねたので、コールバックにこの機能が含まれているかどうかを教えてください。あなたはとても忙しく、すべてを覚えて判断することはできないと思います。
empty() - 空のコールバック: これらの関数はあなたにとって意味を失っていませんか?何？実行された後はもう要りませんか？それでクリアできたらいいのに？まあ、記憶のために、私はまだあなたの要求を容認します。
disable() - コールバックを無効にする: 他の人のコードとの安定した存在を維持するために、私は自己犠牲を選択しました - はい、このメソッドはコールバックを無効にし、まるで以前には存在していないかのように完全に無効にすることができます。
disabled() - コールバックが無効になっているかどうかを判断します。コールバックが本当に自己犠牲的であるかどうかまだ信じられない場合は、このメソッドを使用すると安心できます。
lock(boolean) - この Callbacks オブジェクトをロックします。不安定であることは心配ですが、オブジェクトをロックする必要があるかどうかを示すブール値パラメーターを受け取ります。もちろん、パラメータはありません。コールバックがロックされているかどうかを決定できます。
fire(data) - このコールバックで関数を実行します。現時点では、私たちが行うすべてのことは実行の運命のためではありませんか?パラメータは、実行する必要があるこれらの関数のパラメータになります。
fireWith(context,data) - コールバックで関数を実行し、コンテキストを指定します。 fire() では、すべての関数の Context が Callbacks オブジェクトであり、fireWidth() を使用すると、実行されるこれらの関数のコンテキストを再定義できます。Callbacks では、すべてを考慮してプログラミングが自由です。
fired() - この Callbacks が過去に実行されたかどうかを判断します。ほとんどの場合、ユーザーが過去に何をしたかわからないと考えられますが、この Callbacks オブジェクトを実行した場合は、ユーザーが行ったすべての操作が記録されます。過去にこのコールバックを実行したかどうかはわかっているため、それを否定することはできません。

基本モジュールの実装

簡単な実装:
まず単純にコールバックを実装しましょう:

コードをコピーコードは次のとおりです:

(関数 (ウィンドウ、未定義) {

var コールバック = function () {

//これらのプライベート変数をクロージャを通じて保護します

var list = [],//コールバック関数リスト

解雇; // 
 を実行しましたか
//クロージャ Callbakcs オブジェクトを返します

return {

add: function (fn) {

//コールバックが破棄されると、リストは未定義になります

If (リスト) {

//コールバック関数を追加します

list.push(fn);

// チェーン コールバックをサポート

}
これを返します。
},

fireWith: 関数 (コンテキスト、データ) {

//コールバック関数をトリガーし、コンテキストを指定します

If (リスト) {

解雇 = true;

for (var i = 0, len = list.length; i 
//Callbacks の関数が false を返した場合、それ以降の Callbacks
 の実行を停止します。
If (list[i].apply(context, data) === false)

休憩;

}
}
これを返します。
},

火: function () {

//コールバック関数をトリガー
// fireWith を呼び出してコンテキストを指定します

this.fireWith(this, argument);
 を返します。
},

空: function () {

//リストをクリア

（list）//このコールバックが破棄された場合、コールバックは引き続き使用できないはずです

リスト = [];

これを返します。
},

無効にする: function () {

//この Callbacks オブジェクトを破棄すると、後続のコールバック関数リストは実行されなくなります

リスト = 未定義;

これを返します。
},

disabled: function () {//このコールバックが無効になっているかどうかを検出します 

//ブール値に変換して返します 

!list を返します;

},

fired: function () {//このコールバックが実行されたかどうか 

}

};

};

//ウィンドウに登録

window.Callbacks = コールバック;

}(ウィンドウ));

次に、このコールバックをテストしてみましょう:

コードをコピーコードは次のとおりです:

var test = new Callbacks();

test.add(関数 (値) {

console.log('関数 1、値は: ' value);

});

test.add(関数 (値) {

console.log('関数 2、値は:' 値);

});

test.fire('これは関数 1 と関数 2 の値です');

console.log('関数が実行されたかどうかを確認してください:' test.fired());

test.disable();// このコールバックを破棄します

console.log('関数が放棄されているかどうかを確認してください:' test.disabled());

test.add(function () {

console.log('3 番目の関数を追加します。この関数は実行しないでください');

});

test.fire();

ブラウザコンソールを開くと、実行結果が正常であることがわかります。

1 回と自動 (メモリ) 実装

1 回:
Once は、このコールバック内の関数を 1 回実行し、その後は実行しないようにします。原理は非常に簡単です。上記のコードでは、関数リストを引き継ぐ変数リストがあることがわかります。そのため、過去に実行されたコードをクリアするだけで済みます。グローバル変数を使用して現在の実行モデルを保存します。それが 1 回限りのモデルの場合は、fireWith() のリストを無効にするだけです:

コードをコピーコードは次のとおりです:

(関数 (ウィンドウ、未定義) {
var コールバック = 関数 (1 回) {
//これらのプライベート変数をクロージャを通じて保護します
var list = [],//コールバック関数リスト
解雇; //
を実行しましたか //クロージャ Callbakcs オブジェクトを返します
return {
//...一部のコードを省略します
fireWith: 関数 (コンテキスト、データ) {
//コールバック関数をトリガーし、コンテキストを指定します
If (リスト) {
解雇 = true;
for (var i = 0, len = list.length; i //Callbacks の関数が false を返した場合、それ以降の Callbacks
の実行を停止します。 If (list[i].apply(context, data) === false)
休憩;
} } //once モデルが設定されている場合、グローバル変数 Once が true になり、リストがリセットされます
If (once) list = unknown;
これを返します。 }
//...一部のコードを省略します
};
};
//ウィンドウに登録
window.Callbacks = コールバック;
}(ウィンドウ));

自動:

自動 (メモリ) モデルは、jQuery のメモリにちなんで名付けられました。最初はこの名前に混乱しましたが、使い方を注意深く検討した後、機能を「最初の fire() の後に」に変更することにしました。後続の「add() 関数が自動的に実行される」は、次の状況で使用できます。一連の関数をコールバックに追加した後、一時的に関数を追加する必要があり、その後、新しく追加された関数をすぐに実行する必要があります。使いやすさを考えると、このパターンは少しわかりにくくなります。 add()時に自動モデルかどうかを判定する実装です。自動モデルの場合はこの関数を実行します。ただし、最初の fire() の後に自動的に実行する必要があります。さらに、各自動実行後に、最後に使用されたパラメータをこの自動実行関数に渡す必要があります。

おそらく次のコードを思い浮かべるでしょう:

コードをコピーコードは次のとおりです:

(関数 (ウィンドウ、未定義) {

var コールバック = 関数 (1 回、自動) {

var list = [],

解雇されました、

lastData;//最後の実行のパラメータを保存します

return {

add: function (fn) {

If (リスト) {

list.push(fn);

​​​​​​​​​​​​​
//使用された最後のパラメータが渡され、コンテキストはここで失われます

//ここでコンテキストが失われるのを防ぐために、最後に使用された Context
 を保存する変数を宣言する必要がある場合もあります。
If (自動) this.fire(lastData);

}
これを返します。
},

fireWith: 関数 (コンテキスト、データ) {

If (リスト) {

lastData = data;// — 最後に使用されたパラメータを記録します 

解雇 = true;

for (var i = 0, len = list.length; i 
If (list[i].apply(context, data) === false)

休憩;

}
}
If (1 回) list = [];

これを返します。
}

//コードの一部を省略しています

};
};

//ウィンドウに登録

window.Callbacks = コールバック;

}(ウィンドウ));

しかし、jQuery ではさらに素晴らしい使用法が採用されています。jQuery の作者はこの使用法を誇りに思っており、このモデルをメモリと名付けました。つまり、上記の変数 auto は現在の自動実行モードを表すだけでなく、パラメータの最後のコンテナとして、自動とメモリの両方を表します。 (次のコードは jQuery ではなく、ソースコードではなく jQuery コードのアイデアに基づいて記述されています):

コードをコピーコードは次のとおりです:

(関数 (ウィンドウ、未定義) {

var コールバック = function (auto) {

var list = [],

解雇されました、

記憶、//主役はここにいる、記憶だ

coreFire = 関数 (データ) {

//実際のトリガー関数メソッド

If (リスト) {

Memory = auto && data;//最後のパラメータを記録します。自動モードでない場合、このパラメータは記録されません。

// auto モードの場合、この auto は false ではなく、配列になります

解雇 = true;

for (var i = 0, len = list.length; i 
If (list[i].apply(data[0], data[1]) === false)

休憩;

}
}
};

return {

add: function (fn) {

If (リスト) {

//コールバック関数を追加します

list.push(fn);

//自動実行モード。auto モデル
 の場合に注意してください。
// メモリは coreFire() で割り当てられ、デフォルトは false

If (メモリ) coreFire(auto);

}
// チェーン コールバックをサポート

これを返します。},

fireWith: 関数 (コンテキスト、データ) {

If (1 回) list = [];

// ここで coreFire を呼び出し、パラメータを配列に変換します

coreFire([コンテキスト, データ]);

これを返します。
}

};

};

window.Callbacks = コールバック;

}(ウィンドウ));

以前の自動実装のコードでコンテキストが失われたことがわかりました。jQuery は fireWith() の初期段階でこのバグを修正しました。fireWith() のパラメータを修正しました。 jQuery は、fireWith() で関数を実行するロジックを抽出します。これを一時的に coreFire() と名付けます。元の fireWith() では、パラメーターが配列に結合されます。最初のパラメーターはコンテキストを表し、2 番目のパラメーターはコンテキストを表します。パラメータは渡されるパラメータを表します。次に coreFire() を実行します。

add() 中に、jQuery は変数 auto(memory) に値を代入しませんでしたが、coreFire() で auto(memory) に値を代入することを選択したため、最初の実行までは変数がオンにならないことが保証されます。 fire() が自動的に実行されます。

上で述べたように、coreFire() によって受け取られるパラメータは実際には配列であり、最初のパラメータはコンテキストであり、2 番目のパラメータは外部から渡されるパラメータです。同時に、この配列を auto (メモリ) に割り当てます。これにより、変数 auto の定義 (モードを自動的に実行するかどうか) がメモリ (最後に渡されたパラメータのメモリ) になります。

本当に一石二鳥の素晴らしいアイデアだと思います。自動で実行されるモデルなので auto と定義していますが、ちなみに最後の fire() のパラメータがメモリとして保存されているのは、ここでの作者の奇跡的な出来栄えのためかもしれません。

once&auto に関しては、これら 2 つのコードを組み合わせるだけです。auto モードの場合はリストを新しい配列にリセットし、それ以外の場合は直接未定義に設定することを coreFire() で決定するだけです。

ソースコード

このコードはjQueryに対応して私が手書きしたもので、jQueryのパブリック関数がいくつか書かれています。コードフラグメントではないので直接参照して実行することができます。

コードをコピーコードは次のとおりです:

(関数 (ウィンドウ、未定義) {
/*
* コールバック関数ツールオブジェクト。作業オブジェクトが完了すると配列がクリアされることに注意してください:
* * 共通の API セットを提供しますが、次の作業モデルがあります -
*Auto - 自動実行モデル: コールバック関数を追加するたびに、既存のコールバック関数セット内のすべてのコールバック関数が自動的に実行され、今回のパラメーターがすべてのコールバック関数に渡されます
*
*/

//ツール関数
var isIndexOf = Array.prototype.indexOf, //Es6
toString = Object.prototype.toString, //toString メソッドをキャッシュします
TosLice = Array.prototype.slice, // Slice メソッドをキャッシュします
return "object" === typeof document.getElementById ?
isFunction = 関数 (fn) {
// ie
での DOM と BOM の認識に問題があります。 {
をお試しください Return /^s*bfunctionb/.test("" fn);
} catch (x) {
false を返します
}
} :
isFunction = function (fn) { return toString.call(fn) === '[オブジェクト関数]' };
})()、
//最初のパラメータはループされる配列を表し、2 番目のパラメータはループを通じて毎回実行される関数です
If (arguments.length //スライスが無効なのはなぜですか? ?
var list = toSlice.call(arguments[0]),
fn = 引数[1],
アイテム;
while ((item = list.shift())) {//長さを直接決定しないため、高速化されます
// なぜここで call を使用し、Apply は問題ないのでしょうか?
// 完了 - apply の 2 番目のパラメータは配列オブジェクトでなければなりません (配列のようなことが可能かどうかの検証はなく、呼び出しにはこの要件がありません)
//apply は次のように記述されます。 argArray (2 番目のパラメーター) が有効な配列でない場合、または引数オブジェクトではない場合、TypeError が発生します。
fn.call(window, item);
}
}、
inArray = function () { //配列に項目が含まれているかどうかを検出し、項目のインデックスを返します
//プレコンパイル
return isIndexOf function (array, elem, i) {
If (配列)
return isIndexOf.call(array, elem, i);
return -1;
} : 関数 (elem, array, i) {
var len;
if (配列) {
                    len = 配列.長さ;
                    私＝私?私は＜ 0 ? Math.max(0, len i) : i : 0;
                    for (; i                         if (配列内の i && array[i] === elem) {
                            私を返します;
                        }
                    }
                }
                -1 を返す;
            }
        }();