1

大規模な JavaScript アプリケーションで多数の jQuery セレクターをキャッシュして繰り返し再利用するために使用できるパターンは何ですか?

単純な関数内の単純な変数に jQuery セレクターを格納することについては多くのことが言われていますが、JavaScript オブジェクト内で、たとえば一般的なモジュール パターンでは、どうすればそれらをきれいにセットアップして格納できるでしょうか?

私の最初の試みはグローバル変数を使用することでしたが、それは名前空間を汚し、競合を引き起こす可能性がありました. 私の 2 番目の試みでは、対応するオブジェクト内のオブジェクト リテラル内にセレクターを格納する必要がありましたが、これにより、必要以上に長い呼び出しが発生します。次に例を示します。

var Module = {

  nodes: {},

  storeSelectorsInCache: function() {
    Module.nodes = {
      form: $('#form'),
      grid: $('#grid')
    };
  },

  initialize: function() {
    Module.storeSelectorsInCache();

    // notice the long hierarchy to get to Module.nodes.form
    Module.nodes.form.submit(function() {
      // event handler
    });
  }

};

よりクリーンな省略形がどこかにあるはずです。

4

1 に答える 1

4

このようなものはクールかもしれません：

var _nodes = {};

var Module = {
  /**
   * You could call this when you want to query a selector and store it for reuse. Then 
   * just use this for querying.
   * 
   * @param {String} selector The selector to memoize.
   * @param forceUpdate {Boolean} jQuery selectors don't update with their DOM 
   *     counterparts. This will take that into account. Pass in true to override cache.
   *
   * @return {Object<Array<jQuery>>} The matching selectors.
   */
  $: function(selector, forceUpdate) {
    if (forceUpdate === true || !({}).hasOwnProperty.call(_nodes, selector)) {
      _nodes[selector] = jQuery(selector); // Not that robust, just a basic example
    }
    return _nodes[selector];
  },

  initialize: function() {
    this.$('#form').submit(function () { /* ... */ });
  }
};

これにより、ローカル スコープの関数を使用してセレクターをクエリするたびにModule.$、結果がノード オブジェクトにキャッシュされます (ここでは連想配列として利用されています)。ただし、ノード オブジェクトにそのセレクターの結果がなかった場合は、DOM にクエリを実行します。さらに、セレクターを強制的nodesに更新するためのパラメーターが追加されています。

あるいは、次のように lodash のmemoize関数を使用することもできます。

// inside your Module
$: _.memoize(jQuery);
于 2013-02-27T16:40:46.993 に答える