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)一次，并且可以继续使用它作为之后的'某事'。检查我的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中使用方法，而不是在三叉戟中。但是，用$（“foo”）替换它，它将开始工作。经验法则：在将方法应用于它们之前不动态创建的$元素。

存储选择器可以是良好的性能实践，当然。但它也可以用很多变量填充你的范围链，所以要小心。如果您将使用选择器两次或更多次，最好缓存它。没有这样做不是戏剧性的，像嘶嘶声和光滑的选择器引擎这么快就没那么重要了（除非你当时正在动画并且它会影响你的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的建议......狡猾。你可以使用滴水，如果你可以追踪内存泄漏，有像dynatrace这样的东西可以非常好的分析。在实践方面...确保你不使用内联js，你总是清理你不需要的东西（事件，元素），一般来说，小心，特别是当你堆积事件和处理ajax时（带来需要事件的新元素 - 考虑事件委托......）。使用更少的dom节点 - 也有帮助......

$（document.body）和document.body是一样的吗？在课堂上清理垃圾和装订？ - MooTools 1.3

1 个答案: