前端模块化的演变过程

1. 用函数作为块

因为函数有自己的作用域，相对比较独立

2. namespace模式

使用对象作为独立块编程。

var myModule={
  a:1,
  b:2,
  add:function(m,n){...}
}

3. IIFE模式(立即执行函数)

使用立即执行函数来创建块，用window对象来向外暴漏接口

4. CommonJS

最开始出现的模块化方案是在node.js中实现的。node中的模块化方案是根据CommonJS规范实现的。CommonJS规定每个文件就是一个模块，以同步的方式引入其他模块。

//a.js
function add(m,n){
  return m+n;
}
module.exports={add:add}


//b.js
const {add} = require('./a.js');
console.log(add(1,2)); // 3

5. AMD和Require.js

CommonJS模块之前是同步引入的，这在服务端是没有什么问题的，因为文件都是保存在硬盘中，读取文件的速度是非常快的，同步加载带来的阻塞基本可以忽略不计。

因为有些模块用不用都会被引入。会带来一些浪费。

define(['a','b'],function(a,b){
  let sum = a.add(1,2);
  if(false){
    sum = b.add(1,2); //b模块是没有被使用的，应该是不需要执行模块内部代码的
  }
  return sum;
})

6. CMD和Sea.js

需要用到某个模块的时候，才用require引入，模块内部的代码也是在被引入的时候才会执行，声明的时候并没有执行。

//定义模块 math.js
define(function(require,exports,module){
  var a = require('./a.js'); // 引入模块
  function add(m,n){
    return m+n;
  }
  module.exports={
    add:add
  }
});

//加载模块
seajs.use(['math.js'],function(math){
  var sum = math.add(1,2);
})

7. ES Module

ES6开始，在语法标准上实现了模块化功能。简称ES Module ES Module是一种静态依赖的模块化方案，模块与模块之间的依赖关系是在编译期完成连接的。

//a.js
function add(m,n){
  return m+n;
}
export {add};

// b.js
import {add} from './a.js';
console.log(add(1,2)); //3

参考资料
前端模块化的演变过程