Modernizr/yepnope 执行顺序 WRT jQuery + 插件故障排除答案

【问题标题】：Modernizr/ yepnope execution order WRT jQuery + plugins troubleshootingModernizr/yepnope 执行顺序 WRT jQuery + 插件故障排除
【发布时间】：2012-02-04 20:26:09
【问题描述】：

我今天正在考虑加载 Modernizr polyfill，但遇到了一些麻烦。我喜欢并行加载 jQuery 的想法，因此将 CDN URI（带有本地后备）放在首位。然后我开始加载一些 polyfill，它们都是我在发现 Modernizr 之前使用的所有 jQuery 插件。

问题是，插件更小，并且在 jQuery 完成和执行之前加载，所以 '$' 和 'jQuery' 对象都未定义。 yepnope 文档说，尽管并行下载，加载程序应该尊重依赖脚本的执行顺序，但是按照字母的示例语法仍然会产生错误。

你们可以看看我下面的代码，看看我想要什么吗？这个 sn-p 直接位于 Modernizer 最小化代码之下；它位于我的<head>。仅供参考，在我的<body> 底部也加载了许多效果 jQuery 代码，但我希望 polyfill 在我为它们设置“完成：”功能之前工作。

    Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if (!window.jQuery)
            Modernizr.load('js/jquery.1.7.1.min.js');

    }
  },
  {//Border Radius
    test : Modernizr.borderradius,
    nope : 'js/polyfills/jquery.curvycorners.js'
  },
  {//Text Shadow
    test: Modernizr.textshadow,
    nope: 'js/polyfills/jquery.textshadow.min.js',
    complete: function(){
        $(function(){
            $("h2").textShadow(); 
            $("h3").textShadow();
            $("a.facebook").textShadow();
            $("a.twitter").textShadow();
        });
    }
  },
  {//Box Shadow
    test: Modernizr.boxshadow,
    nope: 'js/polyfills/jquery.boxshadow.js'
  }
]);

【问题讨论】：

窥视 yepnope 文档：" -yepnope.js 具有执行资源回退的能力，并且仍然与第一个并行下载依赖脚本。更清楚的是：yepnope([{ load: 'http:// ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'，完成：function () { if (!window.jQuery) { yepnope('local/jquery.min.js'); } } }, { 加载：'jquery.plugin.js'，完成：function () { jQuery(function () { jQuery('div').plugin(); }); } }]);

标签： jquery jquery-plugins modernizr dynamic-script-loading

【解决方案1】：

经过大量研究和实验，看起来这是 yepnope 在概念层面的问题。由于 jQuery 的加载时间线，插件总是会在它准备好之前去寻找它。虽然 jQuery 测试的完整函数中的嵌套 load() 是破解它的一种方法，但您会看到用户将在相当长的时间内看到没有 polyfill 的页面。虽然这对于表单验证来说可能没问题，但当您像我在这个示例中那样填充 border-radius 和 text-shadow 时，它看起来就像 FOUC 一样糟糕。

我找到的最佳解决方案是通过 HTML5 样板方法加载 jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>

然后在$(document).ready(); 中放置一个Modernizr.load()。虽然这抵消了 Modernizr 的大部分并行加载优化优势，但它保持了 yepnope 渐进增强原则，让您可以使用 Modernizr 进行 HTML5 填充（恕我直言），并确保 jQuery 绝对可用于 polyfill。一个结果是您可以安全地在完整功能中使用$() 选择，这很方便。

【讨论】：

您在序列中的哪一点包括 Modernizr？我发现如果我分别链接到 jQuery 和 Modernizr，它会严重破坏我在 Safari 中的 HTML5 布局（这并不复杂）。但是如果我用 Modernizr.load 加载 jQuery，我的页面脚本就不起作用（包括 $(window).load）。哦，我正在使用自定义 Modernizr 来包含 yepnope.js。
在拉了一个小时的头发后，我最终效仿了。您对 jQuery 的加载时间线的解释与我希望在这个夜晚的这个时间一样多地理解这个混乱。令我沮丧的是，它在 yepnope 的网站上显示了这个确切的用例，这意味着它正在为某人（不是我）工作。
仅供参考，当我从事这项工作时，我与 Paul Irish 就此事进行了交流。他基本上说，虽然他可以在文档中看到如何以这种方式表示行为，但 Modernizr 无法做到这一点，因为它只是一个加载器：它无法对脚本进行排队，因为它不会在脚本执行完成时收到通知无法设置链式测试以查看它何时被动完成。不要太过头，专注于线性加载顺序而不是尝试并行“矩阵”脚本。
更新：看起来我只是领先于游戏；) Modernizr 已更新以解决此问题...github.com/Modernizr/Modernizr#new-asynchronous-event-listeners