Как создать механизм кэширования элементов jQuery?

Question

Мне кажется, я написал простой механизм кеширования DOM, чтобы сделать его более эффективным, избегая нескольких вызовов $('blah'), например ::1002

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() метод получения может работать лучше:

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.
};

Любая помощь / идея?
Почему так много объектов? Честно говоря, проект довольно БОЛЬШОЙ, и поэтому я думаю, что мне нужно обернуть все в родительский объект для лучшего полированного доступа!

Answer 1

Вы можете использовать существующее решение или использовать его как источник вдохновения. Например, http://plugins.jquery.com/project/jCacher.

Answer 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 .

Answer 3

Хм, это кажется мне излишне сложным.Если вы беспокоитесь о дополнительном поиске DOM, почему бы не что-то подобное?

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