前端模块化的演进过程

• CommonJS

  • 服务端模块化规范
  • 通过require方法同步加载依赖模块
  • 通过module.export导出模块

  // 导出
  var num = 0;
  function add(a,b) {
    return a + b;
  }
  module.export = {
    num: num,
    add: add
  }
  
  // 导入
  var math = require('./math');
  math.add(1,2); // 3

  • 缺点：因同步加载模块，受限于网络条件，会阻塞代码加载，在客户端上体验较差

• AMD（require.js）

  • 异步加载模块，不会浏览器加载
  • 依赖相关模块的语句，会在模块加载完成后的回调函数里运行
  • 库函数为require.js，通过define方法定义模块

  // 定义模块
  define('math',['jquery'],function(jquery) { // math依赖jquery模块
    return {
      add: funtion(x,y) {
        return x + y;
      }
    }
  })
  
  // 导入模块
  require(['math'],function(math) {
    math.add(1,2);
  })

• CMD（sea.js）

  • 集CommonJS与AMD所长（正如其名：海纳百川）
  • 使用define定义模块
  • 使用exports导出方法
  • 使用require导入依赖
  • 使用seajs.use使用模块

  // 定义模块，导出属性/方法
  define(function(require,exports,module) {
    var add = function(a,b) {
      return a + b;
    }
    exports.add = add;
  })
  // 导入并使用模块
  seajs.use(['math.js'],function(math) {
    var sum = math.add(1,2)
  })

  AMD vs. CMD
  AMD：依赖前置，提前执行（预执行） --- 定义模块时就要require
  CMD：依赖就近，延迟执行（懒执行） --- 使用模块时才会require

• ES6 Module

  • 语言层面上的模块化，通用的模块化解决方案
  • 使用import导入模块
  • 使用export导出模块
  • 默认导出为export default
  • 导入default时，不需要使用大括号

  // 导出 math.js
  var num = 0;
  var add = function(a,b) {
    return a + b;
  }
  export {num, add}
  
  // 导入 math.js
  import {num, add} from './math'
  function sum(base) {
    return add(num,base)
  }
  
  // 默认导出
  export default function add(a, b) {
    return a + b;
  }
  
  // 导入默认
  import add from './math'
  // 同时导入默认及非默认
  import add, {sub, mul} from './math'
  
  // 复合导出
  export { foo, bar } from 'my_module';
  // 等同于
  import { foo, bar } from 'my_module';
  export { foo, bar };
  
  // 导入改名
  import { myFoo as Foo } from 'my_module'
  // 全部导入
  import * as someIdentifier from "someModule";