解释:jQuery缓存代码

Explain: jQuery Caching Code

本文关键字：代码 缓存 jQuery 解释      更新时间：2023-09-26

如果之前已经选择了某个元素，则此代码片段将从缓存中返回该元素，或者选择、缓存并返回该元素。它对于更新从未发生过显著变化的元素的内容（即，用户看到的计数器的父级，其中数字发生了变化，但父级没有）非常有用。代码如下：

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

你可以这样使用：

$$('#id')

现在。。。这到底是怎么回事？$$如何访问jQuery选择器？它与$$无关，从$开始，你也可以做var foo。$$如何将传递到它的内容映射到selector。我希望在$$里面看到var selector = argumentName。此外，在我看来，$$似乎没有被设置为接收参数（例如，函数（输入）｛｝），但它很容易接收？

这段小代码让我非常困惑，如果能澄清一下，我将不胜感激。谢谢

这很简单。以下是等效的代码，但在未打包的版本中，使其更加明确：

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作为一个变量。

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
相关文章：