Module pattern- How to split the code for one module into different js files?

Question

For the module pattern, I\'m doing something like:

(function(namespace) {
    // tons of code
    // blabla
})(window.myGlobalNamespace);

H

Answer 1

Modularization (splitting the code) is not the same as data protection (hiding data).

RequireJS solves the modularization issue, not the data-protection issue. Or to put it differently... Whatever issues exist with trying to protect data and whatever solutions exist to protect data, these issues and solutions are the same with or without RequireJS.

RequireJS implements all the mechanics to specify dependencies between modules, to load these dependencies only as needed, to avoid reloading things that have already been loaded, avoid loading things that are not required at all, quickly change the location of modules, have redundancy, etc.

After deployment if one finds RequireJS somehow too heavy, there's the almond library that can be used instead.

We can't have a field that's accessible by child but not to outside public (i.e. protected). Is there any way to achieve that?

If you want modularization (i.e. you want the child to be coded separately from the parent), I do not believe this is possible in JavaScript. It would be possible to have child and parent operate in the same closure but then this would not be modular. This is true with or without RequireJS.

If not, meaning if we wanteparentPrivate to be accessible, we need to make it public. Then the user will be able to modify it!

If you want to prevent assigning to parentPrivate, you can use Object.freeze() on the namespace that contains parentPrivate.

However, I don't know how well it is supported by various browsers. And if what is in parentPrivate is itself an object rather than a primitive value, it also needs to be frozen if you don't want it to be modified by clients of your code. And once an object is frozen, it is frozen for everyone so the module that owns the object does not get special treatment to modify it. And freezing does not hide anything.

Or you could use setters and getters like in this RequireJS example:

define(function () {
    'use strict';

    var writable = "initial value";

    var namespace = {
        get unwritable() { return writable; },
        doSomething: function () { writable = "changed value"; }

    };

    return namespace;

});

If the module is imported as parent, then parent.unwritable cannot be written to but the module itself can still change the value returned by writing to writable. Note that if the return value returned by the getter is an object rather than a primitive value, this object can be modified by the caller.

Again, this is true whether or not you use RequireJS. The solutions are the same, the problems are same, etc.