requireJS : How to structure Javascript for an entire site?

Question

I have 3000+ lines of javascript that I need to get into a sensible/maintainable structure. I have chosen to use requireJS as it has been recommend to me by a few people. I have a bunch of variables that are used throughout the application and need to be available everywhere. I also have a bunch of functions that need to be available everywhere. Apart from these two dependencies most of the code can be divided off into their own modules.

I am having trouble understanding how to manage my main variables so that if one module of code makes changes to the variables the rest of the JS modules will see that change. I think I need to see a few examples that demonstrate how requireJS is intended to work on a larger scale that the examples in the documentation.

If anyone is an experienced requireJS user I would love the hear your tips!

Answer 1

The whole point of RequireJS is to avoid the need for these global variables and global functions.

Can't you wrap those globals into a module, then depend on it in your other modules?

For example, a RequireJS modularized Dojo may be something like:

dojo/cache module
dojo/string module (requires dojo/cache)
dojo/date module (requires dojo/string)
dojo/cookie module (requires dojo/string)
           :
           :
dojo module (requires everything above, make them all into sub-objects, say, e.g. dojo.cache, dojo.string, dojo.date etc.)

user module #1 (requires dojo)
user module #2 (maybe only requiring dojo/string)

Answer 2

RequireJS gives you better options for encapsulating modules, but it doesn't change Javascript itself at all. As a transition strategy, you can still define your globals inside the function block. Depending on the module that contains these definitions will ensure that it has run before the dependent modules.

Next step would be to assign those methods to an object other than window, and then use that object through the variable received from RequireJS module dependency.

Hopefully by the time you've done this, you might have some insight into a cleaner solution. I refactored (and still am) a single-file project into several files, including optional plug-ins, although I did most of it before adding RequireJS to the mix.

Answer 3

See the RequireJS documentation:

• Defining a module
• Definition Functions with Dependencies

If the module has dependencies, the first argument should be an array of dependency names, and the second argument should be a definition function. ... The dependencies will be passed to the definition function as function arguments

define(["./cart", "./inventory"], function(cart, inventory) {
        // ...
        return { ... };
    }
);

So I think you can define() your main module like all other modules and make the submodules depend on that main module. Then the module object is passed as an argument to the definition function of a submodule. You don't have to use global variables.