Understand front-end modularity (CommonJs, AMD and CMD)-JS Tutorial-php.cn

Understand front-end modularity (CommonJs, AMD and CMD)

怪我咯

Release： 2017-04-05 13:50:15

Original

4119 people have browsed it

There are three front-end module specifications: CommonJs, AMD and CMD.

CommonJs is used on the server side, AMD and CMD are used in the browser environment.

AMD is the standardized output of module definitions during the promotion process of RequireJS.

　CMD is the standardized output of module definition during the promotion process of SeaJS.

AMD: Advance execution (asynchronous loading: dependencies are executed first) + delayed execution

CMD: Delayed execution (run to load, execute in sequence)

Module

FunctionWriting

function f1(){
    //...
}
function f2(){
    //...
}

Copy after login

A module is a file that implements a specific function. Putting several functions in a file constitutes a module . Load this file when needed and call the functions in it.

But doing so will pollute the global variables, there is no guarantee that variable names will not conflict with other modules, and there is no relationship between module members.

　ObjectHow to write

var module = {
　　star : 0,
　　f1 : function (){
　　　　//...
　　},
　　f2 : function (){
　　　　//...
　　}
};
module.f1();
module.star = 1;

Copy after login

The module is written as an object, and the module members are encapsulated in the object. By calling the objectproperty, you can access the module members. But at the same time, the module members are exposed, and the internal state of the module can be modified by the outside world.

Execute function immediately

var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　console.log(&#39;ok&#39;);
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
       return {
          f1:f1,
          f2:f2
       };
　　})();
module.f1();  //ok
console.log(module.star)  //undefined

Copy after login

Internal private variables cannot be accessed from the outside

CommonJs

CommonJS is a specification for server-side modules, promoted and used by Node. Due to the complexity of server-side programming, it is difficult to interact with the operating system and other applications without modules. The usage is as follows:

math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
};

increment.js
var add = require(&#39;math&#39;).add;
exports.increment = function(val) {
    return add(val, 1);
};

index.js
var increment = require(&#39;increment&#39;).increment;
var a = increment(1); //2

Copy after login

According to the CommonJS specification:

A single file is a module. Each module has a separate scope, that is to say, variables defined within the module cannot be read by other modules unless they are defined as attributes of the global object.

#The best way to export module variables is to use the module.exports object.
Load the module using the require method, which reads a file and executes it, returning the module.exports object inside the file

Look at the above carefully code, you'll notice that require is synchronous. The module system needs to synchronously read the contents of the module file, compile and execute it to obtain the moduleinterface.

However, there are many problems on the browser side.

On the browser side, the best and easiest way to load JavaScript is to insert the