Question

我想开发一个处理使用过的框架的句柄javascript类。

例如：

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

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

是否有任何解决方案可以编写“修复”脚本，在dom开始加载之前，必须执行所有addFramework方法？

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);
};

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(...)包装器。

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);
}

Answer 4

JQuery document.ready函数基本上是这样做的：

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

它与外部库没有依赖关系，并且会在文档加载后运行您的Javascript。

您可能还想查看require.js

Answer 5

您可以在加载后使用此小型库来执行脚本： Yepnope javascript loader

您也可以通过ajax调用下载脚本。并且成功地将回调附加到文档并执行脚本的代码。但是这种方法已经在Yepnope库中使用过。

在dom加载之前执行javascript

5 个答案: