dom加载后的Javascript调用方法

Question

目前，此对象中的id方法将发出未定义的警报，因为它在文档加载之前被调用。 我有一个方法来检查dom是否已加载，但是在如何加载dom时仍无法获取该方法来触发id方法。

我不能简单地在dom加载方法中添加对id方法的调用，因为它将用于其他不相关的任务。

function myHandler(sel) {
    function myObject(sel) {
        this.sel = sel;
        myObject.prototype.init = function () {
            this.ready();
        }
        myObject.prototype.id = function () {
            alert(document.getElementById(this.sel).id);
        }
        myObject.prototype.ready = function () {
            document.onreadystatechange = function () {
                var state = document.readyState
                if (state == 'interactive') {} else if (state == 'complete') {}
            }
        }
    }
    return newTask = new myObject(sel);
    newTask.init;
}
myHandler('element').id();

Answer 1

这是代码的重写版本：

var MyObject = function MyObject(selector) {
    this.selector = selector;

    this.init();
};

MyObject.prototype.alertId = function alertId() {
    alert(this.selector);
};

MyObject.prototype.init = function init() {
    var that = this;

    // are we there already?
    if (document.readyState == "interactive" ||
        document.readyState == "complete") {

        // yes, fire immediately
        this.alertId();
    } else {

        // no, wait until the DOM is parsed
        document.addEventListener("DOMContentLoaded", function(event) {
            that.alertId();
        });
    }
};

var my_object = new MyObject('foo');

让我们来看一下：

var MyObject = function MyObject(selector) {
    this.selector = selector;

    this.init();
};

这是MyObject对象的构造函数。 按照惯例，构造函数通常以Javascript大写，因此我将其重命名。

在构造函数中，我们通过调用new MyObject('selector string')您创建的MyObject每个副本所独有的所有属性。 在这种情况下，它只是我们作为参数获得的selector 。 之后，我们在新对象上调用init() 。

您创建的每个MyObject都不需要自己的init()和alertId() -每个副本的行为都相同。 因此，为了不浪费内存，我们在所有MyObjects共享的原型上创建它：

MyObject.prototype.alertId = function alertId() {
    alert(this.selector);
};

如果您可以将此脚本作为页面底部的最后一个元素（紧接在结束标记之前），则可以确定选择器已经可用。 但是更可靠的方法是检查：

MyObject.prototype.init = function init() {
    var that = this;

    // are we there already?
    if (document.readyState == "interactive" ||
        document.readyState == "complete") {

        // yes, fire immediately
        this.alertId();
    } else {

        // no, wait until the DOM is parsed
        document.addEventListener("DOMContentLoaded", function(event) {
            that.alertId();
        });
    }
};

如果我们的DOM已经可用，我们将立即执行alertId() 。 如果不是，我们通过注册DOMContentLoaded事件的回调来等到它。

请注意，我在回调中使用了that.alertId() ，而不是this.alertId() 。 这是因为在执行我们的回调函数的时候， this将是window背景下，不是我们当前MyObject对象。

为了解决这个问题，我将当前this指向对象的对象保存在变量that 。 由于Javascript具有闭包，因此在回调函数that仍然可用。

请注意，以上代码仅适用于现代浏览器。 如果需要与Internet Explorer 8及更早版本的兼容性，则需要使用ContentLoaded之类的方法来解决其对DOMContentLoaded缺少支持。