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忍者都可以告诉我为什么当我直接传递document.body时注入工作，但是当我尝试传递一个对document.body的引用时应该存在于类的容器选项中？我在document.body上尝试过各种变体，比如'document.body'和$$（'document.body'）和$$（document.body）。

Answer 1

我的猜测是，当您的类代码被解释时document.body不可用，这通常发生在您的脚本放在<head>标记中时。将脚本移动到文档的底部（就在</body>之前）解决了很多问题，这是很好的做法，因为您的脚本也不会阻止HTML呈现。

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

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

因此，如果this.options.container未设置（假），则默认为document.body，这样您也可以将脚本保存在<head>中，如果您愿意的话。

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

1 个答案: