document.write 后备导致 jQuery 无序加载答案

【问题标题】：document.write fallback causing jQuery to load out of orderdocument.write 后备导致 jQuery 无序加载
【发布时间】：2012-09-01 15:12:05
【问题描述】：

我正在使用 HTML5 Boilerplate 4.0 构建一个新站点，但在使用其 jQuery 本地回退代码时遇到了问题。有问题的代码在这里：

<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

我目前正在本地开发，所以我已经注释掉了 CDN 行。我的问题是 jQuery 确实加载了，但它在 plugins.js 和 main.js 之后加载，导致未定义的错误。

我找到的最接近可能的解释是this previous answer 的#4 点，这表明这是意料之中的，但是...上面很容易成为 jQuery 最常用的本地后备代码，它是 H5BP ，这是经过严格审查的。我一定是错过了什么，是吗？

【问题讨论】：

标签： javascript jquery html5boilerplate

【解决方案1】：

我answered前段时间有一个类似的问题。

你可以这样做：

function loadScript(pathToScript, callback) {

    if (/jquery/.test(pathToScript) && window.jQuery) {
        //jQuery has already been loaded so simply call the callback
        callback.apply();

    } else {
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");

        script.type = "text/javascript";
        script.src = pathToScript + "?t=" + new Date().getTime(); //prevent caching

        if (callback) {
            script.onload = callback;
        }

        head.appendChild(script);
    }
}

var scripts = ['js/vendor/jquery-1.8.1.min.js', 'js/plugins.js', 'js/main.js'];

(function (i) {
    if (i < scripts.length) {
        var self = arguments.callee;

        loadResource(scripts[i], function () {
            self(++i);
        });
    }
})(0);

【讨论】：

【解决方案2】：

我也没有在 StackOverflow 上找到关于这个问题的准确答案，但是，这个页面似乎涵盖了这个主题：

总而言之 - 创建一个真正强大的故障转移解决方案并不简单。我们需要考虑浏览器不兼容、文档状态和事件、依赖关系、延迟加载和超时！值得庆幸的是，存在诸如 LABjs 之类的工具，通过让我们完全控制 JavaScript 文件的加载来帮助我们减轻痛苦。

http://happyworm.com/blog/2010/01/28/a-simple-and-robust-cdn-failover-for-jquery-14-in-one-line/

注意：解决方案依赖于使用 LABjs

【讨论】：

【解决方案3】：

您可以考虑使用yepnope 与回退并行加载您的脚本。

来自他们的网站：

yepnope.js 有能力做资源回退并且仍然与第一个并行下载依赖脚本。

还有代码：

yepnope([{
  load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin();
    });
  }
}]);

希望对你有所帮助！

【讨论】：