大家好!我正在尝试学习 Mootools 类(class)。我创建了这个类来向页面添加一个 div。
var F = new Class({
Implements: [Options, Events],
options: {
container: document.body,
width: '250px',
background: '#ccc'
},
initialize: function(options) {
this.setOptions(options);
this.addDemoDiv();
},
addDemoDiv: function() {
var dDiv = new Element('div', {
'class': 'myClass',
html: 'Click me!',
styles: {
padding: '20px',
border: '1px solid #999',
width: this.options.width,
background: this.options.background
},
events: {
click: this.animate
}
});
dDiv.inject(this.options.container);
},
animate: function() {
alert('Hello world');
}
});
window.addEvent('domready', function() {
var item = new F();
});
它应该允许用户指定将 div 注入(inject)到的容器，文档正文是默认的。当我像上面那样做时，代码验证正常，但脚本无法添加 div - Firebug 和 Chrome 提示容器为空或未定义。
我必须将dDiv.inject(this.options.container);更改为此
if (!this.container) {
dDiv.inject(document.body);
} else {
dDiv.inject(this.container);
}
让它发挥作用。
任何明智的 Mootools ninja 都可以告诉我为什么当我直接传递 document.body 时注入(inject)有效，但当我尝试传递对据称存储在类容器选项中的 document.body 的引用时注入(inject)会中断？我尝试过 document.body 的变体，例如“document.body”、$$('document.body') 和 $$(document.body)。
最佳答案
我的猜测是document.body当您的类代码被解释时不可用，这通常发生在您的脚本放置在 <head> 中时。标签。将脚本移动到文档底部(就在 </body> 之前)可以解决很多问题，并且是一种很好的做法，因为您的脚本也不会再阻止 HTML 渲染。
最好避免在类中放置静态默认 DOM 引用，因为它们的可用性总是值得怀疑的。您可以保留options.container null 并将您的方法更改为:
... code ...
dDiv.inject( this.options.container || document.body );
... code ...
所以如果 this.options.container未设置(假)，它将默认为 document.body ，这样您还可以将脚本保存在 <head> 中如果你真的想的话。
关于javascript - Mootools 类 - 在类属性中存储对文档正文的引用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5476853/