JavaScriptコードでは、ブラウザ間の動作の違いにより、ブラウザの特性をチェックし、さまざまなブラウザーの互換性の問題を解決するために、関数に多数のIFステートメントを含めることがよくあります。たとえば、DOMノードにイベントを追加する最も一般的な関数:
コードコピーは次のとおりです。
関数addEvent(タイプ、要素、楽しい){
if(element.addeventlistener){
Element.AddeventListener(タイプ、楽しみ、偽);
}
else if(element.attachevent){
Element.Attachevent( 'on' +タイプ、楽しい);
}
それ以外{
要素['on' + type] = fun;
}
}
AddEvent関数が呼び出されるたびに、ブラウザでサポートされている機能を確認する必要があります。まず、AddEventListenerメソッドがサポートされているかどうかを確認します。サポートされていない場合は、AttachEventメソッドがサポートされているかどうかを確認してください。サポートされていない場合は、DOMレベル0メソッドを使用してイベントを追加します。このプロセスは、AddEvent関数が呼び出されるたびに実行する必要があります。実際、ブラウザがメソッドの1つをサポートしている場合、それは常にそれをサポートし、他のブランチを検出する必要はありません。言い換えれば、ステートメントを毎回実行する必要がなく、コードがより速く実行できる場合。
ソリューションは、Lazy Loadingと呼ばれる手法です。
いわゆる怠zyなロードは、関数の分岐が1回しか実行されないことを意味し、関数が呼び出されると、サポートされているブランチコードを直接入力します。怠zyなロードを実装するには、2つの方法があります。最初のことは、関数が初めて呼び出されると、関数自体が2次処理されることです。関数は、分岐条件を満たす関数として上書きされ、元の関数への呼び出しが実行されたブランチを通過する必要がなくなります。 Lazy Loadingを使用して、次の方法でAddEvent()を上書きできます。
コードコピーは次のとおりです。
関数addEvent(タイプ、要素、楽しい){
if(element.addeventlistener){
addevent = function(type、element、fun){
Element.AddeventListener(タイプ、楽しみ、偽);
}
}
else if(element.attachevent){
addevent = function(type、element、fun){
Element.Attachevent( 'on' +タイプ、楽しい);
}
}
それ以外{
addevent = function(type、element、fun){
要素['on' + type] = fun;
}
}
return addevent(タイプ、要素、楽しみ);
}
この怠zyなロードされたAddEvent()では、IFステートメントの各ブランチは、AddEvent変数に値を割り当て、元の関数を効果的に上書きします。最後のステップは、新しい割り当て関数を呼び出すことです。次にAddEvent()を呼び出すと、新しく割り当てられた関数が直接呼び出されるため、ステートメントを実行する必要がなくなります。
怠zyなロードを実装する2番目の方法は、関数を宣言するときに適切な関数を指定することです。これにより、関数が初めて呼ばれるときにパフォーマンスは失われず、コードがロードされたときにパフォーマンスが失われます。このアイデアに従って、addevent()の書き換えです。
コードコピーは次のとおりです。
var addevent =(function(){
if(document.addeventlistener){
return関数(タイプ、要素、楽しい){
Element.AddeventListener(タイプ、楽しみ、偽);
}
}
else if(document.attachevent){
return関数(タイプ、要素、楽しい){
Element.Attachevent( 'on' +タイプ、楽しい);
}
}
それ以外 {
return関数(タイプ、要素、楽しい){
要素['on' + type] = fun;
}
}
})();
この例で使用されるトリックは、匿名の自己実行関数を作成し、異なるブランチを使用して実装する機能を決定することです。実際のロジックは同じです。違いは、関数式が使用され(関数がVARによって定義されている)、匿名関数が追加されることです。さらに、各ブランチは正しい関数を返し、すぐに可変AddEventに割り当てます。
怠zyな読み込み関数の利点は、分岐が1回だけ実行された場合、実行されるたびにブランチと不必要なコードの場合に実行される関数を回避し、コードパフォーマンスを改善することです。どの方法がより適切であるかに関して、それはあなたのニーズに依存します。