JavaScript/MooTools. Лучше сохранять элемент в свойстве объекта, чем каждый раз обращаться к нему с помощью $('elem')?

С точки зрения скорости/эффективности памяти, имеет ли смысл сохранять элемент (полученный через $) в переменную в объекте или использовать $ для доступа к нему каждый раз?

Выполняется ли доступ к свойствам объекта (особенно если он вложен в несколько уровней — объект внутри объекта) быстрее, чем с использованием $?


javascript performance mootools
person Andy Rey    schedule 27.07.2010    source источник

Ответы (1)


arrow_upward
5
arrow_downward

кэширование селекторов, которые часто используются, всегда является хорошей идеей. пространство имен за объектом с несколькими уровнями глубины создает более длинную, чем необходимо, глобальную цепочку областей видимости, imo. Я склонен кэшировать селекторы в простых замыканиях или с помощью хранилища элементов mootools.

например, если у вас есть ссылка в div, которая находит родителя, затем находит 2 элемента вниз и первый img, и вы можете видеть, как пользователь щелкает ее несколько раз, вы можете сделать что-то вроде этого:

document.id("somelink").addEvent("click", function() {
    var targetImg = this.retrieve("targetImg") || this.store("targetImg", this.getParent().getNext().getNext().getElement("img.close"));
    targetImg.fade(.5);
...
});

при первом щелчке он будет искать целевой img и сохранять его в хранилище ссылки с ключом targetImg, любые последующие щелчки будут использовать сохраненную ссылку. хранилище mootools, которое создается во время расширения элемента и присвоения uid. это просто простой объект за закрытием, поэтому он не находится в проприетарном свойстве элемента, который замедлит доступ в IE и т. д., и его нет ни в одном окне. имущество.

когда вы рассматриваете философию кодирования mootools в целом, то есть код с классом, есть несколько вещей, которые являются (не)написанными лучшими практиками при написании класса/плагина mootools.

если он относится к одному элементу, то установить this.element = document.id(element); - сохранить ссылку. если это массив, то аналогичным образом вы делаете кэширование this.elements = document.getElements(this.options.selector);

поэтому всегда сохраняйте ссылку на главный селектор.

person Dimitar Christoff    schedule 27.07.2010
comment
Спасибо за ответ. Таким образом, сам MooTools не использует никакого кэширования с помощью $? - person Andy Rey; 27.07.2010
comment
не то, что я знаю - и это хорошо. представьте, что вы ссылаетесь на $(foo), который становится указателем на объект. затем вы используете манипуляции с ajax или dom, чтобы уничтожить элемент или воссоздать его, переписав родительский html - вы не хотели бы, чтобы ссылка на $(foo) возвращала старый элемент (и связанный с ним uid, события и т. д.) . поиск через селектор обычно очень быстрый, поэтому нет смысла всегда сохранять его в переменной, но вы заметите разницу в анимациях, которые происходят несколько или 10 раз в секунду. if called more than once, cache - person Dimitar Christoff; 27.07.2010