Question

I am building a single page web application and one the requirements are jQuery, jQuery-ui and any jquery plugins I decide to use during development.

I am also looking into RequireJS and Backbone to form the MVC structure of the application.
While I have no doubt that RequireJS will be very useful in loading the Backbone MVC modules I create, I am some what indifferent to using it to load jQuery and its plugins.

This is because I consider jQuery to acceptable to use in the global namespace as it will be used everywhere in the entire application.

So my question is: is it okay to make such a separation between modular components and what I would consider as a necessary global component jQuery?

Answer 1

You want something like this:

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();
    });
});

In your case, you’d replace the jquery-mobile stuff with jquery-ui stuff. Same idea. Jquery is smart enough to put itself in the global namespace, the rest, depending on your version, are not (generally speaking). Hopefully this helps you out. Just remember, if you use a library that isn’t amd compatible, you’ll want to throw it in a shim, like what you see above. The shim is a shortcut to wrapping the library manually (aka, yourself).