Question

If I have a module that requires an application namespace, e.g.:

define(["app"], function(App){
    [...]
});

… and the namespace requires libraries used by all of my modules, e.g.:

define(["jquery", "underscore", "backbone"], function($, _, Backbone){
    [...]
});

… then all of my modules have access to the libraries required by the namespace, i.e. I can use $, _, and Backbone.

I like this behavior because I can avoid being repetitious, but I suspect that I’m cheating somehow, and that I should require libraries in each module.

Can anyone set me straight here?

Answer 1

Yeah, that’s kinda hacky. You only have access to jQuery, underscore and backbone because they’re also defined onto the global scope. Backbone and undersocre aren’t real AMD module, they have to use a shim config. jQuery declare himself on the global scope and as an AMD module so it works everywhere.

So, yes it work like that, but it’s not optimal. Real AMD module (non-shimmed) won’t work this way as they need to be passed in the define functions arguments, and you won’t be able to pull only one module to test it in a separate environment, etc. This way, you cannot load different versions of a scripts to work with different module/app section/page.

The goal of AMD is to bring modularity to your code so every module declare it’s own dependencies and will work out of the box it without relying on the global scope (which is a good thing to prevent name collision and conflict with third party/other dev working on the same project).

If you find it’s redundant to redeclare everytime your base dependencie, create a boilerplate file that you just copy/paste when creating another module (it’s better than nothing). And, maybe some command line tools can build AMD module wrapper for you.

Soooo, yes it works, but it won’t scale if your project ever get bigger or need to be updated pieces by pieces.

Hope this help !