我应该通过RequireJS加载所有内容,包括jQuery吗?

时间:2012-11-01 21:35:25

标签: jquery dom backbone.js module requirejs

我正在构建单页Web应用程序,其中一个要求是jQuery,jQuery-ui以及我决定在开发过程中使用的任何jquery插件。

我也在研究RequireJS和Backbone来构建应用程序的MVC结构。 虽然我毫不怀疑RequireJS在加载我创建的Backbone MVC模块时非常有用,但我对使用它加载jQuery及其插件无动于衷。

这是因为我认为jQuery在全局命名空间中可以接受,因为它将在整个应用程序中的任何地方使用。

所以我的问题是:在模块化组件和我认为必要的全局组件jQuery之间进行这样的分离是否可以?

2 个答案:

答案 0 :(得分:2)

我们做类似的事情,不要使用require加载'全局'组件,如jQuery和下划线,尽管我们确实使用require来加载我们的模块。我认为这两种方法都是有效的(使用require来加载jQuery)。

选择requireJS加载自定义模块的原因之一是因为您希望在构建和运行中运行优化程序。部署过程以最小化应用程序必须加载的脚本文件的数量。优化器(例如r.js)可以跟踪您为requireJS指定的依赖关系,以帮助确定要创建的捆绑JS文件。如果您使用多个第三方库,您可能希望将它们捆绑到一个JS文件中。这是选择使用requireJS加载jQuery的一个原因。

否则,我认为这取决于您的偏好。如果您在应用程序中使用requireJS,我不知道为什么你“应该”使用requireJS加载jQuery的技术原因。

我建议阅读这份文件。它更多的是关于为什么,但它仍然是有用的信息:http://requirejs.org/docs/jquery.html

另请参阅此示例项目:https://github.com/jrburke/require-jquery

答案 1 :(得分:1)

你想要这样的东西:

require.config({
  baseUrl: "/js/",
  paths: {
    jquery: 'libs/jquery/jquery-1.7.1',
    'jquery.mobile-config': 'libs/jqm/jquery.mobile-config',
    'jquery.mobile': 'libs/jqm/jquery.mobile-1.1.0',
    'jquery.mobile.asyncfilter': 'libs/jqm/asyncfilter',
    underscore: 'libs/underscore/underscore-1.3.3',
    backbone: 'libs/backbone/backbone-0.9.2',
    templates: '../templates'
  },
  shim: {
          'underscore': {
            exports: "_"
          },
          'backbone': {
              //These script dependencies should be loaded before loading
              //backbone.js
              deps: ['jquery','underscore'],
              //Once loaded, use the global 'Backbone' as the
              //module value.
              exports: 'Backbone'
          },
          'jquery.mobile-config': ['jquery'],
          'jquery.mobile': ['jquery','jquery.mobile-config'],
          'jquery.mobile.asyncfilter': ['jquery.mobile'],
        }
});

require([
  'jquery',
  'app',
  'jquery.mobile','jquery.mobile.asyncfilter'
], function( $, App ){
    $(function(){
      App.initialize();
    });
});

在你的情况下,你用jquery-ui替换jquery-mobile的东西。同样的想法。 Jquery足够聪明,可以将自己置于全局命名空间中,其余的,取决于您的版本,(通常来说)。希望这会帮助你。请记住,如果您使用的库不是兼容的,那么您需要将其放入垫片中,就像您在上面看到的那样。垫片是手动包装库的快捷方式(也就是你自己)。