在 DOM 加载之前执行 JavaScript

Question

我希望开发一个处理已使用框架的JavaScript类，以及其他功能。

例如：

myClass.addFramework('jQuery'); // just an example

它可以正常工作，我的类添加了框架 - 但是如果其中有任何jQuery代码，它将无法工作，因为框架在dom准备好后加载，所以默认的jQuery代码片段如jQuery(document).ready(function(){});无法工作，因为'jQuery'尚未定义。

是否有任何解决方案可以编写一个“修复程序”，在其余的dom开始加载之前，必须执行所有我的addFramework方法？

- TJR

---

或许可以修复一下，使得 JavaScript 在我的方法被执行之前被忽略。 - TJR

如果你的代码使用了jQuery，你只需要确保在你的代码之前加载了jQuery（在较早的SCRIPT元素中加载）。这与DOM-ready事件无关。 - Šime Vidas

Answer 1

在创建 script 标签时，您应该使用 onload 事件。可以这样使用:

myClass.addFramework('jQuery', function () {
    // do stuff after jquery loaded.
});

你可以这样实现它：

myClass.addFramework = function (name, onload) {
    var _script = document.createElement('script');
    _script.onload = function () {
        onload();
    }
    _script.onreadystatechange = function () {
        if (this.readyState == 'complete') onload();
    }
    _script.src = myClass.FRAMEWORK_BASE + '/' + name + '.js';
    document.getElementsByTagName('head')[0].appendChild(_script);
};

- fka

Answer 2

如何使用自定义事件？可以这样做：

var CustomEvent = function() {
    this.eventName = arguments[0];
    var eventAction = null;
    this.subscribe = function(fn) {
        eventAction = fn; // you can customize this to hold array of handlers
    }; 
    this.fire = function(sender, eventArgs) {
        if (eventAction != null) {
            eventAction(sender, eventArgs);
        } else {
            alert('No ' + mEventName + ' handler!');
        }
    };
};

现在你可以定义类似这样的内容：

var myEvent = new CustomEvent("Framework Loaded");
myEvent.subscribe(function(sender, eventArgs) {
    alert('Framework loaded! Hurray!');
    // jQuery goes here
});

加载了框架，例如jQuery之后，只需执行以下操作：

myEvent.fire(null, { framework: 'jQuery' });

你应该将代码放在XHR处理程序的适当位置。

另外，如果你让它在DOM加载后触发，那么你就可以忘记jQuery的$(document).ready(...)包装器了。

- freakish

Answer 3

看起来你的类有一个 jQuery 依赖项，理想情况下你不应该有这个依赖项。

尽管如此，如果你正在寻找一种简单的动态加载 jQuery 的方法，也许这会有所帮助：

function onReady(){
    // My Custom Ready state. lets go wild here.
}

if (typeof jQuery === undefined || jQuery.fn.jquery !== '1.7.2') {

    var jScript = document.createElement('script');
    jScript.setAttribute("type", "text/javascript");
    jScript.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")

    //Run onReady() once jQuery and document have loaded
    jScript.onload = function () { //Add on load Event delegate
        //JQuery is Loaded!! so you can do whatever you want with it to deligate.
        $(document).ready(onReady)
    }; 
    jScript.onreadystatechange = function () { //Same thing but for IE
        if (this.readyState == 'complete' || this.readyState == 'loaded')(function () {
            //JQuery is Loaded!! so you can do whatever you want with it to deligate.
            $(document).ready(onReady)
        });
    } 

    // Append Script to the Head
    document.getElementsByTagName("head")[0].appendChild(script_tag);

} else {
    // JQuery Exists so lets just use it
    $(document).ready(onReady);
}

- GGG

Answer 4

JQuery document.ready函数基本上做了这个：

window.onload = function ()
{
Javascript code goes here
}

这个程序没有依赖于外部库，会在文档加载完成后运行你的Javascript代码。

你也可以看看require.js

- reach4thelasers

---

我知道 - 但我想实现我可以在任何项目中使用我的js类。只有一个文件，处理所有框架和其他东西 - 但除此之外，我想以默认方式编写我的jQuery - 但是这样做，我必须意识到整个javascript将被忽略，直到我的类完成库。 - TJR

Answer 5

你可以使用这个小库在加载后执行脚本： Yepnope javascript loader 此外，你也可以通过ajax调用下载脚本。在成功回调中将其附加到文档中并执行脚本代码。但是这种方法已经在Yepnope库中使用了。

- Denis Ermolin