JavaScript modularization ideas: CommonJS, AMD, CMD, UMD

The three module loading methods that I know about are CommonJS, AMD and CMD.

There are many articles on the Internet explaining these three module loading methods. I will give a brief introduction. If you want to know more about it, you can check it out online. relating documents.

(1) CommonJS

In CommonJS, a single file is a module. The called module uses exports to expose the interface, and the calling module uses require to call the exposed interface.

The example is as follows:

// student.js
// 私有变量
var a = 123;
function add(student) {
    console.log('Add student：' + student);
}
// exports对象上的方法和变量是外部可访问的
exports.add = add;

1 // Use require to load student.js module 2 var student = require('./student.js');

CommonJS loading module is "synchronous", that is, if If we want to call public methods and variables in the called module, we must wait until the called module is loaded. NodeJS used on the server uses CommonJS to manage modules. However, on the browser side, synchronous loading will be highly uncertain due to the impact of the network environment, so CommonJS is not suitable for the browser side.

If you want to load modules from the server in a browser environment, you must use the "asynchronous" method. So AMD and CMD solutions emerged.

(2)AMD (Asynchromous Module Definition)

requireJS is a management plug-in that uses AMD to load modules asynchronously. AMD modules support various types of modules such as objects, functions, constructors, strings, JSON, etc.

AMD specification uses define method to define modules:

//define(param1,param2) 通过define方法定义模块
//@param1: 数组，元素为引入的依赖模块
//@param2: 回调函数，通过形参传入依赖
define(['firstModule','secondModule'],function(firstModule,secondModule){
     function foo(){
           firstModule.test();
     }
     // 暴露foo()
     return {foo:foo};
});

At the same time, AMD allows using define method to define modules, which is compatible with CommonJS specification and can use require and exports.

define(function(require,exports,module){
     var reqModule = require("./firstModule");
     reqModule.test();

     exports.pubPort = function(){
            // 函数体
     }
});

(3) CMD

The difference between CMD and AMD is mainly reflected in the execution timing of dependent modules. AMD is "dependency front-loaded". It is recommended to load the required modules in advance, and CMD is "depending on the nearest one". That is to say, load it when it can be used. It is somewhat similar to the "hungry man mode" and "lazy man mode" in Java.

Starting from requireJS 2.0, lazy loading is also possible.

Give me an example:

// AMD——依赖前置
define(['./a','./b'],function(a,b){
    //提前声明要依赖的模块
});

// CMD
define(function(require,exports,module){
    //依赖可以就近写
    var a = require('./a');
    a.test();

    //软依赖
    if(status){
        var b = require('./b');
        b.test();
    }

There is a term here called soft dependency. I personally understand that soft dependency means that you do not necessarily depend on it, hard dependency means a module that you will definitely depend on, and soft dependency means that you depend on it only if you need it, and you don’t depend on it if you don’t need it. According to status judgment.

(4) UMD

UMD——Universal Module Definition, universal module definition

UMD is equal to CommonJS plus AMD. The job of UMD is actually to make a judgment:

- First judge whether the module supported by NodeJs in the current environment exists. If it exists, use the Node.js module mode (exports).

- If it is not supported, determine whether it supports AMD (define), and if it exists, use the AMD method to load it.

I feel like I don’t understand UMD very well yet, and I don’t know how to use it specifically. Let’s continue to understand. come on!