JavaScript modular -CommonJS, AMD, CMD, UMD, ES6

Introduction: Modular development needs

In the early JS, use the script tag to introduce JS, can cause the following problems:

When loads blocking Web rendering, the introduction of more JS, longer blocking time.
Easy to pollute the global variable.
Js file dependencies exist, there must be loaded sequence. When larger projects, will depend on the complex.
JS files introduced excessive, unsightly, and not easy to manage.

A, CommonJS specification

CommonJS Modules / 1.0 specification, the server specification.

Node.js widely used. The core of this specification is: The method allows the module to synchronize require loading of other modules depends, then exports or derived module.exports interface needs to be exposed.

Features:

A module is a file

Use module.exports exports or export module

// module.js
exports.add = (a, b) => a+b

module.exports = {
  add: (a, b) => a + b
}

Require the use of load modules

a. require命令第一次加载模块时，执行整个脚本，在内存中生成对象
b. 多次执行require命令再次加载该模块时，不会再执行该脚本，直接从缓存中取值
c. CommonJS加载模块是同步加载模块

Tips：

Why CommonJS specification is inappropriate for a browser specifications

由于CommonJS是同步加模块，在服务端加载模块时都是从本地硬盘中加载，读取速度很快。但是在浏览器端加载模块时，需要请求服务器端，涉及网速、代理的问题，一旦等待时间过长，浏览器会处于“假死”状态。

Two, ADM specification

AMD (Asynchronous Module Definition) asynchronous module definition, client specifications.
Asynchronously load module load module execution behind it does not affect the generation of the statement.

AMD is require.js in the process of promoting the use of the module definition standardized product.

In use, the need to introduce require.js

Feature

Use DEFINE () definition module

/**
 * @param id 模块名称，如果为空，模块的名字默认为模块加载器请求的指定脚本名
 * @param dependencies 模块依赖
 * @param factory 工场函数，模块初始化执行的函数或对象
 */
define(id? dependencies? factory)

Require the use of load modules
```
require([module], callback)
```
AMD is dependent on the front module

Three, CMD specification

CMD (Common Module Definition) common module definition, asynchronous loading module.

CMD is the standardization of the product in the promotion process sea.js module defined.

In use, the need to introduce sea.js

Features:

Use DEFINE () definition module using require () load module
```
define(function (require, exports, module) {
	let a = require('a')
	let b = require('b')
	exports.eat = a.eat
	exports.run = b.run
})
```
Then require loading module is loaded respected nearest CMD dependent, to a required module
Use seajs.use loaded using module
```
seajs.use(id, callback?)
```

Four, UMD Specifications

UMD (Universal Module Definition) common module definition, to be compatible with AMD, CMD and non-modular development specifications

/**
 * UMD-Universal Module Definition 通用模块定义
 * */
 (function (root, factory) {
	 // 判断是否是AMD/CMD
	 if (typeof define === 'function') {
		 define([], factory)
	 } else if (typeof exports === 'object') {
		 // Node CommonJS规范
		 module.exports = factory()
	 } else {
		 // 浏览器环境
		 root.someAttr = factory
	 }
 })(this, function () {
	 let add = function (a, b) {
		 return a + b
	 }
	 return {
		 add,
		 module: 'UMD'
	 }
 })

Five, ES6 module

ES6 imort achieved by input and output modules, and the export, import command input function provided on another module, a command for a predetermined export external interface module.

Features:

Use export export module

// test.js
export let module = 'ES6 Module'
export let hello = function () {}
let demo = function () {}
// 默认导出
export default demo

The import import module

// 导入默认模块
import demo from './test.js'

// 导入指定模块
import { hello, module } from './test'

// 导入指定模块，并重命名
import { hello as hi, module } from './test.js'

// 导入全部模块，并重命名
import * as test from './test.js'

postscript

And that Hu brother today to share content, like a small partner to remember 收藏, and 转发click the bottom right button to 在看recommend it to more junior partner Yo, welcome to a lot of message exchanges ...

Hu brother something to say, a skill, a feeling of Hu brother! Now Ren Jingdong front end of a siege lion.
Hu brother something to say, focus on the front end of a large field of technology, sharing front-end system architecture, framework implementation principle, the latest and most efficient technology practice!

Press scan code concerned, more handsome and more beautiful Yo! No public attention Hu brother something to say, can continue in-depth exchanges with Hu brother Yo!

Hu brother something to say