Question

我正在整理一项提供一些跟踪/分析样式功能的服务，计划是向任何用户提供此功能，以便他们可以简单地粘贴到外部javascript文件的引用中。 JavaScript代码目前依赖于JQuery，因为它以这种方式编写代码要快得多，更容易和更健壮，但我现在不确定如何最好地在用户站点上包含此引用 - 使用该服务的一些站点可能有JQuery，有些可能没有，那些做的可能会有不同的版本。这里有最好的做法吗？我提出的选项：

在外部JS文件中包含缩小的JQuery（可能只使用我需要的自定义构建）和自定义JQuery别名
从外部JS文件加载Jquery（再次使用自定义JQuery别名）
使用yepnopejs之类的条件加载程序来确保安装JQuery
记录安装JQuery的要求，并将其留给用户以确保它在那里并且兼容版本

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

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

Answer 1

你可以使用一个脏技巧 - jQuery有一个名为define的函数的jsonp回调，因此它可以与AMD一起正常工作。您可以使用define回调作为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已经加载而jQuery没有，那么仍然会损坏像require.js这样的库，这对于异步是完全可能的。我稍后会更新以解决此问题。

以前的回答（不像大卫所说的那样有效）：

<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>

Answer 2

这是一个关于如何在需要时需要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>

需要JQuery的第三方网站服务

2 个答案: