通过 `script` 加载的 RequireJS + Backbone + jQuery 干扰通过 RequireJS 加载的 jQuery [英] RequireJS + Backbone + jQuery loaded through `script` interfering with jQuery loaded through RequireJS

问题描述

我刚刚尝试升级到 Backbone 1.1.2，但在使用 jQuery 时遇到了问题.

I just tried upgrading to Backbone 1.1.2, and have been having issues with jQuery.

默认情况下，Backbone 希望在基本目录中以 ./jquery.js 的形式找到 jQuery.当我将它添加到 RequireJS 路径并将其作为 Backbone 的依赖项添加到 shim 时，所有内容都在 require 内部工作，但在外部，没有任何效果.就好像我正在创建的本地引用正在践踏全局包含的 jQuery?

By default, Backbone expects to find the jQuery in the base directory as ./jquery.js. When I add this into the RequireJS path and add it to the shim as a dependency for Backbone, then everything works inside of require, but outside, nothing works. It's as if the local reference I am creating is stomping over the globally included jQuery?

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

In my html page, I have this:

<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(目前有效)看起来像这样:

homepage.js (which currently works) looks like this:

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 完美缩小.

In this situation, I am using the global jQuery and it works perfectly, both inside the app, and globally for my site navigation which uses jQuery. The js also minifies perfectly with r.js.

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

But when I change my BB version to 1.1.2, it says that it can't find jquery.js. When I uncomment all of the lines in homepage.js to include jQuery dependencies, everything renders within the application, but now my navigation breaks, saying that the jQuery functions that i have created are undefined. I am also unable to minify my app in r.js.

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

This leads me to believe that jQuery and $ in the global namespace are being stomped on when RequireJS starts downloading its dependencies. Is this just a classic case of needing to use $.noConflict? If so, how do I modify my code to do this?

推荐答案

更新最新版本

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

Update for more recent versions

The answer was originally written for Backbone 1.1.2, and an older version of Underscore.

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

Recent versions are AMD-aware and do not need shim set for them. You should also use all lowercase names for the modules: backbone and underscore because some of these names are hardcoded. (You can work around the hardcoding with a map config but it is just simpler to use the standard, all lowercase names.)

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

If you load jQuery with a <script> tag and then load it in RequireJS you have to take special precautions. However, I do not notice anything in your question that indicates that you need to have two jQueries loaded. So you could use the following trick to use the same instance of jQuery outside and inside AMD modules:

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，因此它的 shim 不需要它的依赖项.

This way when RequireJS "loads" the jquery module, it'll execute the code passed to the define above. As I recall, jQuery UI just installs itself as a jQuery plugin so you don't need to do anything special about it. Also I recommend using Backbone 1.1.2, which does not need a shim. Underscore does not depend on jQuery so the shim for it does not need a dependency for it.

这篇关于通过 `script` 加载的 RequireJS + Backbone + jQuery 干扰通过 RequireJS 加载的 jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！