如何指定 yepnope.js 放置加载脚本的位置？答案

【问题标题】：How can I specify where yepnope.js places a loaded script?如何指定 yepnope.js 放置加载脚本的位置？
【发布时间】：2013-02-06 21:38:03
【问题描述】：

我有点 JS 菜鸟。

这是一个粗略的例子，但它说明了我的问题。 yepnope 运行良好，但它在堆栈顶部添加了 yep 脚本 (jquery.selectBoxIt.min.js)。问题是如果将加载的脚本放在它在 JQuery 库之前加载的堆栈的顶部。问题是它依赖于 jQuery 才能运行。我查看了 yepnope 文档，但没有看到任何提及它的内容。

这是我的代码（在我的文档底部：

<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script src="js/jquery.infieldlabel.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load([
    {
    // Let's check something simple
    test : Modernizr.borderradius,
    // this should then satisfy the yep and load this script
    yep : ['js/jquery.selectBoxIt.min.js']
    }
]);
</script>
</body>

【问题讨论】：

你为什么不把那个javascript文件添加到脚本文件中呢？
@Shawn31313 如果我们不使用它，为什么“我们”需要加载额外的信息？如果浏览器不支持borderradius，就不会加载更多的东西...
Shawn 你的意思是把它们都结合起来吗？我通常会，但这是一个相当复杂的多步骤应用程序，完成后我将把它交给其他人，所以我想让下一个人在这一点上轻松。
是的。我只会在它自己的<script> 标记中添加 js/jquery.selectBoxIt.min.js。但是哦，好吧。
@balexandre 完全正确。此外，borderradius 仅用于测试。我最终可能会测试 .no-touch 以测试移动设备。这是我的最终目标。

标签： javascript jquery yepnope

【解决方案1】：

只需将上述静态 JS 代码添加到函数中并放入 $(document).ready() - 这将确保在调用脚本时加载 jquery。如果这不可行，请尝试使用 javascript 加载 jquery 并在回调中放置静态 JS。参考Load jQuery dynamically

【讨论】：

【解决方案2】：

我本人对 Modernizr/yepnope 还很陌生，但从 the yepnode docs 开始，我相信关键是使用 yepnope（或 Modernizr，它们是同一件事）以正确的顺序加载您需要的脚本，并且yepnope 将确保它们按照您指定的顺序执行。

所以我相信你需要的是这样的：

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

Modernizr.load([
    {
        // Load jQuery first
        load : ['js/jquery.js', 
                // ... and your other JS files
               ]
    },
    {
        // Let's check something simple
        test : Modernizr.borderradius,
        // this should then satisfy the yep and load this script
        yep : ['js/jquery.selectBoxIt.min.js']
    }
]);

</script>

还可以查看那些 yepnode 文档以了解他们尝试从 CDN 加载 jquery 并在加载失败时回退到本地副本的示例 - 这让我更清楚。

【讨论】：

【解决方案3】：

在没有 jquery 的情况下做到这一点：

function init(){
  Modernizr.load([
  {
  test : Modernizr.borderradius,
  yep : ['js/jquery.selectBoxIt.min.js']
  }
  ]);
}
document.addEventListener('DOMContentLoaded', init, false)

【讨论】：

柏拉图对此表示感谢。不幸的是，它仍在加载 selectBoxIt 脚本作为第一个脚本。
当 DOMContentLoaded 事件触发时，jQuery（以及您放置在 HTML 中的所有其他脚本）肯定已经加载。我会仔细检查你的脚本，以确保你没有覆盖 $ 或其他东西。