Являются ли $ (document.body) и document.body одинаковыми?Уборка мусора и переплет в классе?- MooTools 1.3

Question

Я создаю класс MooTools, и у меня есть это в моей функции инициализации:

this.css = null;

window.addEvent('domready', function(){

    this.document = $(document);
    this.body = $(document.body);
    this.head = $(document.head);

}.bind(this));

Хорошо, а теперь к вопросам ... Должен ли я объявить this.css = null или любую другую пустую переменную в init:

this.css = null; // Maybe this.css = '' - empty string?

Следующая вещь касается окна и документа ... Должен ли я поместить его в $ () или нет, потому что он работает в обе стороны, поэтому я просто хочу знать, какой путь предпочтительнее? Итак, подведем итог:

window.addEvent() // or should I use $(window).addEvent()
this.document = $(document) // or this.document = document
this.body = $(document.body) // or this.body = document.body

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

Осталось еще две вещи ... Об привязке ... Можно ли каждый раз использовать .bind (this) или лучше использовать .bind (this.myDiv) и использовать его внутри функции, например: this.setStyle (...); вместо this.myDiv.setStyle (...)

(function(){
  this.setStyle('overflow-y', 'visible');
 }.bind(this.body)).delay(100);

или

(function(){
  this.body.setStyle('overflow-y', 'visible');
 }.bind(this)).delay(100);

И последнее, что касается сбора мусора ... Должен ли я собирать мусор сам и как это делать (насколько я знаю, MooTools делает это самостоятельно при выгрузке). Смущает то, что я нашел функцию в MT документах:

myElement.destroy();

Они говорят: опустошает Элемент всех своих детей, удаляет и одевает Элемент. Полезно для очистки памяти перед загрузкой страницы.

Так я должен мусор самостоятельно? Как это сделать? Когда использовать .destroy ()? Я работаю над огромным проектом и замечаю, что IE работает медленнее из-за многократного выполнения скрипта (так, как с этим справиться? Возможно, требуется некоторая очистка, утечки памяти?).

Answer 1

pff, это немного длиннее.

сначала, начальные переменные.this.css = null ... единственный раз, когда я установил бы «пустые» переменные: typecast;когда это свойство объекта, я могу ссылаться на него и не хотеть неопределенного;когда это строка, с которой я буду соединяться, или число, которое я буду увеличивать / уменьшать;в данный момент ноль не очень полезен.

обычной / хорошей практикой при написании класса mootools является использование класса Options в качестве миксина.это позволяет вам устанавливать объект параметров по умолчанию с настройками по умолчанию, которые могут быть переопределены при создании экземпляра.аналогично, Object.merge({ var: val}, useroptions); может переопределить значение по умолчанию, если оно предоставлено.

сейчас, iirc, бывают случаи, когда вам нужно использовать $(document.body), и это не потому, что document.body не работает, это потому, что применение$() также применяет прототипы Element в IE (поскольку прототип Element там не расширен, вместо этого методы применяются непосредственно к элементам, что происходит, когда вы их $).Кроме того, $ присваивает внутренний UID целевого элемента и позволяет использовать хранилище элемента для этого элемента.Я не вижу смысла в использовании $(document) или $(window) - они «расширены» настолько, насколько необходимо по умолчанию.В любом случае, даже в IE вам нужно всего лишь $(something) один раз и впоследствии можно использовать его как «что-то».посмотрите мой пример document.getElementById("foo").method() - вы можете просто запустить $("foo"); самостоятельно, а затем попробовать document.getElementById("foo").method() снова - он будет работать и в IE.

window.addEvent(); // is fine. 
document.body.adopt(new Element("div")); // not fine in IE.
new Element("div").inject(document.body); // fine.

и самостоятельно:

$(document.body).adopt(new Element("div")); // fine.
document.body.adopt(new Element("span")); // now fine, after first $.

см. Это в ie8: http://www.jsfiddle.net/AePzD/1/ - первая попытка установить фон не удалась, но вторая работает.впоследствии document.body.methods() звонки будут работать нормально.

http://www.jsfiddle.net/AePzD/2/ - это показывает, как элемент (который также возвращает $) может иметь методы в webkit / mozilla, а не в trident.однако замените его на $ ("foo"), и он начнет работать.эмпирическое правило: $ элементы, которые вы не создаете динамически до применения к ним методов.

сохранение селекторов может быть хорошей практикой производительности, наверняка.но он также может заполнить вашу цепочку областей видимости многими переменными, поэтому будьте осторожны.если вы будете использовать селектор два или более раз, хорошо бы его кэшировать.Неспособность сделать это - не драма, двигатели селектора, такие как sizzle и slick, настолько быстры в наши дни, что это не имеет значения (если вы не анимируете в то время, и это не влияет на ваш FPS).

как для переплета, как вам нравится.

имейте в виду, что у задержки есть второй аргумент, BIND:

(function(){
      this.setStyle('background', 'blue');
 }).delay(100, $("foo"));

, поэтому достаточно много функций.это конкретное связывание не очень полезно, но в классе вы можете захотеть сделать

(function(){
      this.element.setStyle('background', 'blue');
      this.someMethod();
 }).delay(100, this));

GC.MooTools делает свой собственный GC, конечно.однако, .destroy - это очень хорошая практика, imo.если вам что-то не нужно в DOM, используйте element.dispose ().если вы не будете снова подключать его к DOM, используйте .destroy () - удаляет все дочерние узлы и очищает.больше памяти \ o /

совет по IE ​​... хитроумно.вы можете использовать Drip, если вы можете отслеживать утечки памяти, есть такие вещи, как Dynatrace, которые могут быть очень хорошими в профилировании.с точки зрения практики ... убедитесь, что вы не используете встроенные js, вы всегда убираете то, что вам не нужно (события, элементы) и, как правило, будьте осторожны, особенно когда вы складываете события и работаете с ajaxПринесите новые элементы, которые требуют событий - рассмотрите делегирование событий вместо этого ...).использовать меньше узлов dom - также помогает ...