javascript - $(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)......每次都使用 .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

噗，有点长

首先，初始变量。 this.css = null...我唯一一次设置“空”变量是:typecast;当它是一个对象的属性时，我可能会引用并且不希望未定义；当它是一个字符串时，我将与之连接，或者是一个数字，我将增加/减少； null 在这一点上并不是很有用。

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

现在，iirc，有时您必须使用 $(document.body) 这不是因为 document.body 不起作用，而是因为应用 $() 还在 IE 中应用 Element 原型(prototype)(因为 Element 原型(prototype)没有在那里扩展，这些方法直接应用于元素，当你 $ 它们时会发生这种情况)。此外，$ 分配目标元素的内部 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)，随你喜欢。

记住延迟有第二个参数，BIND:

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

所以做了不少功能。这个特定的绑定(bind)不是很有用，但在类里面，你可能想做

(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时(带来需要事件的新元素——考虑事件委托(delegate)……)。使用更少的 dom 节点 - 也有助于...