javascript - 异步加载 jQuery 时的 jQuery.noConflict()

Question

我正在编写一个需要 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 和 $ global变量。然后页面将继续在原始页面上加载 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) jQuery)？如果是这样，有哪些方法可以解决这个问题？谢谢!

Answer 1

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

我这么说的原因是 appendChild 会将您的标记放置在可能位于 head 的任何其他脚本(可能是 jQuery)的末尾。

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

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

这是一篇值得一读的帖子:

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