JavaScript関数の遅延ローディング関数サンプルコードの詳細説明

遅延読み込み機能

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

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

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

解決策は遅延読み込みです。いわゆる遅延ロードとは、関数実行の分岐が 1 回だけ発生することを意味します。遅延ロードを実装するには 2 つの方法があります [1]。1 つは、関数が呼び出されたときに関数を処理する方法です。関数が初めて呼び出されるとき、その関数は適切な方法で実行される別の関数によって上書きされるため、元の関数への呼び出しは実行のブランチを経由する必要がありません

lazy を使用できます次の方法でロードします。 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】2つ目は、関数宣言時に適切な関数を指定する方法です。 このように、関数を初めて呼び出すときはパフォーマンスが失われませんが、コードがロードされるときに少しパフォーマンスが失われます。以下は、この考え方に従って addEvent() を書き直したものです。次のコードは、どの関数実装を使用するかを決定するためにさまざまな関数を分岐する匿名の自己実行関数を作成します

var addEvent = (function () {
  if (document.addEventListener) {
    return function (type, element, fun) {
      element.addEventListener(type, fun, false);
    }
  }
  else if (document.attachEvent) {
    return function (type, element, fun) {
      element.attachEvent('on' + type, fun);
    }
  }
  else {
    return function (type, element, fun) {
      element['on' + type] = fun;
    }
  }
})();

以上がJavaScript関数の遅延ローディング関数サンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。