13

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

user1402539
  • 225
  • 6
  • 13

2 Answers2

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).
});
Sean Vieira
  • 155,703
  • 32
  • 311
  • 293
  • 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 Aug 21 '12 at 18:31
  • 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 Aug 21 '12 at 18:41
  • 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 Aug 21 '12 at 18:41
  • 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 }); } – user1402539 Aug 21 '12 at 18:42
  • Now tomorrow if I want to add ModuleE to the tab 1, I can add it to the variable and automatically that module gets included. If another developer add Module F, G to tab 2, I thought those two modules need not impact the page load time. This was the reason for the above function procedure. Each module are independent for each other and I can test them without other. Do you think this way of loading the rest of modules after initial onload is a good design ? Thanks for ur input. – user1402539 Aug 21 '12 at 18:45
  • 1
    @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 – Sean Vieira Aug 22 '12 at 01:10
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;
});
cabrerahector
  • 3,653
  • 4
  • 16
  • 27
Roy Garnaat
  • 1