requireJS to define and load modules

Standard way of defining and loading modules in requireJS:

// Standard way of loading modules  
require(['foo','jquery'], function (foo,$) {  
    //foo is now loaded.  
});  
  
// standard way of defining modules  
define(['module1', 'module2'], function(m1, m2) {  
  
    return {  
        method: function() {  
            m1.methodA();  
            m2.methodB();  
        }  
    };  
  
});

If we need to load or define few modules, this standard way of writing is very clear.

But if we need to load a lot of modules, then this one-to-one correspondence is very cumbersome.

define(  
    ['dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],  
    function(dep1, dep2, dep3, dep4, dep5, dep6, dep7, dep8){  
        ...  
    }  
);

To solve this problem, we can use the following 2 ways to define modules:

方式1：If you are using the simplified define wrapper, make sure you have require as the first argument to the definition function

define(  
    function (require) {  
        var dep1 = require('dep1'),  
            dep2 = require('dep2'),  
            dep3 = require('dep3'),  
            dep4 = require('dep4'),  
            dep5 = require('dep5'),  
            dep6 = require('dep6'),  
            dep7 = require('dep7'),  
            dep8 = require('dep8');  
    }  
});

方式2：If you are listing dependencies in the dependency array, make sure that require and name are in the dependency array

define(['require', 'dep1', 'dep2', 'dep3', 'dep4', 'dep5'], function (require) {  
    var dep1 = require('dep1');  
    var dep2 = require('dep2');  
});

But the following way of writing will not work, it will report an error HAS NOT BEEN LOADED YET FOR CONTEXT

//THIS WILL FAIL  
define(['require'], function (require) {  
    var namedModule = require('name');  
});

The explanation on the official website is:

This fails because requirejs needs to be sure to load and execute all dependencies before calling the factory function above. If a dependency array is given to define(), then requirejs assumes that all dependencies are listed in that array, and it will not scan the factory function for other dependencies. So, either do not pass in the dependency array, or if using the dependency array, list all the dependencies in it.

Finally, the official website emphasizes that the writing method of require('name') should only appear in the callback function of define() or require().

Be sure that require('name') only occurs inside a define() definition function or a require() callback function, never in the global space by its own.

It can be seen that when using define() to define a module, if there are few dependent modules, the standard method can be used; if there are many dependent modules, then method 1 or method 2 can be used to solve the problem. Obviously, when using require() to load modules, there is the same problem as define(). After my experiment: using method 2 is also possible.

Method 3 : When using require to load multiple modules

//Load module1 module asynchronously, and call the callback function after loading is complete  
require(["module3","module1","module2"], function() {        
    var m1 = require("module1");  
    alert(m1.name);  
});

Summary: Use define() to define modules and require() to load modules, you can use standard methods, or methods 1, 2, and 3, so that the correct loading and definition of modules in requireJS can be achieved.

requireJS to define and load modules

Guess you like