Dynamic loading of modules from array using RequireJS

Question

I am working on an application using RequireJS AMD loading method.

I have my modules dynamical picked up from a configuration file into an array

var amd_modules = ["module1", "module2","module3"]

now I have my requireJS code

require(amd_modules, function(result) {
console.log("All modules loaded");
}

Now, the result variable shows the first module which is "module1". How can I get other modules also into variable inside the function() parenthesis.

For eg,

require(amd_modules, function(module1, module2, module3) { //
}

I can't write the above hardcoding because the number of dynamic variables are not known until run time. Do let me know how I can catch the objects dynamically inside the function.

Thx

Sean Vieira · Accepted Answer · 2012-08-21 02:53:05Z

13

Simply use arguments:

require(amd_modules, function() {
    console.log("All modules loaded");
    // arguments should now be an array of your required modules
    // in the same order you required them
});

However, unless you have a good reason to do so, you probably want to rethink the way you are designing your application - even at the topmost level your modules should be simple and testable. Having a widely varying number of dependencies indicates that you are probably trying to do to much in your callback function. Break each code path out into its own module and then switch only on your top-level dependency instead. In code:

// Instead of this:
require(amd_modules, function() {
    console.log("All modules loaded");
    if (complex_condition_A) {
        var x = arguments[0],
                y = arguments[1],
                z = arguments[2];
        // Do things with x, y and z
    }
    else if (complex_condition_B) {
        var a = arguments[0],
                b = arguments[1];
        // Do things with a and b
    }
    else {
        // et cetera, et cetera, et cetera
    }
});


// Do this instead
var rootModule;
if (complex_condition_A) rootModule = "A";
else if (complex_condition_B) rootModule = "B";
else rootModule = "C";
require(rootModule, function(root) {
    // Root has the same API, regardless of which implementation it is
    // This might be as simple as an `init` method that does everything
    // or as complex as, say Facebook's API, but with different libraries
    // loaded depending on the platform the page is loaded on
    // (IE vs. Android for example).
});

edited Aug 21, 2012 at 2:53

answered Aug 21, 2012 at 2:40

Sean Vieira

161k34 gold badges321 silver badges297 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1402539 Over a year ago

Thanks for the input. Good catch about the dependency. Actually I am building in a way that each modules are independent of each other. Why I wrote the above method was - by looking this scenario. If a Page have three modules Module A, B and C. each module go into three divs and only one get shown at a time (via tab). So, Tab A show Module A. Tab B show module B, etc. Now I thought that - since user is in Tab A, I can call the requireJS only for the module A. Then once page is loaded, call rest of modules.

user1402539 Over a year ago

so module A gets loaded first, and executed, and then when DOM is ready, I get requireJS call for Module B and Module B files and execute them. This I thought would be better than user having to wait for all Module A, B and C to load. Another reason I thought to do this was - I thought if later other developers add more modules, the init page load should only depend on the modules that are needed for that page. Here is the code snippet I was planning.

user1402539 Over a year ago

var initModules = ['ModuleA'], deferedModules = ['Module C','ModuleD']; require(initLoad, function() { console.log("Initial components loaded."); CORE.create_module(arguments[0]); //Here I create a module for that module component. CORE.start_all(); //Start the above two modules setTimeout(loadRestComponents, 2000); });

user1402539 Over a year ago

loadRestComponents = function() { console.log("Now I load and init rest of components"); require(deferedModules, function() { console.log("Loaded rest of components"); CORE.create_module(arguments[0]); //Here I create a module for that module component. CORE.create_module(arguments[1]); // Module creation for other module component CORE.start_all(); //Start the above two modules }); }

Sean Vieira Over a year ago

@user1402539 - deferred loading modules is a good way to go - I would use this pattern:

require([initModule, deferredModules], function(CORE, deferredModules) { CORE.create_module(); for (var i=0, l=deferredModules.length; i<l; i++) { CORE.create_module(deferredModules[i]); } });

|

cabrerahector · Accepted Answer · 2021-09-30 22:49:10Z

0

Try something like this:

define(function () {
    var ClassLoader = function () {
        var _construct = function () {
                return _public;
            },
            _loadClass = function (className, callback) {
                //
                require([className],
                    function (LoadedClass) {
                        callback(LoadedClass);
                    });
            },

            _public = {
                loadClass: _loadClass
            };
        return _construct();
    }
    return ClassLoader;
});

edited Sep 30, 2021 at 22:49

cabrerahector

3,9984 gold badges20 silver badges32 bronze badges

answered Nov 28, 2014 at 11:02

Roy Garnaat

1

1 Comment

Syeda Zunaira Over a year ago

Please add more details.

Collectives™ on Stack Overflow

Dynamic loading of modules from array using RequireJS

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related