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

Question

今天我正在研究 Modernizr polyfill 的加载，但遇到了一些麻烦。我喜欢并行加载 jQuery 的想法，因此将 CDN URI（带有本地回退）放在顶部。然后我开始加载一些 polyfill，这些都是我在发现 Modernizr 之前使用的 jQuery 插件。

问题是，插件较小，并且在 jQuery 完成和执行之前加载，因此“$”和“jQuery”对象最终都未定义。 yepnope 文档说，尽管并行下载，加载程序应该尊重依赖脚本的执行顺序，但严格遵循示例语法仍然会产生错误。

你们都可以看一下我下面的代码，看看我想要什么吗？该代码片段直接位于 Modernizer 最小化代码下方；它位于我的 中。仅供参考，有大量的效果 jQuery 代码也会在我的 底部加载，但我希望在设置 'complete:' 函数之前，polyfills 能够工作。他们。

    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'
  }
]);

Answer 1

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

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