JavaScript的四種模塊化規(guī)范

CommonJS規(guī)范
由于ES5沒有模塊化規(guī)范醒叁，所以產(chǎn)生了這三種規(guī)范。在ES6中又新增了一種公用模塊化的方法。

特點：同步

CommonJS規(guī)范是通過module.exports定義的，在前端瀏覽器中并不支持此中規(guī)范

瀏覽器不兼容Common的根本原因也就是缺少四個Node環(huán)境的變量
- module
- exports
- require
- global
Node以及Webpack是采用CommonJS的形式來寫的

CommonJS定義的模塊分為三種：模塊引用(require)系吭；模塊定義(exports)；模塊標(biāo)識(module)

require()用來引入外部模塊颗品，exports對象用于導(dǎo)出當(dāng)前模塊肯尺，或者當(dāng)前的模塊的方法和變量沃缘，module對象代表對象本身
```
var foo = require('foo.js');
var count =1;
var plus = ()=>{
 foo.add(count);
};
module.exports= {
 count,
 plus
}
```
特點

? 對于基本數(shù)據(jù)類型，和語言本身一樣屬于復(fù)制则吟，即會被模塊緩存槐臀，在另一個模塊中可以對該模塊輸出的變量重新賦值。

? 對于復(fù)雜數(shù)據(jù)類型氓仲，例如Array水慨，Object，屬于淺拷貝敬扛，即同時指向一個內(nèi)存空間晰洒，因此對一個模塊的值的改變可以影響另一個模塊。詳見javascript深拷貝與淺拷貝詳解舔哪。

當(dāng)使用require命令加載同一個模塊時欢顷，不會再執(zhí)行該模塊，而是取到緩存之中的值捉蚤。也就是說，CommonJS模塊無論加載多少次炼七，都只會在第一次加載時運行一次缆巧，以后再加載，就返回第一次運行的結(jié)果豌拙，除非手動清除系統(tǒng)緩存陕悬。

循環(huán)加載
```
// a.js
exports.done = false
let b = require('./b.js')
console.log('a.js-1', b.done)
exports.done = true
console.log('a.js-2', '執(zhí)行完畢')

// b.js
exports.done = false
let a = require('./a.js')
console.log('b.js-1', a.done)
exports.done = true
console.log('b.js-2', '執(zhí)行完畢')

// c.js
let a = require('./a.js')
let b = require('./b.js')

console.log('c.js-1', '執(zhí)行完畢', a.done, b.done)
```
運行node c.js
```
usr:~ usr$ node c.js
b.js-1 false
b.js-2 執(zhí)行完畢
a.js-1 true
a.js-2 執(zhí)行完畢
c.js-1 執(zhí)行完畢 true true
```
循環(huán)加載時，commonjs屬于加載時執(zhí)行按傅，即腳本代碼在require時候捉超，就會全部執(zhí)行。一旦出現(xiàn)某個模塊被“循環(huán)加載”唯绍，只輸出已經(jīng)執(zhí)行的部分拼岳，未執(zhí)行的部分不輸出。

上述代碼很明顯的表現(xiàn)出了此類特點

step1: node c.js

step2: require(./a.js) //執(zhí)行完a.js中的內(nèi)容

step2.1: export.done = flase; let b = require(./b.js); // 執(zhí)行b中的代碼

step2.2: export.done = flase; let a= require(./a.js) //由于發(fā)生了循環(huán)加載况芒，所以只執(zhí)行a中的第一句惜纸，然后繼續(xù)執(zhí)行b.js 輸出 <code>b.js-1 false b.js-2執(zhí)行完畢</code>

step2.3: 繼續(xù)執(zhí)行b中的代碼將b.done 賦值為true

step 2.4 : 執(zhí)行a的剩余部分 a.js-1 true; a.js-2 執(zhí)行完畢

step3:require(./b.js) 由于已經(jīng)執(zhí)行過了不會再執(zhí)行b中的代碼所以直接輸出b返回值

step4: 輸出c.js-1 執(zhí)行完畢 true true
AMD規(guī)范
由于CommonJS的局限性例如
```
var math = require('math');

math.add(2,3);
```
第二行代碼必須要在 require之后運行，如果math加載時間很長绝骚，就會陷入空等耐版，整個過程是同步的。

對于服務(wù)器這不是個問題压汪，因為都存儲在本地粪牲，但是對于客戶端，如果由于網(wǎng)絡(luò)原因止剖，可能會陷入“假死”狀態(tài)腺阳。

所以客戶端落君，不能采用同步加載，只能使用異步加載舌狗。

AMD規(guī)范是require.js對模塊化定義的一種規(guī)范化產(chǎn)出

? 模塊本身和模塊之間的引用可以被異步加載

? 先引入模塊后使用模塊的方法叽奥，稱之為依賴前置

優(yōu)點

? 1.包括異步調(diào)用和本身高擴(kuò)展性

? 2.解耦，模塊在代碼中也可以通過識別號進(jìn)行查找
```
define(['./package/lib.js'], function(lib) {
 function say(){
 lib.log('this is fn');
 }
 return {
 say:say
 }; 
});
```
Tips

? lib.js是我們引入的方法痛侍，回調(diào)中l(wèi)ib參數(shù)表示的是引入的模塊的所有方法及屬性

? 我們在當(dāng)前模塊定義了say方法朝氓，并且return say的執(zhí)行結(jié)果

CMD規(guī)范

SeaJs

CMD：同步模塊定義

依賴就近原則

sayHello.js

define(function(require,exports,module){
   //通過require引入依賴，并不是AMD的依賴前置主届，而是依賴就近赵哲，哪里用，哪里引
   //例如下列引入jquery
   var JQ = require('jquery');
   exports.sayHello = function(){
       $('#hello').toggle('slow')
   }
})

main.js

define(function(require){
   var CMD = require('sayHello');
   var temp = new CMD();
   temp.sayHello();
})

ES6模塊化規(guī)范
ES6在語言標(biāo)準(zhǔn)上面實現(xiàn)了模塊功能君丁。設(shè)計思想是盡量的靜態(tài)化枫夺，使得編譯時就能確定模塊的依賴關(guān)系，以及輸入輸出變量绘闷。CommonJS以及AMD都只能在運行時確定

ES6的模塊并不是對象橡庞，而是通過export顯示指定輸出的代碼，再通過import命令導(dǎo)入
```
//commonJs
// CommonJS模塊
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
//創(chuàng)建了一個對象

//ES6
import { stat, exists, readFile } from 'fs';
```
上面代碼的實質(zhì)是從fs模塊加載 3 個方法印蔗，其他方法不加載扒最。這種加載稱為“編譯時加載”或者靜態(tài)加載，即 ES6 可以在編譯時就完成模塊加載华嘹，效率要比 CommonJS 模塊的加載方式高吧趣。當(dāng)然，這也導(dǎo)致了沒法引用 ES6 模塊本身耙厚，因為它不是對象强挫。

export輸出的接口，是變量實時的值薛躬，與commonjs輸出的是值的緩存不相同

export與import要出現(xiàn)在模塊頂層

如果想要重新命名俯渤，需要使用as關(guān)鍵字

也可以引入整個模塊

import * as bb from './xxx'

也可以匿名導(dǎo)出這樣可以給導(dǎo)出的模塊任意指定名字

export default

import anyname from 'xx.js'