CODEWITHSUNDEEP
javascriptrequirejsamd
Wish
Wish

Reputation: 1614

RequireJS managing large modules

Only now I have considered using RequireJS and AMD modules. So far - all the things have been managed through few global variables and self invoking functions.

Example, for how my module would looke like:

function HugeModule() {
    //usage = new HugeModule();  
};
HugeModule.prototype.functionX = function() {
    //Lets say - around 50 functions for HugeModule prototype
};

HugeModule.SubModule = function() {
    //usage = new HugeModule.SubModule();
    //And here could be multiple subModules like this
};
HugeModule.SubModule.prototype.functionX = function() {
    //Lets say - around 20 functions for HugeModule.SubModule prototype
};

Now I would have written it like this, I would have split it between at least 4 files:

//HugeModule.js
var HugeModule = (function() {
    function HugeModule() {
        //usage = new HugeModule();  
    };
    return HugeModule;
})();
//HugeModule.somePrototypeFunctions.js
(function() {
    HugeModule.prototype.functionX = function() {
        //Lets say - around 50 functions for HugeModule prototype
    };
})();
//HugeModule.SubModule.js
(function() {
    HugeModule.SubModule = function() {
        //usage = new HugeModule.SubModule();
        //And here could be multiple subModules like this
    };
})();
//HugeModule.SubModule.someOtherPrototypeFunctions.js
(function() {    
    HugeModule.SubModule.prototype.functionX = function() {
        //Lets say - around 20 functions for HugeModule.SubModule prototype
    };
})();

I would really like to write these modules with AMD modules and RequireJS, I have a basic idea how they should be written, but I am not sure - how would I split them between multiple modules.

I could write it like this:

define([], function() {
    function HugeModule() {
        //usage = new HugeModule();  
    };
    HugeModule.prototype.functionX = function() {
        //Lets say - around 50 functions for HugeModule prototype
    };
    return HugeModule;
});

but I would like to split it between multiple files. I would prefer not to use build tools that concatenates files.

What I would like is one requirable module - HugeModule and it would resolve all the dependencies for HugeModule.somePrototypeFunctions, and HugeModule.SubModule (and this would resolve dependencie for HugeModule.SubModule.someOtherPrototypeFunctions)

How should I resolve this?

Upvotes: 0

Views: 43

Answers (1)

Louis
Louis

Reputation: 151401

First an important caveat: what you are trying to do does not lend itself well to how ES6 classes work. If you are ever to write ES6 classes or write in a language that has a class syntax similar to ES6 (TypeScript, for instance, has classes that are ES6 + type annotations), you'll run into having to work around the class syntax or run into transpilation problems. Think about refactoring your HugeModule into multiple smaller classes to avoid these problems. (See here for a discussion of the problem in the context of TypeScript.)

If the caveat above is not a concern, you can achieve your goal by organizing your code like the following. I've used this pattern for many years successfully.

HugeModule.js just combines the parts of the class and provide a facade for the rest of the code:

define(["./HugeModuleCore", "./HugeModuleA", "./HugeModuleB"], function (HugeModuleCore) {
    return HugeModuleCore;
});

HugeModuleCore.js creates the class and creates some "core" methods on it:

define([], function () {
    function HugeModule() {
    };

    HugeModule.prototype.someCoreFunction = function() {
    };

    return HugeModule;
});

HugeModuleA.js adds some category of methods to the core:

define(["./HugeModuleCore"], function (HugeModule) {
    HugeModule.prototype.someFunction = function() {
    };

    // You don't really need to return anything here.
});

HugeModuleB.js adds some other category of methods to the core:

define(["./HugeModuleCore"], function (HugeModule) {
    HugeModule.prototype.someOtherFunction = function() {
    };

    // You don't really need to return anything here.
});

Upvotes: 1

Related Questions