- 现代模块化机制要解决的问题如下
- 命名污染，全局污染，变量冲突等基础问题
- 内聚且私有，变量不能被外界污染到
- 怎么引入（依赖）其它模块，怎样暴露出接口给其它模块
- 依赖顺序问题，比如以前的 Jquery 问题
- 循环引用问题，等边界情况
一、CommonJS
服务端模块规范，可以实现服务器端模块重用，拷贝方式是是值拷贝；但加载模块是同步的，只有加载完成后才能执行后面的操作 。
//定义一个module.js文件
var A = function() {
console.log('我是定义的模块');
}
//导出这个模块
//1.第一种返回方式 module.exports = A;
//2.第二种返回方式 module.exports.test = A
//3.第三种返回方式 exports.test = A;
exports.test = A;
//再写一个test.js文件，去调用刚才定义好的模块，这两个文件在同一个目录下
var module = require("./module"); //加载这个模块
//调用这个模块，不同的返回方式用不同的方式调用
//1.第一种调用方式 module();
//2.第二种调用方式 module.test();
//3.第三种调用方式 module.test();
module.test();
// 执行: node test.js
node test.js
// 输出结果：我是定义的模块
二、AMD
可以实现异步加载依赖模块，并且会提前加载 ，require的时候加载；但使用需要先下载 require.js 文件，开发成本高，代码的阅读和书写比较困难。
// 编写一个module1.js文件
// 对象形式定义独立的模块
define({
methodA: function() {
console.log('我是module1的methodA');
},
methodB: function() {
console.log('我是module1的methodB');
}
});
// 编写一个module2.js文件
// 函数返回对象形式定义独立模块
define(function () {
return {
methodA: function() {
console.log('我是module2的methodA');
},
methodB: function() {
console.log('我是module2的methodB');
}
};
});
// 编写一个module3.js文件
// 定义非独立的模块（这个模块依赖其他模块）
define(['module1', 'module2'], function(m1, m2) {
return {
methodC: function() {
m1.methodA();
m2.methodB();
}
};
});
//再定义一个main.js，去加载这些个模块
require(['module3'], function(m3){
m3.methodC();
});
// 在一个html文件中去通过RequireJS加载这个main.js
<script data-main="main" src="require.js"></script>
// 浏览器控制台输出结果:
// 我是module1的methodA
// 我是module2的methodB
三、CMD
依赖就近，延迟执行；但需要下载seaJS模块 ，模块的加载逻辑偏重 ，依赖 SPM 工具打包。
// cmd.js
define(function(require, exports, module) {
var a = require('./a');
a.doSomething();
// 此处略去 100 行
var b = require('./b'); // 依赖可以就近书写
b.doSomething();
// ...
})
// main.js
require(['cmd']);
四、ES6
在ES6之前，要想在前端做模块化开发，必须依赖第三方框架来实现，如：requireJS与seaJS。ES6的出现，完全可以取代AMD 、CMD规范和NodeJS支持的CommonJS 规范，浏览器和服务端都支持。
export default A
import A from './moduleA.js'
export class myClass { }
export var a = 'a'
export let b = 'b'
export const c = 'c'
export {
good,
nice
}
import { myClass, a, b, c, good, nice } from './export'
