检查是否包含jQuery

时间:2012-01-10 21:08:16

标签: javascript jquery widget

我正在制作一些小部件,这些小部件要么单独包含,要么作为一对包含在内,并且没有特别的顺序。我确保使用这个脚本加载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是否处于加载状态并保持到准备状态?

感谢您的回复。

1 个答案:

答案 0 :(得分: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函数。