javascript模块化总结

CommonJS 规范

• 实现js模块化
  • 模块加载 require
  • 模块标识 module
  • 模块定义 exports
• Node.js 按照 CommonJS 规范编写
• require() 是同步加载模块的，仅适合服务端。

// foo.js
module.exports = function () {
    return 'foo'; 
};

// main.js
var foo = require("./foo.js")

AMD 规范

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。

• 让浏览器端的模块采用"异步加载"（asynchronous），适合浏览器端。
• 同样采用require()语句加载模块，但是不同于CommonJS，它要求两个参数，分别是 module (数组) 和 callback (回调函数)：

// main.js
require(['math'], function (math) {
    math.add(2, 3);
});

require.js

require.js 实现了AMD规范，主要为了解决两个问题：

• 实现js文件的异步加载，避免网页失去响应；
• 管理模块之间的依赖性，便于代码的编写和维护。

使用方式

只需在 script 标签中引入库文件和主模块 main.js 文件：

<script src="js/require.js" data-main="js/main"></script>

AMD模块的写法

通过define函数定义模块

// math.js
define(function (){
    var add = function (x,y){
        return x+y;
    };

    return {
        add: add
    };
});

// main.js
require(['math'], function (math){
    alert(math.add(1,1));
});

如果这个模块还依赖其他模块，那么 define() 函数的第一个参数，必须是一个数组，指明该模块的依赖性。

代码实例：

https://www.cnblogs.com/chenguangliang/p/5856701.html

CMD 规范

• 与 AMD 类似，sea.js 实现。

参考：

• CMD 模块定义规范
• Sea.js 与 RequireJS 的异同

ES6

• 语法： import export （注意有无 default）
• 环境： babel 编译 ES6 语法，模块化可用 webpack 和 rollup

// util1.js
export default {
    a: 100
}

//util2.js
export function fn1() {
    alert('fn1')
}

export function fn2() {
    alert('fn2')
}

// index.js
import util1 from './util1.js'
import { fn1, fn2 } from './util2.js'

console.log(util1)
fn1()
fn2()