9

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

例如：

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

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

有什么解决方案可以让我编写一个“修复”脚本，在 dom 的其余部分开始加载之前addFramework必须执行我的所有方法？

4

5 回答 5

3

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);
};
于 2012-05-04T11:50:16.933 回答
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(...)包装器。

于 2012-04-26T09:49:08.113 回答
1

看起来你的类有一个 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);
}
于 2012-04-28T23:28:46.837 回答
0

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

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

它不依赖于外部库，并且会在文档加载后运行您的 Javascript。

您可能还想查看require.js

于 2012-04-26T09:23:17.057 回答
0

您可以使用这个小库在加载后执行脚本： Yepnope javascript loader

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

于 2012-04-26T09:24:57.610 回答