Javascript, multi file modules and Require.Js

Question

I am designing a not-trivial application in Javascript.

From what i read so far a common practice is to avoid cluttering the global namespace by defining everything into modules.

And for convenience and code clarity a module can be divided into separate files using the module Augmentation pattern

var MODULE = (function (my) {

   // functions, objects, etc ...

   return my;
}(MODULE || {}));

Now when having many modules and module dependencies, require.Js seems like a promising tool to add order, decoupling and cleaner namespace. having all modules loaded asynchronously and make sure they run only after their dependencies are ready.

define(["depenencyModule1", "depenencyModule2"], 
    function(depenencyModule1, depenencyModule2) {

       // define MyModule

       return MyModule;
    }
);

This usage however interferes with the module augmentation pattern from before, at first it seems like i am using it wrong but then i went through require.js documentation and found this:

"Only one module should be defined per JavaScript file, given the nature of the module name-to-file-path lookup algorithm."

So now i am confused, If i write my module to a single file it will be huge and maintainable, doesn't that make require.js useless? Or perhaps Javascript concept of a module is a tiny bit of code compare to modules in other languages ?

It is not clear what you mean by "interferes with the module augmentation pattern from before". What pattern? Before what? — DFriend
– DFriend, Commented Nov 24, 2015 at 13:23

Louis · Accepted Answer · 2015-11-25 01:59:42Z

RequireJS allows you to have a facade module which is implemented as a group of RequireJS modules. For instance, you could have:

define(function (require, exports, module) {

'use strict';

var foo = require("./foo");
var bar = require("./bar");

for(var prop in foo) {
    exports[prop] = foo[prop];
}

for(var prop in bar) {
    exports[prop] = bar[prop];
}

});

This module exports everything from foo and bar. From the point of view of someone importing it, it looks like a single module, even though three RequireJS modules are involved (the facade, and the two modules it imports).

Another thing I've done is declare a single class across multiple modules. I might have a foo module that exports the class Foo:

define(function (require, exports, module) {
'use strict';

var core = require("./foo_core");
require("./foo_init");
require("./foo_gui");
...

exports.Foo = core.Foo;
});

The foo_core module actually defines the class:

define(function (require, exports, module) {
'use strict';

function Foo () {
   // ...
}

Foo.prototype.bar = function () { ... };

exports.Foo = Foo
});

Other modules add to it. foo_init:

define(function (require, exports, module) {
'use strict';

var Foo = require("./foo_core").Foo;

Foo.prototype.init = function () { ... };
});

foo_gui:

define(function (require, exports, module) {
'use strict';

var Foo = require("./foo_core").Foo;

Foo.prototype.render = function () { ... };
Foo.prototype.erase = function () { ... };
});

I've used both methods above to split code which from the standpoint of the API should appear as a single module but is implemented across multiple files.

Collectives™ on Stack Overflow

Javascript, multi file modules and Require.Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related