Question

我正在制作一些小部件，这些小部件要么单独包含，要么作为一对包含在内，并且没有特别的顺序。我确保使用这个脚本加载jQuery：

if (typeof jQuery == 'undefined') {
    //alert("about to load jquery");

    var esm_script_tag = document.createElement('script');
    esm_script_tag.setAttribute("type","text/javascript");
    esm_script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js")
    esm_script_tag.onload = main; // Run main() once jQuery has loaded

    esm_script_tag.onreadystatechange = function () { // Same thing but for IE
        if (this.readyState == 'complete' || this.readyState == 'loaded') main();
    }

    document.getElementsByTagName("head")[0].appendChild(es_script_tag);

}
else{

    main();
}

在一个脚本上，它会触发函数main()，另一个main2()。问题是，一旦第一个脚本运行，它就开始包含jQuery。当第二个运行时，jQuery尚未加载，但不会再次加载它以触发函数main2()。

有没有更好的方法来包含jQuery？有没有办法让我的小部件检查jQuery是否处于加载状态并保持到准备状态？

感谢您的回复。

Answer 1

当然，首先您应该考虑使用第三方库进行依赖关系管理。但是，当您希望将原始代码包含在每个窗口小部件中时，可能就是这种情况，因此它可以在没有任何其他预先获取的引用的情况下生存。

在jsfiddle上，我创建了一个你想要问的模拟：http://jsfiddle.net/ayezutov/dvvKE/16/

以下代码使用超时来模拟脚本加载延迟：

setTimeout(function() {
        document.getElementsByTagName("head")[0].appendChild(esm_script_tag);
    }, Math.floor(Math.random(500)));

在生产版本中，这应该确保写在您的代码中。

因此，经过一些重构后，加载代码被移动到一个函数：http://jsfiddle.net/ayezutov/dvvKE/20/。问题仍然存在，你可以注意到：

从脚本1加载jQuery：
  从脚本2加载jQuery：
  执行主脚本1：1.5.1
  执行主脚本2：1.5.2

下一步是创建一个自定义队列，该队列将在jQuery加载开始之后排队所有加载请求：

    if (!window.__jQueryLoadedQueue)
        window.__jQueryLoadedQueue = [loadCompleted];
    else
    {
      window.__jQueryLoadedQueue.push(loadCompleted);
    }

    var completeFunction = function(){
        for(var i = 0; i < window.__jQueryLoadedQueue.length; i++){
            window.__jQueryLoadedQueue[i]();
        }
        delete window.__jQueryLoadedQueue;
    }

正如您所见（http://jsfiddle.net/ayezutov/dvvKE/23/），现在脚本只开始加载一次，同时调用两个complete函数。

检查是否包含jQuery

1 个答案: