6

複数のJavaScriptファイルがあり、それぞれに初期化するためのDOMContentLoadedハンドラーがあります。

そのような:

ファイルA

document.addEventListener('DOMContentLoaded', function(){
  console.log('init file A');
});

ファイルB

document.addEventListener('DOMContentLoaded', function(){
  console.log('init file B');
});

そして、これらのファイルを連結して縮小する必要があります。縮小されたファイルには、多数のDOMContentLoadedハンドラーがあります。

これらのDOMContentLoadedハンドラーを1つに統合する方がよいかどうか疑問に思っています。

私は以下のような統合の方法を思いついた。

いくつかの一般的なファイル

window.pageInitializer = {
  initPageFuncs: {},
  do: function(){
    for (var key in this.initPageFuncs) {
      this.initPageFuncs[key]();
    }
  }
}

document.addEventListener('DOMContentLoaded', window.pageInitializer.do);

ファイルA

(function(){
  var initPage = function(){
    console.log('init file A');
  };
  window.pageInitializer.initPageFuncs.fileA = initPage;
})();

ファイルB

(function(){
  var initPage = function(){
    console.log('init file B');
  };
  window.pageInitializer.initPageFuncs.fileB = initPage;
})();

どんな助けでもありがたいです、ありがとう。

4

1 に答える 1

8

私見では、パフォーマンスのためにそのようなラッパーを単純に作成する必要はありません。JavaScript 開発者が昔ながらのイベント モデルに対して持っている唯一の正当な不満は、イベント ハンドラーの管理です。

このことを考慮; イベントのリスナーを追加するたびDOMContentLoadedに、ブラウザ自体がwindow.pageInitializer.initPageFuncsオブジェクトと同義のリストを維持しています。イベントがトリガーされると、ブラウザー自体がすべてのイベント ハンドラーを呼び出します。パフォーマンスの観点からこれをやり直したり、DRY の原則に基づいてはっきりと言ったりしたくないでしょう。ただし、イベント ハンドラーを管理すると、開発者は上記のような構造を繰り返す必要があります。イベント ハンドラーを管理するとはどういう意味ですか? 読む。

特定のプログラム条件に基づいて、または特定のプログラム操作を実行した後に、イベントのすべてのイベント ハンドラーをクリアしたい場合はどうすればよいDOMContentLoadedでしょうか? 従来のアプローチでは、呼び出しdocument.removeEventListenerたすべてのインスタンスを呼び出す必要がありdocument.addEventListenerます。ただし、上記で作成した構造がある場合は、次の 1 行のコードだけですべてのリスナーをクリアできます。

window.pageInitializer.initPageFuncs = {};

すべてのリスナーがクリアされます。このようなことをすることが、JavaScript 開発者が jQuery に惹かれる主な理由の 1 つです。これを覚えて?

var selectedObject = $({selector});

// add event listeners to the selected object
selectedObject.bind("click", function1);
selectedObject.bind("click", function2);
selectedObject.bind("click", function3);

// remove event listeners for the "click" event for the selected object
selectedObject.unbind("click");

// remove all event listeners for the selected object
selectedObject.unbind();

あなたの質問に見られることから、これらのイベントを処理する必要はなく、したがってこれらのイベント バインディングを 1 つに結合する必要はないと想定しています。そうした場合、jQuery がやり過ぎだと思われる場合は、単純な方法でイベントを管理できます。

于 2012-12-20T10:04:10.693 に答える