jQuery.noConflict() 异步加载 jQuery答案

【问题标题】：jQuery.noConflict() while loading jQuery asynchronouslyjQuery.noConflict() 异步加载 jQuery
【发布时间】：2014-09-06 08:17:34
【问题描述】：

我正在编写一个需要 jQuery 1.7 或更高版本的 Javascript 库。但是，我的库的用户可能会在他们的网站上加载他们自己的 jQuery 版本，这是我们无法控制的。现在，我正在使用库中的回调异步加载 jQuery，并使用 jQuery 的 noConflict(true) 方法来处理版本冲突。

到目前为止，我还没有遇到任何问题，但是与异步行为和并发相关的问题是随机的并且很难测试。我对Javascript中异步函数的细节不是很熟悉，所以我想解释一下。假设我有以下代码：

用户网站上的代码：

// loading javascript library
<script type="text/javascript" src="library.js">

// loading jQuery version lower than 1.7.0
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js">

库中用于异步加载 jQuery 的代码：

// set jQuery and $ to $j using noConflict()
loadScript("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function() {
          $j = jQuery.noConflict(true);
      });

function loadScript(url, callback){
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    script.onreadystatechange = callback;
    script.onload = callback;

    head.appendChild(script);
}

据我了解，用户页面将首先加载我的库代码，该代码将开始异步加载 jQuery 1.11.1 并使用jQuery.noConflict(true) 重命名 jQuery 和 $ 全局变量。然后该页面将继续在原始页面上加载 jQuery 1.2.3。所以 jQuery 和 $ 应该引用 1.2.3，而 $j 将引用 1.11.1。

但是，由于 jQuery 的异步加载或浏览器中的多线程，$j 是否有可能指向 1.2.3 而不是 1.11.1？例如，加载 jQuery 1.2.3 的行是否可以在 $j = jQuery.noConflict(true) 之前执行，以便 $j 现在指向 jQuery 1.2.3（jQuery 的当前版本）？如果是这样，有什么方法可以解决这个问题？谢谢！

【问题讨论】：

标签： javascript jquery asynchronous callback

【解决方案1】：

在这种情况下，我认为您最好使用 document.write 并确保告知用户将您的代码放在头部。

我这么说的原因是appendChild 会将您的标签放在任何其他可能在 head 中的脚本的末尾，这可能是 jQuery。

我还建议提出一个比 $j 更独特的变量，这在 noConflict 情况下并不少见。

另外，我会在再次添加之前检查 jQuery 是否已经存在并且是与您的代码兼容的版本。您可以使用jQuery.fn.jquery 检查版本。如果它已经存在，您可以将其克隆到您的 noConflict 变量中。

这是一篇阅读量很大的帖子：

Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail

【讨论】：