CommonJS, AMD, CMD, ES Module

时间轴：CommonJS --> AMD --> CMD --> ES Module

CommonJS

• Commonly used for: 服务器端 , node , webpack
• Features: 同步/运行时加载 , 磁盘读取速度快

• grammar:

   // 1. 导出：通过module.exports或exports来暴露模块
  module.exports = {
    attr1,
    attr2
  }
  exports.attr = xx
  
  **注意**
  不可以 exports = xxx，这样写会无效，因为更改了exports的地址
  而 exports 是 module.exports 的引用指向的是同一个内存，模块最后导出的是module.exports
  
  // 2. 引用：require('x')
  
  const xx = require('xx') // 整体重命名
  const { attr } = require('xx') // 解构某一个导出

AMD

• Commonly used: not commonly used, CommonJs的浏览器端实现

• Features:

  • 异步加载 : Because it faces the browser side, it must be loaded asynchronously in order not to affect the rendering
  • 依赖前置 : all dependencies must be written in the initial dependency array, fast, but wastes resources, preloads all dependencies whether you use them or not

• grammar:

   // 1. 导出：通过define来定义模块
  // 如果该模块还依赖其他模块，则将模块的路径填入第一个参数的数组中
  
  define(['x'], function(x){  
    function foo(){  
        return x.fn() + 1  
    }  
    return {    
        foo: foo  
    };
  });
  
  // 2. 引用
  require(['a'], function (a){
    a.foo()
  });

CMD

• Commonly used: not commonly used, 根据CommonJs和AMD实现，优化了加载方式

• Features:

  • 异步加载
  • 按需加载/依赖就近 : Re-reference dependencies are used, which is convenient for development. The disadvantage is that the speed and performance are poor

• grammar:

   // 1. 导出：通过define来定义模块
  // 如果该模块还依赖其他模块，在用到的地方引用即可
  
  define(function(){  
    function foo(){        
        var x = require('x')
        return x.fn() + 1  
    }  
    return {    
        foo: foo  
    };
  });
  
  // 2. 引用
  var x = require('a');
  a.foo();

ES module

• Commonly used for: 目前浏览器端的默认标准
• Features: 静态编译： The dependencies, as well as input and output variables can be determined at compile time

• grammar:

   // 1. 导出：通过export 或 export default 输出模块
  写法1: 边声明，边导出
  export var m = 1;
  export function m() {};
  export class M {};
  
  写法2：导出一个接口 export {}，形似导出对象但不是, 本质上是引用集合，最常用的导出方法
  export {
    attr1,
    attr2
  }
  
  写法3：默认导出 
  export default fn
  
  // 2. 引用
  import { x } from 'test.js' // 导出模块中对应的值，必须知道值在模块中导出时的名字
  import { x as myx } from 'test.js' // 改名字
  import x from 'test.js' // 默认导出的引用方式

   **注意**
   1. export default在同一个文件中只可存在一个（一个模块只能有一个默认输出）
   2. 一个模块中可以同时使用export default 和 export
    // 模块 test.jsvar info = {
        name: 'name',
        age: 18
    }
    export default info
    export var name= '海洋饼干'
    export var age = 18
  
    // 引用
    import person, {name, age as myAge} from 'test.js'
    console.log(person); // { name: 'name', age: 18 }
    console.log(name+ '=' + myAge); // 海洋饼干==18