【魔仙带你梳理对模块化的理解CommonJS/AMD/CMD/ES6】

模块化的理解

js中较成熟的四种模块加载方案 CommonJS AMD CMD ES6

1.CommonJs node独有的规范 浏览器中解析需要用到Browserify 
使用require引入模块 module.exports导入模块

module.exports = {
  a: 1
}
or exports.a = 1
let ex = require('./xx.js')
console.log(ex.a) // 输出 1

2.ES6 使用import导入模块 export导出模块

export default function(){}
import xxx from './xx.js'

export function a(){}
export function b(){}

import {a,b} from './xxx.js'

CommonJS和ES6区别：

1.前者支持动态导入 require('${path}/xx.js') 后者暂不支持 但是已有提案

2.前者同步导入-因为用于服务端，而文件都在本地，即使卡住对主线程影响不大

后者异步导入，因为用于浏览器端，需要去下载文件，如采用同步导入对渲染性能有影响

3.前者采用的是值拷贝，如果导出值改变 不会更新 需要重新导入 才能更新值

后者采用实时绑定 导入导出指向同一个内存地址，导入跟随导出值一起变化

4.后者会被编译成 require/exports

1.AMD 依赖前置，定义模块的时候就要声明依赖，依赖模块加载完成后就要立即执行，
依赖执行顺序和书写顺序不一定一致

define(["./a", "./b"], function(a, b) {
  // 依赖必须一开始就写好
  a.doSomething();
  // 此处略去 100 行
  b.doSomething();
  // ...
})

2.CMD 就近依赖，用到才去require导入，会预先加载好所有的依赖，但是只是下载，
不执行，要等所有依赖完成下载后，遇到require再去执行相应的模块，与书写顺序一致

define(function(require, exports, module) {
  var a = require("./a");
  a.doSomething();
  // 此处略去 100 行
  var b = require("./b"); // 依赖可以就近书写
  b.doSomething();
  // ...
});

模块化开发理解：实现一个特定功能的一组方法