CODEWITHSUNDEEP
jquerybackbone.jsrequirejs
Guy
Guy

Reputation: 13336

requireJS with Backbone dependencies

I am building a website using requireJS.

this is a first time i'm using requireJS.

i configured requireJS with paths in the main.js:

require.config({
  paths: {
    'jquery': 'libs/jquery/1.7.2/jquery',
    'underscore': 'libs/underscore/1.3.3-amdjs/underscore', // AMD support
    'backbone': 'libs/backbone/0.9.2-amdjs/backbone', // AMD support
    'marionette': 'libs/marionette/0.9.3-amd/backbone.marionette', // AMD support
    'templates': '../templates'
}
});

and in the models, views, collections i'm using;

define([    
'jquery',
'backbone'
], function ($) {
    var Geo = Backbone.Model.extend({});

    return Geo;
});

what is not clear to me is: why do i have to keep defining jquery & backbone as a dependency. i mean this project and models will never run without jquery / backbone.

so why not add jquery and backbone to the index.html as script tags and save referencing them in every object possible. i understand it will pollute the global namespace but isn't that reasonable?

any advice appriciated.

cheers,

Upvotes: 4

Views: 777

Answers (4)

mvbl fst
mvbl fst

Reputation: 5263

@Guy, it's optional to define them, but if you want to be consistent, it's better than you do. This is the architecture that Require.JS suggests. It does not mean that it will try to load jQuery or Backbone every time you define them as deps.

Also, in your example you don't need to use $ in the callback function() arguments. jQuery and $ will already be in the window.

define([    
'jquery',
'backbone'
], function ($) {
    var Geo = Backbone.Model.extend({});

    return Geo;
});

Also, in production, because we sometimes use a lot of dependencies, we do it this way: every time you list require in dependencies and then explicitly assign vars, because some dependencies do not have AMD support and do not return what you expect:

define([    
  'require'
  'moduleA',
  'moduleB'
], function (require) {
    var moduleA = require('moduleA'),
        moduleB = require('moduleB');

    /* code */
    return;
});

Upvotes: 2

Stephen
Stephen

Reputation: 5470

If you create module A and B and want to drop them into another project, the dependencies are plainly declared. What if another project just uses ExtJS with no jQuery? Or what if they use zepto and you specifically need jquery's library? Simply adding a config for jquery is sufficient.. and jquery will be loaded when needed.

You cannot rely on the existence of common libraries. Wrapping the module in a requirejs shell provides a guarantee that the dependencies of the library will exist. And it's a tiny bit faster :) http://jsperf.com/requirejs-include-faster (well. apparently except for ie.. go figure)

Also, unless you're actually using jquery you shouldn't have to require it. Why would you use in a backbone model? Even in a view, you can use this.$el which gives a jquery object back to hunt through - this.$el.find('.someclass')

Upvotes: 0

leon tsing
leon tsing

Reputation: 51

I think it is very useful to add every js files in RequireJS if you use r.js to optimize your project.

Upvotes: 0

Justin wong
Justin wong

Reputation: 638

I think your understanding is correct, since jQuery is everywhere, will be used as a global reference on the index.html page is completely in my project, I do so.

Upvotes: 0

Related Questions