CODEWITHSUNDEEP
jquerydombackbone.jsmodulerequirejs
Flosculus
Flosculus

Reputation: 6946

Should I load everything via RequireJS including jQuery?

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?

Upvotes: 3

Views: 632

Answers (2)

Sneaky Wombat
Sneaky Wombat

Reputation: 1848

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).

Upvotes: 1

Yossarian21
Yossarian21

Reputation: 189

We do something similar and do not use require to load 'global' components such as jQuery and underscore, though we do use require to load our modules. I think either approach is valid (using require to load jQuery or not).

One of the reasons to choose requireJS to load your custom modules is because you want to run an optimizer as part of your build & deploy process to minimize the number of script files your application has to load. The optimizer (such as r.js) can trace the dependencies that you specify to requireJS to help figure out what bundled JS files to create.If you are using several 3rd party libraries, you might want to bundle them together into a single JS file. That would be one reason to choose to use requireJS to load jQuery.

Otherwise, I think it's up to your preference. I am not aware of a technical reason why you "should" use requireJS to load jQuery if you're using requireJS in your application.

I suggest reading this document. It is more about how than why, but it's still useful information: http://requirejs.org/docs/jquery.html

Also take a look at this sample project: https://github.com/jrburke/require-jquery

Upvotes: 2

Related Questions