4

このコード スニペットは、要素が以前に選択されている場合はキャッシュから要素を返すか、要素を選択してキャッシュし、返します。これは、大幅に変更されることのない要素の内容を更新する場合に役立ちます (つまり、ユーザーに表示されるカウンターの親で、数値は変更されますが、親は変更されません)。コードは次のとおりです。

var $$ = (function() {
    var cache = {};
    return (function (selector) {
        return cache[selector] || ( cache[selector] = jQuery (selector) );
    });
})();

次のように使用できます。

$$('#id')

さて...これは一体どのように機能するのでしょうか? $$jQuery セレクターにアクセスするにはどうすればよいですか? $$から始めることとは何の関係$もありませんvar foo。$$に渡されたものをどのようにマップしますかselector。var selector = argumentNameの中に見えると思い$$ます。また、私には、引数を受け取るように設定されているようには見えません$$(例: function(input){} )。

この小さなコードは私にとって信じられないほど混乱を招くものであり、明確にしていただければ幸いです。ありがとう！

4

2 に答える 2

5

それはかなり簡単です。これは同等のコードですが、より明確にするためにアンパックされたバージョンです。

function generateCachingJQuery() {
    var cache = {};
    function queryFunc(selector) {
        if (cache[selector]) {
            return cache[selector];
        } 
        else {
            cache[selector] = jQuery(selector); //same as $(selector)
            return cache[selector];
        }
    }
    return queryFunc;
}
var $$ = generateCachingJQuery();

お気付きかもしれませんが、最初に無名関数 (generateCachingJQueryここで名前を付けました) があり、最終的には関数を返します$$。これは、内部関数 (ここで名前を付けたもの) だけが変数queryFuncにアクセスできるようにするためです。cache残りは、それが何をしているのかをより明確にするためにここで展開したワンライナーです。

編集：明確に$$するためにqueryFunc、 ではなく、上記のコードになりgenerateCachingJQueryます。queryFuncがselector変数として取られることに注意してください。

于 2013-09-01T02:21:34.520 に答える
3 
var $$ = (function() { // begin closure

  var cache = {}; // keep in memory through closure

  // The function that gets assigned to `$$`     
  return function(selector) {
    // If the element has already been queried (exists in the cache)
    // then return the element that was previously stored,
    // otherwise query the new element, add it to the cache and return it
    return cache[selector] || (cache[selector] = jQuery(selector));
  };
})(); // end closure
于 2013-09-01T02:25:17.400 に答える