jquery - 加载多个版本的 jQuery 时的 RequireJs 问题

Question

在我的网站上，我使用 RequireJs 异步加载大多数 JavaScript。请参阅以下我的 RequireJs 配置:

require.config({
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery'
    },
    shim: {
        'jquery.accordion': {
            deps: ['jquery']
        }
    }
});

假设我在正文中定义了以下代码来异步加载文件:

require(['DisplayAccordion']);

其中 DisplayAccordion.js 包含以下内容:

define(['jquery', 'jquery.accordion'], function($) {
    $(function() {
        $('.xyz').accordion();
    });
});

注意:jquery.accordion 只是一个 jQuery 插件，不支持 AMD，需要定义全局 jQuery 变量。

这工作正常，但现在说我将页面上的脚本引用删除到第三方库。例如:

<script src="//example.com/ThirdParty.js"></script>

第三方库加载它自己的 jQuery 版本。现在我收到错误:

Object doesn't support property or method 'accordion'.

单步执行代码后，我发现它按以下顺序执行:

1. 第三方.js
2. jquery.min.js - 第三方版本
3. jquery.min.js - 我的版本
4. jquery.accordion.js - 其中 $ 指向我的 jQuery 版本引用
5. DisplayAccordion.js(回调函数) - 其中 $ 指向第三方版本的 jQuery

现在我明白为什么会收到错误了，因为插件附加到了不同的对象。但是我不确定为什么会这样做。

下面的信息将简单解释为什么使用 $.noConflict(true) 不起作用。

经过对这个问题的一些研究。我将配置修改为:

require.config({
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery'
    },
    map: {
        '*': { 'jquery': 'jquery-private' },
        'jquery-private': { 'jquery': 'jquery' }
    },
    shim: {
        'jquery.accordion': {
            deps: ['jquery']
        }
    }
});

其中 jquery-private.js 定义为:

define(['jquery'], function($) {
    return $.noConflict(true);
});

请注意，这取自 http://www.requirejs.org/docs/jquery.html#noconflictmap

现在它按以下顺序执行:

1. 第三方.js
2. jquery.min.js - 第三方版本
3. jquery-private.js(回调函数)
4. jquery.min.js - 我的版本
5. jquery.accordion.js - 其中 $ 未定义
6. DisplayAccordion.js(回调函数) - 其中 $ 指向第三方版本jQuery

正如您可以想象的那样，这也不起作用，因为 $ 在 jquery.accordion.js 文件中未定义。

经过进一步调试，我发现第三方库也调用:

$.noConflict(true);

我想我明白这里发生了什么。当它在第三方库中调用 $.noConflict(true) 时，它会尝试将全局变量 $ 和 jQuery 设置为以前的版本。然而，由于没有加载以前的版本，因此它被设置为未定义。

现在，当它调用 jquery-private.js 并返回 $.noConflict(true) 时，它将返回已设置为未定义的全局 jQuery 变量。不过，它现在会将全局 jQuery 变量设置为第三方版本的库。

因此，当加载 jquery.accordion $ 时，它是未定义的。但当它下次调用 DisplayAccordion.js 时，它现在正在引用第三方版本的 jQuery 库。

如果有人能提出修复建议，我将不胜感激。谢谢

Answer 1

我建议您制作自己的 jquery.accordion.js 版本 - 将其放入 RequireJS 模块(将其包装在 define(["jquery-private"], function($){ 中。 .. }); 等)

其他一切都需要请求 jquery-private 而不是 jquery - 所以在 require( 中唯一提到 jquery )/define() 调用将在 jquery-private 本身中进行。

虽然这意味着无法从第 3 方自动更新的 CDN 加载它，但它会让它在“正确”版本的 jQuery 上运行。

同时(如果您知道它是哪一个 - GitHub 列出了同名的几个项目)，您还可以向 GitHub 提交错误报告/拉取请求以使其支持 RequireJS - 然后在更新后更改路径: -)