解释:jQuery缓存代码

时间:2013-09-01 02:18:43

标签: javascript jquery caching

如果先前已选择了元素,则snippet of code将从缓存中返回一个元素,或者选择,缓存并返回该元素。它对于更新从未显着改变的元素的内容是有用的(即,用户看到的计数器的父级,其中数字改变但父级没有)。代码如下:

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

您可以像这样使用它:

$$('#id')


现在......这有什么用呢? $$如何访问jQuery选择器?它与从$$开始的$无关,您也可以var foo$$如何将传递给它的内容映射到selector。我希望在var selector = argumentName内看到$$。另外,对我而言,$$似乎没有设置接收参数(例如,函数(输入){}),但它很容易呢?

这段小代码让我感到非常困惑,并且会非常感激一些清晰度。谢谢!

2 个答案:

答案 0 :(得分: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。请注意,queryFuncselector作为变量。

答案 1 :(得分: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