jquery - 通过 `script` 加载的 RequireJS + Backbone + jQuery 干扰通过 RequireJS 加载的 jQuery

Question

我刚刚尝试升级到 Backbone 1.1.2，但 jQuery 遇到了问题。

默认情况下，Backbone 希望在基本目录中找到 jQuery ./jquery.js。当我将其添加到 RequireJS 路径并将其作为 Backbone 的依赖项添加到填充程序中时，所有内容都可以在 require 内部运行，但在外部则不起作用。就好像我正在创建的本地引用正在践踏全局包含的 jQuery？

在我的 html 页面中，我有这个:

<script src="js/lib/jquery/2.0.2/jquery.min.js"></script>
<script src="js/lib/jqueryui/{$jquery.ui.version}/jquery-ui.min.js"></script>
<script data-main="js/homepage" src="js/lib/require/2.1.11/require.min.js"></script>

homepage.js (当前有效)如下所示:

require.config({
    baseUrl: "./js",
    paths: {
    Underscore: 'lib/underscore/1.6.0/underscore-min',
    Backbone: 'lib/backbone/1.0.0/backbone-min'
    // ,jquery: 'lib/jquery/2.0.2/jquery.min'
    // ,jqueryui: 'lib/jqueryui/1.10.3/jquery-ui.min'

},

shim: {
    // 'jqueryui': {
    //  deps: ['jquery'],
    //  exports: "$"
    // },
    'Underscore': {
        // deps: ['jquery'],
        exports: "_"
    },
    'Backbone': {
        deps: ['Underscore', /*'jquery'*/],
        exports: 'Backbone'
    }

}

});

require([ 'views/homepage/main' ], function(Main) {

});

在这种情况下，我使用全局 jQuery，它在应用程序内部以及使用 jQuery 的网站导航中都运行得很好。 js 还可以通过 r.js 完美缩小。

但是当我将 BB 版本更改为 1.1.2 时，它说找不到 jquery.js。当我取消注释 homepage.js 中的所有行以包含 jQuery 依赖项时，所有内容都会在应用程序中呈现，但现在我的导航中断，说我创建的 jQuery 函数未定义。我也无法在 r.js 中缩小我的应用程序。

这让我相信，当 RequireJS 开始下载其依赖项时，全局命名空间中的 jQuery 和 $ 正在被踩踏。这只是需要使用 $.noConflict 的典型案例吗？如果是这样，我该如何修改我的代码来做到这一点？

Answer 1

更新最新版本

答案最初是为 Backbone 1.1.2 和旧版本的 Underscore 编写的。

最新版本支持 AMD，不需要 shim为他们设置。您还应该对模块使用全部小写名称: backbone和underscore因为其中一些名称是硬编码的。 (您可以使用 map 配置来解决硬编码问题，但使用标准的全小写名称会更简单。)

解决方案

如果您使用 <script> 加载 jQuery标记然后将其加载到 RequireJS 中，您必须采取特殊的预防措施。但是，我没有注意到您的问题中有任何内容表明您需要加载两个jQueries。因此，您可以使用以下技巧在 AMD 模块外部和内部使用相同的 jQuery 实例:

define('jquery', [], function () {
    return jQuery;
});

require.config({
    baseUrl: "./js",
    paths: {
        Underscore: 'lib/underscore/1.6.0/underscore-min',
        Backbone: 'lib/backbone/1.1.2/backbone-min'
    },

    shim: {
        Underscore: {
             exports: "_"
        }
    }

});

require([ 'views/homepage/main' ], function(Main) {

});

这样当 RequireJS“加载” jquery 时模块，它将执行传递给 define 的代码多于。我记得，jQuery UI 只是将其自身安装为 jQuery 插件，因此您无需对其执行任何特殊操作。我还建议使用 Backbone 1.1.2，它不需要垫片。 Underscore 不依赖于 jQuery，因此它的垫片不需要它的依赖项。