$(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));

好的，现在回答问题...... 我应该在 init 中声明 this.css = null 或任何其他空变量吗：

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 查询，这样可以吗？或者每次都调用 $(selector) / $$(selector) 会更好吗？

还剩下两件事...关于绑定...每次都使用 .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();

他们说：清空一个元素的所有子元素，删除并垃圾化该元素。对于在 pageUnload 之前清除内存很有用。

那我就得自己去扔垃圾吗？怎么做呢？何时使用.destroy()？我正在开发一个大型项目，我注意到 IE 在多次执行脚本时变得很慢（那么如何处理这个问题？可能需要一些清理，内存泄漏？）。

Answer 1

pff，这个有点长。

首先，初始变量。 this.css = null...我设置“空”变量的唯一一次是：类型转换；当它是一个对象的属性时，我可以引用并且不希望未定义；当它是一个字符串时，我将连接它或一个数字，我将增加/减少； null 在这一点上并没有真正的用处。

编写 mootools 类时的常见/良好实践是使用 Options 类作为 mixin。这允许您使用可以在实例化时覆盖的默认设置来设置默认选项对象。类似地，Object.merge({ var: val}, useroptions); 可以覆盖默认值（如果提供）。

现在，iirc，有时您必须使用 $(document.body) ，这不是因为 document.body 不起作用，而是因为应用 $() > 也在 IE 中应用 Element 原型（因为 Element 原型没有在那里扩展，所以这些方法直接应用于元素，这在您 $ 它们时发生）。此外，$ 分配目标元素的内部 UID，并允许为该元素使用元素存储。我认为没有必要使用 $(document) 或 $(window) - 默认情况下它们会根据需要进行“扩展”。无论如何，即使在 IE 中，您也只需 $(something) 一次，之后就可以继续将其用作“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 是一个非常好的做法。如果您不需要 DOM 中的某些内容，请使用 element.dispose()。如果您不会再次将其附加到 DOM，请使用 .destroy() - 删除所有子节点并进行清理。更多内存 \o/

关于 IE 的建议...狡猾。如果可以的话，您可以使用 drip 来跟踪内存泄漏，像 dynatrace 这样的东西可以很好地进行分析。在实践方面......确保你不使用内联js，你总是清理你不需要的东西（事件，元素），并且通常要小心，特别是当你堆积事件和处理ajax时（带来需要事件的新元素 - 考虑事件委托......）。使用更少的 dom 节点 - 也有帮助...