1

我正在整合一项服务，该服务提供一些跟踪/分析风格的功能，并且计划将其提供给任何用户以包含在他们的网站上，他们可以简单地粘贴对外部 javascript 文件的引用。JavaScript 代码目前依赖于 JQuery，因为以这种方式编写代码更快、更容易、更健壮，但是我现在不确定如何最好地在用户站点上包含此参考 - 一些使用该服务的站点可能有 JQuery，有些可能没有，那些可能会有不同的版本。这里有最佳实践吗？我提出的选项：

  1. 在外部 JS 文件中包含带有自定义 JQuery 别名的缩小 JQuery（可能只有我需要的功能的自定义构建）
  2. 从外部 JS 文件加载 Jquery（再次使用自定义 JQuery 别名）
  3. 使用条件加载器（例如yepnopejs）确保安装了 JQuery
  4. 记录安装 JQuery 的要求并将其留给用户以确保它存在且兼容版本

我对 3 的担忧是 JQuery 的未来版本可能不兼容（尽管这不太可能，因为它只是使用的核心功能）。我也想避免 4，因为用户可能不是那么技术，任何问题都可能使他们完全无法使用此服务

我错过了进一步的解决方案吗？

4

2 回答 2

2

您可以使用一个肮脏的技巧 - jQuery 对名为 define 的函数有一个 jsonp 回调，因此它可以与 AMD 一起正常工作。您可以将定义回调用作 jsonp 回调来运行依赖于 jQuery 的代码：

<html>
<head>
<title>Maybe jQuery</title>
</head>
<body>
<div id=status>jQuery loading...</div>

<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script>
function jQueryReady() {
    // Place your on-jQuery-load statements here
    $('#status').text('jQuery loaded.');
}
if (!window.jQuery) {
    define = jQueryReady;
    define.amd = { jQuery: true };

    var script = document.createElement('script');
    script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
    script.async = true;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
} else {
    jQueryReady();
}
</script>
</body>
</html>

演示：http ://brass9.com/test/maybe-jquery/

由于您的问题说您在基本上可以有任何东西的第三方网站上使用它，我已经稍微修改了答案以确保如果页面上存在此代码对现有库的损害（较少） - 它实际上仍然会损害像 require.js 这样的库，如果 require 已经加载而 jQuery 没有加载，那么异步是完全可能的。我稍后会更新以解决此问题。

以前的答案（不像大卫所说的那样工作）：

<script>
if (!window.jQuery) {
    var script = document.createElement('script');
    script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
}
</script>
<script>
// Work with jQuery as needed
</script>
于 2013-05-15T09:38:16.443 回答
0

这是一个关于如何在需要时要求 jQuery 的简单示例：

<script>
window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>');
(function ready(){
    if(window.jQuery) {
        jQuery.noConflict();
        var $ = jQuery;
        $(document).ready(function() {
               // Your plugin code
        });
    } else {
        setTimeout(ready, 50);
    }
})();
</script>
于 2013-05-15T09:13:35.847 回答