Sort out the difference between AMD, CMD, CommonJS, ES6 Module again

AMD

AMD began as a CommonJS draft specification, stands for Asynchronous Module Definition, that is asynchronous module loading mechanism. Later, by the authors of the draft in order to achieve the RequireJS AMD specification, it is generally said that AMD also refers to RequireJS.

Basic usage of RequireJS

By definedefining a module, use requirecan be introduced into the defined module.

//a.js
//define可以传入三个参数，分别是字符串-模块名、数组-依赖模块、函数-回调函数
define(function(){
    return 1;
})

// b.js
//数组中声明需要加载的模块，可以是模块名、js文件路径
require(['a'], function(a){
    console.log(a);// 1
});

RequireJS features

For dependent modules, AMD respected rely on front, executed in advance . In other words, in the definemethod in the incoming dependent modules (array), it will be downloaded and executed from the start.

CMD

CMD is SeaJS produced in the promotion process module specification defined in the Web browser module loader, SeaJS and RequireJS saying, SeaJS author of Ali Yu Bo.

The basic usage SeaJS

//a.js
/*
* define 接受 factory 参数，factory 可以是一个函数，也可以是一个对象或字符串，
* factory 为对象、字符串时，表示模块的接口就是该对象、字符串。
* define 也可以接受两个以上参数。字符串 id 表示模块标识，数组 deps 是模块依赖.
*/
define(function(require, exports, module) {
  var $ = require('jquery');

  exports.setColor = function() {
    $('body').css('color','#333');
  };
});

//b.js
//数组中声明需要加载的模块，可以是模块名、js文件路径
seajs.use(['a'], function(a) {
  $('#el').click(a.setColor);
});

SeaJS features

For dependent module, the CMD respected dependent near, delayed execution . That is, only to requirethe time-dependent modules before the execution.

CommonJS

CommonJS specification CommonJS group proposed aim to make up for the lack of modularity mechanisms JavaScript on the server side, NodeJS, webpack are implemented based on the specification.

The basic usage of the CommonJS

//a.js
module.exports = function () {
  console.log("hello world")
}

//b.js
var a = require('./a');

a();//"hello world"

//或者

//a2.js
exports.num = 1;
exports.obj = {xx: 2};

//b2.js
var a2 = require('./a2');

console.log(a2);//{ num: 1, obj: { xx: 2 } }

CommonJS features

All code runs in a module scope, does not pollute the global scope;
Synchronization module is loaded, i.e. only loaded to perform subsequent operations;
After the first cache module will be executed, only to return again to load the cached results, if you want to perform again, you can clear the cache;
requireThe value returned is a copy of the value is output changes within the module does not affect this value.

ES6 Module

ES6 ES6 Module is defined in the module system, compared to the above-mentioned specifications, ES6 Module has more advantages, is expected to become a common browser and server module solutions.

The basic usage ES6 Module

//a.js
var name = 'lin';
var age = 13;
var job = 'ninja';

export { name, age, job};

//b.js
import { name, age, job} from './a.js';

console.log(name, age, job);// lin 13 ninja

//或者

//a2.js
export default function () {
  console.log('default ');
}

//b2.js
import customName from './a2.js';
customName(); // 'default'

ES6 Module features (compare the CommonJS)

CommonJS runtime module is loaded, ES6 Module is an output interface compile time;
CommonJS entire module is loaded, all loading all incoming interfaces, ES6 Module which can load a separate interfaces;
CommonJS output value is a copy, ES6 Module is a reference output value, changing the interior of the module can affect the output of the reference change;
CommonJS thispoints to the current block, ES6 Module thispoint undefined;

Currently browser ES6 Module is compatible with not very good, we usually use in webpack in export/ import, will go through babel converted to CommonJS specification.

Written on the back

Here the more comprehensive JavaScript in several modular specifications set out in the hope of modular JavaScript have a general understanding, but not the details of specific analysis, can explore their own interest.

Original link: https://juejin.im/post/5db95e3a6fb9a020704bcd8d