関数の遅延読み込みを使用して JavaScript コードの実行効率を向上させる_JavaScript のヒント

JavaScript コードでは、ブラウザー間の動作の違いにより、ブラウザーの特性をチェックし、さまざまなブラウザーとの互換性の問題を解決するために、関数に多数の if ステートメントを組み込むことがよくあります。 たとえば、dom ノードにイベントを追加するための最も一般的な関数:

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

function addEvent (type, element, fun) {
if (element.addEventListener) {
element.addEventListener(type, fun, false);
else if(element); .attachEvent) {
element.attachEvent('on' タイプ, fun);
else{
element['on' type] = fun; 🎜>

addEvent 関数が呼び出されるたびに、ブラウザーがサポートしている機能がチェックされます。サポートされていない場合は、attachEvent メソッドがサポートされているかどうかがチェックされます。がまだサポートされていない場合は、dom レベル 0 メソッドを使用してイベントを追加します。 このプロセスは、addEvent 関数が呼び出されるたびに実行する必要があります。実際、ブラウザーがいずれかのメソッドをサポートしている場合は、常にそのメソッドをサポートしており、他のブランチを検出する必要はありません。つまり、if ステートメントはそれを検出します。毎回実行する必要がなく、コードをより速く実行できます。

解決策は、遅延読み込みと呼ばれる手法です。

いわゆる遅延読み込みとは、関数の if 分岐が 1 回だけ実行され、後で関数が呼び出されたときに、サポートされている分岐コードに直接入力されることを意味します。 遅延ロードを実装するには 2 つの方法があります。1 つは、関数が初めて呼び出されたときに、関数自体が分岐条件を満たす関数として上書きされ、元の関数は必要ありません。実行ブランチを渡した後、次の方法で遅延読み込みを使用して addEvent() を書き換えることができます。




コードをコピー

コードは次のとおりです。 function addEvent (type, element, fun) { if (element.addEventListener) { addEvent = function (type, element, fun) {

element.addEventListener(type, fun, false)

}
}
else if( element.attachEvent){
addEvent = function (type, element, fun) {
element.attachEvent('on' type, fun);
}
else{
addEvent = function (type, element, fun) {
element['on' type] = fun;
}
}
return addEvent(type, element, fun); >}


この遅延ロードされた addEvent() では、if ステートメントの各ブランチが addEvent 変数に値を割り当て、元の関数を効果的に上書きします。 最後のステップは、新しい割り当て関数を呼び出すことです。次回 addEvent() を呼び出すと、新しく割り当てられた関数が直接呼び出されるため、if ステートメントを実行する必要はありません。

遅延読み込みを実装する 2 番目の方法は、関数の宣言時に適切な関数を指定することです。 この方法では、関数が初めて呼び出されるときにパフォーマンスが低下することはありませんが、コードがロードされるときはパフォーマンスがわずかに低下するだけです。 以下は、この考え方に従って addEvent() を書き直したものです。

コードをコピー


コードは次のとおりです。

var addEvent = (function () { if (document.addEventListener) { return 関数 (type, element, fun) { element.addEventListener(type, fun, false) }

}

else if ( document.attachEvent ) {
return 関数 (type, element, fun) {
element.attachEvent('on' type, fun)
}
}
else {
return function (type , element, fun) {
element['on' type] = fun
}
}
})();


で使用されるヒントこの例では、匿名の自己実行関数を作成し、異なる分岐を使用してどの関数を使用するかを決定します。違いは、関数式の使用 (関数の定義に var を使用) と匿名関数の追加です。 function.function を実行すると、各ブランチは正しい関数を返し、それを変数 addEvent にすぐに割り当てます。

遅延ロード関数の利点は、if 分岐を 1 回だけ実行することで、関数が実行されるたびに if 分岐と不要なコードが実行されることがなくなり、コードのパフォーマンスが向上することです。ニーズに応じて適切です。