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缺少支持。