JS JavaScript模块化（ES Module/CommonJS/AMD/CMD）

前言

前端开发中，起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果，后来js获得重视，应用也普遍起来了，

jQuery，Ajax，Node.Js，MVC，MVVM等的助力也使得前端开发获得重视，也使得前端项目愈来愈复杂，

然而，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，那么什么是模块呢？

一个模块就是实现特定功能的文件，有了模块，咱们就能够更方便地使用别人的代码，想要什么功能，就加载什么模块。

 

1、AMD 规范

AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。

模块将被异步加载，模块加载不影响后面语句的运行。

全部依赖某些模块的语句均放置在回调函数中。

 

用法：

• 定义模块：define(id?, dependencies?, factory)
• 加载模块：require([module], factory)

// a.js
// 依赖有三个默认的，即"require", "exports", "module"。顺序个数都可视状况
// 若是忽略则factory默认此三个传入参数
// id通常是不传的，默认是文件名
define(["b", "require", "exports"], function(b, require, exports) {
    console.log("a.js执行");
    console.log(b);
// 暴露api可使用exports、module.exports、return
    exports.a = function() {
        return require("b");
    }
})
// b.js
define(function() {
    console.log('b.js执行');
    console.log(require);
    console.log(exports);
    console.log(module);
    return 'b';
})
// index.js
// 支持Modules/Wrappings写法，注意dependencies得是空的，且factory参数不可空
define(function(require, exports, module) {
    console.log('index.js执行');
    var a = require('a');
    var b = require('b');
})
// index.js
require(['a', 'b'], function(a, b) {
    console.log('index.js执行');
})

 

 

2、CMD 规范

CMD 是 SeaJS 在推广过程当中对模块定义的规范化产出。

在 CMD 规范中，一个模块就是一个文件。

 

用法：

• 定义模块：define(factory)

/ require, exports, module参数顺序不可乱
// 暴露api方法可使用exports、module.exports、return
// 与requirejs不一样的是，如果未暴露，则返回{}，requirejs返回undefined
define(function(require, exports, module) {
    console.log('a.js执行');
    console.log(require);
    console.log(exports);
    console.log(module);
})
// b.js
// 
define(function(require, module, exports) {
    console.log('b.js执行');
    console.log(require);
    console.log(exports);
    console.log(module);
})
// index.js
define(function(require) {
    var a = require('a');
    var b = require('b');
    console.log(a);
    console.log(b);
})

 

 

3、CommonJs 规范

CommonJs 是服务器端模块的规范。

Node.js 采用了这个规范。Node.JS首先采用了js模块化的概念。

根据 CommonJs 规范，一个单独的文件就是一个模块。每个模块都是一个单独的做用域，也就是说，在该模块内部定义的变量，没法被其余模块读取，除非定义为 global 对象的属性。

 

用法：

• 输出模块：module.exports
• 加载模块：require

// 导出使用module.exports，也能够exports。exports指向module.exports；即exports = module.exports
// 就是在此对象上挂属性
// commonjs
module.exports.add = function add(params) {
    return ++params;
}
exports.sub = function sub(params) {
    return --params;
}

// 加载模块使用require('xxx')。相对、绝对路径都可。默认引用js，能够不写.js后缀
// index.js
var common = require('./commonjs');
console.log(common.sub(1));
console.log(common.add(1));

 

 

4、ES Module

ES6 在语言标准的层面上，实现了模块功能，成为浏览器和服务器通用的模块解决方案，彻底能够取代 CommonJS 和 AMD 规范。

 

基本特色：

• 每个模块只加载一次， 每个JS只执行一次， 若是下次再去加载同目录下同文件，直接从内存中读取；
• 每个模块内声明的变量都是局部变量， 不会污染全局做用域；
• 模块内部的变量或者函数能够经过export导出；
• 一个模块能够导入别的模块

 

用法：

• 输出模块：export
• 加载模块：import 

// module
export function fn1(){
    return  "这是 fn1";
}

export function fn2(){
    return "这是 fn2" ;
}

// main.js
//逐一加载
import { fn1, fn2 } from './module';

console.log( fn1());
console.log( fn2());

//总体加载
import * as all from './module';

console.log( all.fn1() );
console.log( all.fn2() );

 

 

动态加载模块：

// 普通写法
import('./module').then(({ a }) => {})
// async、await
const { a } = await import('./module');

 

 

5、各模块之间的区别

一、CommonJS 与 AMD/CMD 的差别

• CommonJS：是同步加载（代码在本地，加载时间基本等于硬盘读取时间）。
• AMD / CMD：是异步加载

 

二、AMD 与 CMD 的差别

• AMD是提早执行，CMD是延迟执行
• AMD推荐依赖前置，CMD推荐依赖就近

 

三、CommonJS 与 ES Module 的差别

• CommonJS 模块是对象，是运行时加载，运行时才把模块挂载在 exports 之上（加载整个模块的全部），加载模块其实就是查找对象属性
• ES Module 不是对象，是使用 export 显示指定输出，再经过 import 输入，此法为编译时加载
• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

 

三、各模块用法上的区别

　　详见各模块介绍...

 

 

 

 

 

随笔整理自

　　https://www.jianshu.com/p/da2ac9ad2960

感谢博主分享！