如何创建jQuery元素缓存机制？答案

【问题标题】：How to create a jQuery element cache mechanism?如何创建jQuery元素缓存机制？
【发布时间】：2011-03-29 13:31:42
【问题描述】：

我想我写了一个简单的 DOM 缓存机制来提高效率，避免多次$('blah') 调用，例如：

if ($('foo').length) {
    $('foo').bar();
}

所以我在我的项目主对象下创建了一个DomCache 子对象：

MyLib.DomCache = {};

当我需要一个元素的 jQuery 对象时，我会查看 DomCache，如果找到了我会使用它，否则我会创建它，然后将其放入 DomCache 对象中。我认为这将是一个很好的语法：

MyLib.DomCache.foo = MyLib.DomCache.foo || $('foo');
if (MyLib.DomCache.foo.length)
    MyLib.DomCache.foo.bar();

但现在我认为.get() getter 方法可能效果更好：

MyLib.DomCache.get('foo').bar();

只是我无法实现！我不知道如何实现这样的方法！

// THIS IS THE QUESTION!
MyLib.DomCache.get = function(element){
    // TODO: If the passed `element` has been cached previously,
    // return it. If not, cache it in the MyLib.DomCache object and then return it.
};

任何帮助/想法？
为什么这么多对象？老实说，这个项目相当大，所以我认为我必须将所有内容包装在一个父对象中以便更好地访问！

【问题讨论】：

你以为你写了一个简单的 DOM 缓存机制？？
是复杂的还是荒谬的？我认为对于大型 js 项目来说这是必要的，因为我不知道我之前是否创建了那个 $foo 变量。

标签： javascript jquery oop dom caching

【解决方案1】：

您可以使用现有的解决方案，或将其用作灵感。例如，http://plugins.jquery.com/project/jCacher。

【讨论】：

【解决方案2】：

MyLib.DomCache = {
    pool: new Array(),
};

MyLib.DomCache.get = function(selector){
    if(this.pool[selector]){
        console.log('Existing element returns!'); // debug
        return this.pool[selector];
    }else{
        console.log('Element has been created & returned!'); // debug
        return this.pool[selector] = $(selector);
    }
};

// Test
if(MyLib.DomCache.get('#foo').length){
    MyLib.DomCache.get('#foo').bar();
}

我知道你在担心什么，它让我想起了Singleton Pattern。

【讨论】：

【解决方案3】：

嗯，这对我来说似乎是不必要的复杂。如果您担心额外的 DOM 查找，为什么不这样做呢？

var $foo = $("foo");
if ($foo.length) {
    $foo.bar();
}

【讨论】：

它是复杂的还是荒谬的？我认为对于大型 js 项目来说这是必要的，因为我不知道我之前是否创建了那个 $foo 变量。