Mootools 类 - 在类属性中存储对文档正文的引用

Question

大家好！我正在尝试学习 Mootools 课程。我创建了这个类来向页面添加一个 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 注入到的容器，文档主体是默认的。当我像上面那样做时，代码验证正常，但脚本无法添加 div - Firebug 和 Chrome 抱怨容器为 null 或未定义。

我必须将 dDiv.inject(this.options.container); 更改为此

if (!this.container) {
    dDiv.inject(document.body);
} else {
    dDiv.inject(this.container);
}

才能使其工作。

任何明智的 Mootools ninja 都可以告诉我为什么当我直接传递 document.body 时注入有效，但当我尝试传递对据称存储在类容器选项中的 document.body 的引用时注入会中断？我尝试过 document.body 的变体，例如 'document.body' 和 $$('document.body') 和 $$(document.body)。

Answer 1

我的猜测是，当您的类代码被解释时， document.body 不可用，这通常在您的脚本放置在 标记中时发生。将脚本移动到文档底部（就在 之前）可以解决很多问题，并且是一种很好的做法，因为您的脚本也不会再阻止 HTML 渲染。

最好避免在类中放置静态默认 DOM 引用，因为它们的可用性总是值得怀疑的。您可以将 options.container 保留为 null 并将方法更改为：

... code ...
dDiv.inject( this.options.container || document.body );
... code ...

因此，如果 this.options.container 未设置（假），它将默认为 document.body，这样，如果您确实愿意，也可以将脚本保留在 中。