javascript - 使用 noConflict jQuery 将 jQuery UI 包含在 requireJS 中

Question

我正在开发一个使用 jQuery、jQuery UI(可拖动)和 jPlayer 的一些功能的 JavaScript 模块。最近我熟悉了 requireJS 来正确管理依赖关系。

我不想与包含我的脚本的站点使用的可能已经存在的 jQuery 版本产生冲突。出于这个原因，我通过调用 noConflict() 将 jQuery 依赖项映射到模块“jquery-private”，如 requireJS guide 中所述。 .

由于 jQuery UI 占用了大量空间，我还想只包含我实际使用的模块。 ui.draggable 具有依赖项 ui.core、ui.mouse 和 ui.widget，因此我应该包含这 4 个模块。

我的问题是，我希望 jQuery UI 模块和 jPlayer 模块使用我自己的 jQuery 版本，但显然在我调用 noConflict() 方法后，全局 $ 变量无法访问它。不幸的是，jQuery UI 和 jPlayer 都不是 AMD 模块，因此我需要为它们进行 shim 配置。

这是我对依赖项的定义:

require.config({
    baseUrl: 'javascript/modules',
    paths: {
        jquery: 'jquery-2.1.3',
        jPlayer: 'jquery.jplayer',
        uiCore: 'jquery.ui.core',
        uiMouse: 'jquery.ui.mouse',
        uiWidget: 'jquery.ui.widget',
        uiDraggable: 'jquery.ui.draggable'
    },
    map: {
      // '*' means all modules will get 'jquery-private'
      // for their 'jquery' dependency.
      '*': { 'jquery': 'jquery-private' },

      // 'jquery-private' wants the real jQuery module
      // though. If this line was not here, there would
      // be an unresolvable cyclic dependency.
      'jquery-private': { 'jquery': 'jquery' }
    },
    shim: {
        jPlayer: {
            deps: ['jquery']
        },
        uiCore: {
            deps: ['jquery']
        },
        uiMouse: {
            deps: ['jquery','uiCore']
        },
        uiWidget: {
            deps: ['jquery','uiCore']
        },
        uiDraggable: {
            deps: ['jquery','uiCore','uiMouse','uiWidget']
        }
    }
});

require(["json","jquery","jPlayer","uiDraggable"], function(json,___jQuery,jplayer,uiDraggable) {
    (...)
}

显然，这段代码会产生错误，因为 jQuery UI 模块中的 $ 变量未定义。

有什么方法可以将我自己的 jQuery 对象传递给模块吗？另一个线程( How use require.js to load jQuery with noConflict )中的最佳答案表明我想做的事情是不可能的，但也许还有其他方法可以做到这一点？

如果没有，我可能必须使用全局变量并大量编辑包含的模块，这让人怀疑为什么首先要使用像 requireJS 这样的依赖管理库......

Answer 1

我在 jquery.ui 中的每个模块顶部找到了以下代码:

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define([ "jquery" ], factory );
    } else {
        // Browser globals
        factory( jQuery );
    }
}(function( $ ) {...});

这意味着 jquery.ui 检查何时定义全局 AMD“define”函数并使用“jquery”作为模块的 AMD 引用。

根据this中的requirejs推荐，它将使用没有冲突的jquery和 this .

关于how to use jQuery 与 AMD。