目前,此对象中的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();

===============>>#1 票数:0

这是代码的重写版本:

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

  ask by Guesser translate from so

未解决问题?本站智能推荐:

1回复

加载DOM后的流星加载Javascript函数

我正在使用Bootstrap,其中有一个输入复选框,如下所示: 我正在使用Bootstrap Switch使用其功能将其转换为交换机: 但是,问题在于交换机仅加载一半的时间。 我认为这是因为在DOM中加载复选框之前就已调用了该函数。 我以为将它放入Meteor启动功能中可以解
3回复

所有javascript加载后如何输出DOM?

作为标题,我的问题是如何输出(假设在服务器计算机上保存为文本文件或使用ajax将结果传递给其他一些php函数)页面上的所有DOM内容? 我做了一些功课,我试过curl可以使用“curl http://google.ca > dom.txt”输出所有DOM内容但是,这种方法不会保存Ja
2回复

指令为ShareThis渲染DOM后调用Javascript

在Angular(1.3)应用程序中,我正在使用ng-repeat显示记录列表。 ng-repeat内部有一个带有模板的指令。 在模板中,我使用的是ShareThis控件,该控件在加载DOM之后被激活。 首次加载应用程序时,ShareThis Javascript可以正常工作并激活按钮
4回复

dom完成后调用JavaScript

我们使用外部系统在我们的网站上投放广告。 当前,在头文件中,我们有一些js,它使用jquery将数据插入到广告持有人中,该广告持有人是出现在每个页面上的div,即 我们的第三方广告系统刚刚开始使用Google Ad Server另一个系统来投放广告,因此现在给了我们一些JS来调用。
2回复

Javascript-加载外部Javascript后即可使用DOM?

当我的外部脚本完成加载后,DOM总是准备就绪吗? 在base.js内部,我有一个加载外部脚本的对象。 它使用以下方法进行操作: 现在,当所有外部脚本都已加载时,将调用回调函数。 我的问题是:此回调函数是否适合放置其余的JavaScript代码? 此代码需要DOM准备就绪。
1回复

dom完成加载durandal后调用函数

我有一个在onchange事件中调用的函数。 我正在从该函数中获取值,并将该值显示在视图中的其他位置。 这是我的代码 ViewModel代码 查看代码 我的函数被调用并且得到值,但是在显示时得到div = null,因为在dom完成加载之前调用了我的函数。 我知道在d
3回复

加载DOM和CSS但不加载图像后,如何触发javascript?

在加载DOM和CSS之后,我需要启动一些JavaScript,但不能启动图片。 我相信那是在document.ready之后,但在window.onload之前。 有人知道如何实现这一目标吗? 我本来是想通过document.styleSheets进行迭代在document.style
1回复

更新视图(DOM)后的调用方法(在Angular 2中)

假设我有以下指令: 我在模板中的某个地方使用它: ...<select my-select [(ngModel)]="someReference">... 在某些时候,我更改了组件中someReference的值: someReference = "newValue"
1回复

在没有JQuery的HTML正文加载后调用JavaScript脚本的最佳方法?

我有一个稍大的.js文件,当前在HTML页面的标题中调用该文件,但该文件无法执行,因为调用脚本时元素尚未加载。 实现此目的的最佳方法是什么? 我尝试添加 脚本,但这似乎不起作用。 在页脚或内联中调用脚本不是一种选择,JQuery也不是。
2回复

加载DOM后添加的项目上无法执行JavaScript模糊事件

我正在尝试将一个项目上的jQuery转换为本机JavaScript,部分目的是为了学习更多JS。 下面是一些我具有的代码,当“焦点”和“模糊”使它再次变小时,它会扩展文本区域。 它工作得很好,除了在加载DOM之后将一个textarea字段插入DOM之外之外,如何在不使用jQuery的