CommonJS,AMD,CMD,ES6,require 和 import 详解

CommonJS,AMD,CMD,ES6

commonJS用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取很是快，因此这样作不会有问题。可是在浏览器端，限于网络缘由，更合理的方案是使用异步加载。

CMD是另外一种js模块化方案，它与AMD很相似，不一样点在于：AMD 推崇依赖前置、提早执行，CMD推崇依赖就近、延迟执行。此规范实际上是在sea.js推广过程当中产生的。

/** AMD写法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
     // 等于在最前面声明并初始化了要用到的全部模块
    a.doSomething();
    if (false) {
        // 即使没用到某个模块 b，但 b 仍是提早执行了
        b.doSomething()
    } 
});
复制代码

/** CMD写法 **/
define(function(require, exports, module) {
    var a = require('./a'); //在须要时申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
}); 
复制代码

ES6 模块是动态引用:ES6的模块不是对象，import命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，因此没法实现条件加载。也正由于这个，使得静态分析成为可能。

ES6 模块与 CommonJS 模块的差别

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用

CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

ES6 模块的运行机制与 CommonJS 不同。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像 Unix 系统的“符号链接”，原始值变了，import加载的值也会跟着变。所以，ES6 模块是动态引用，而且不会缓存值，模块里面的变量绑定其所在的模块。 2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。 3. 运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个对象，而后再从这个对象上面读取方法，这种加载称为“运行时加载”。 编译时加载: ES6模块不是对象，而是经过 export 命令显式指定输出的代码，import时采用静态命令的形式。即在import时能够指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”。 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

---

前言

JS模块化编程是前端小伙伴们必不可少的知识，下面妹子将于自认为比较清晰的方式列举出来。

1 require

特色：

• 1.运行时加载
• 2.拷贝到本页面
• 3.所有引入

1.1 CommonJS

Node.js就是用CommonJS思想。 在CommonJS中，有一个全局性方法require()，用于加载模块。

1.1.1 用法

var math = require('math');
math.add(2, 3);
复制代码

var math = require('math');
constMath = new math(2, 3)
Math.add();
复制代码
复制代码

1.1.2 模块写法

模块写法分exports和module.exports。

exports.add = (x,y) => x+y;
复制代码

module.exports = classmath{
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return  x+y;
  }
};
复制代码
复制代码

1.2 AMD

require.js和cujo.js就是用AMD思想。

AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行。

第二行math.add(2, 3)，在第一行require(‘math’)以后运行，所以必须等math.js加载完成。也就是说，若是加载时间很长，整个应用就会停在那里等。 这对服务器端不是一个问题，由于全部的模块都存放在本地硬盘，能够同步加载完成，等待时间就是硬盘的读取时间。可是，对于浏览器，这倒是一个大问题，由于模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于”假死”状态。 所以，浏览器端的模块，不能采用”同步加载”（synchronous），只能采用”异步加载”（asynchronous）。这就是AMD规范诞生的背景。

1.2.1 用法

//require([module], callback);require(['math'], function (math) {
 math.add(2, 3);
});
复制代码
复制代码

1.2.1 模块写法

define(id?, dependencies?, factory)

• id:字符串，模块名称(可选)
• dependencies: 是咱们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式
• factory: 工厂方法，返回一个模块函数

一个模块不依赖其余模块写法

// math.js
define(function (){
    var add = function (x,y){
        return x+y;
    };
    return {
        add: add
    };
});
复制代码
复制代码

模块还依赖其余模块

define(['a','b'], function(a,b){
    functionfoo(){
        a.doSomething();// 依赖前置，提早执行
        b.doSomething();
    }
    return {
        foo : foo
    };
});
复制代码
复制代码

当require()函数加载上面这个模块的时候，就会先加载Lib.js文件。

1.3 CMD

sea.js就是用CMD思想。 CMD是"Common Module Definition"的缩写。相似于requirejs，可是seajs是依赖就近，延迟执行，requirejs是依赖前置，提早执行。

1.3.1 用法

seajs.config({
  alias: {
    'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'
  }
});

seajs.use(['./hello', 'jquery'], function(hello, $) {
  $('#beautiful-sea').click(hello.sayHello);
});
复制代码
复制代码

1.3.1 模块写法

define(function(require, exports, module) {
  var $ = require('jquery');

  exports.sayHello = function() {
    $('#hello').toggle('slow');
  };
   var b = require("b");
   b.doSomething();    // 依赖就近，延迟执行
});
复制代码
复制代码

2 import

特色：

• 1.编译时加载
• 2.只引用定义
• 3.按需加载

可对比require的特色，发现import完胜require,推荐用import取代require

2.1.1 用法

import有两种模块导入方式：命名式导入（名称导入）和默认导入（定义式导入），以及 import()。

import defaultMember from"module-name";
import * as name from"module-name";
import { member } from"module-name";
import { member as alias } from"module-name";
import { member1 , member2 } from"module-name";
import { member1 , member2 as alias2 , [...] } from"module-name";
import defaultMember, { member [ , [...] ] } from"module-name";
import defaultMember, * as name from"module-name";
import"module-name";
复制代码
复制代码

• name－从将要导入模块中收到的导出值的名称
• member, memberN－从导出模块，导入指定名称的多个成员
• defaultMember－从导出模块，导入默认导出成员
• alias, aliasN－别名，对指定导入成员进行的重命名
• module-name－要导入的模块。是一个文件名
• as－重命名导入成员名称（“标识符”）
• from－从已经存在的模块、脚本文件等导入

import()

import()返回一个 Promise 对象。

// 报错if (x === 2) {
  import MyModual from'./myModual';
}
复制代码
复制代码

引擎处理import语句是在编译时，这时不会去分析或执行if语句，因此import语句放在if代码块之中毫无心义，所以会报句法错误，而不是执行时错误。没办法像require样根据条件动态加载。 因而提案引入import()函数，编译时分析if语句,完成动态加载。

if(x === 2){
  import('myModual').then((MyModual)=>{
    new MyModual();
  })
}
复制代码
复制代码

2.2.1 模块写法

export有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每一个模块能够多个，而默认导出每一个模块仅一个。

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
exportlet name1, name2, …, nameN; // also varexportlet name1 = …, name2 = …, …, nameN; // also var, constexportdefault expression;
exportdefaultfunction (…) { … } // also class, function*exportdefaultfunctionname1(…) { … } // also class, function*export { name1 asdefault, … };
 
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
复制代码
复制代码

• name1… nameN－导出的“标识符”。导出后，能够经过这个“标识符”在另外一个模块中使用* import引用
• default－设置模块的默认导出。设置后import不经过“标识符”而直接引用默认导入
• －继承模块并导出继承模块全部的方法和属性
• as－重命名导出“标识符”
• from－从已经存在的模块、脚本文件…导出

参考资料

• raoenhui.github.io/es6/2018/12…
• es6.ruanyifeng.com/#docs/modul…
• www.cnblogs.com/liaojie970/…

Happy coding .. :)