前端模塊化 | 解讀JS模塊化開發中的 require、import 和 export

本篇分為兩個部分
　第一部分：總結了ES6出現之前，在當時現有的運行環境中，實現"模塊"的方式；
　第二部分：總結了ES6出現后，module成為ES6標准，客戶端實現模塊化的解決方案；

一、require時代

Javascript社區做了很多努力，在當時現有的運行環境中，實現了“模塊”的效果

原始寫法:

模塊就是實現特定功能的一組方法。
只要把不同的函數（以及記錄狀態的變量）簡單地放在一起，就算是一個模塊。

function m1(){
　//...
}
function m2(){
　//...　　
}

　　上面的函數m1()和m2()，組成一個模塊。使用的時候，直接調用就行了。
　　這種做法的缺點很明顯："污染"了全局變量，無法保證不與其他模塊發生變量名沖突，而且模塊成員之間看不出直接關系。

對象寫法：

　　為了解決上面的缺點，可以把模塊寫成一個對象，所有的模塊成員都放到這個對象里面

var module1 = new Object({
　_count : 0,
　m1 : function (){
　　//...
　},
　m2 : function (){
　　//...
　}
});

　　上面的函數m1()和m2()，都封裝在 module1 對象里。使用的時候，就是調用這個對象的屬性

module1.m1();

　　這樣的寫法會暴露所有模塊成員，內部狀態可以被外部改寫。比如，外部代碼可以直接改變內部計數器的值。

module._count = 1;

立即執行函數寫法:

　　使用"立即執行函數"（Immediately-Invoked Function Expression，IIFE），可以達到不暴露私有成員的目的

var module = (function() {
var _count = 0;
var m1 = function() {
alert(_count)
}
var m2 = function() {
alert(_count + 1)
}
return {
m1: m1,
m2: m2
}
})();

　　使用上面的寫法，外部代碼無法讀取內部的_count變量。console.info(module._count); //undefined     

　　module就是Javascript模塊的基本寫法。

主流模塊規范

　　在es6以前，還沒有提出一套官方的規范,從社區和框架推廣程度而言, 通行的javascript模塊規范有兩種：CommonJS 和 AMD

1.1 CommonJS 規范:

　　2009年，美國程序員Ryan Dahl創造了node.js項目，將javascript語言用於服務器端編程。這標志着"Javascript模塊化編程"正式誕生。前端(客戶端)的復雜程度有限，沒有模塊也是可以的，但是在服務器端，一定要有模塊，與操作系統和其他應用程序互動，否則根本沒法編程。

　　node編程中最重要的思想之一就是模塊，而正是這個思想，讓JavaScript的大規模工程成為可能。模塊化編程在js界流行，也是基於此，隨后在瀏覽器端，requirejs和seajs之類的工具包也出現了，可以說在對應規范下，require統治了ES6之前的所有模塊化編程，即使現在，在ES6 module被完全實現之前，還是這樣。

　　在CommonJS中，暴露模塊使用module.exports和exports，很多人不明白暴露對象為什么會有兩個,后面會介紹區別

　　在CommonJS中，有一個全局性方法require()，用於加載模塊。假定有一個數學模塊math.js，就可以像下面這樣加載。

var math = require('math');

　　然后，就可以調用模塊提供的方法：

var math = require('math');
math.add(2,3); // 5

　　正是由於CommonJS 使用的require方式的推動，才有了后面的AMD、CMD 也采用的require方式來引用模塊的風格

AMD規范：

　　有了服務器端模塊以后，很自然地，大家就想要客戶端模塊。而且最好兩者能夠兼容，一個模塊不用修改，在服務器和瀏覽器都可以運行。
　　但是，由於一個重大的局限，使得CommonJS規范不適用於瀏覽器環境。如果在瀏覽器中運行，會有一個很大的問題

var math = require('math');
math.add(2, 3);

　　第二行math.add(2, 3)，在第一行require(‘math’)之后運行，因此必須等math.js加載完成。也就是說，如果加載時間很長，整個應用就會停在那里等。這對服務器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。但是，對於客戶端瀏覽器，這卻是一個大問題，因為模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於“假死”狀態。因此，瀏覽器端的模塊，不能采用“同步加載”（synchronous），只能采用”異步加載”（asynchronous）。這就是AMD規范誕生的背景。

　　AMD是“Asynchronous Module Definition”的縮寫，意思就是”異步模塊定義”。

　　它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。
　　模塊必須采用特定的define()函數來定義。

define(id?, dependencies?, factory)

　　id:字符串，模塊名稱(可選)  dependencies: 是我們要載入的依賴模塊(可選)，使用相對路徑。注意是數組格式   factory: 工廠方法，返回一個模塊函數

　　如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。

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

　　如果這個模塊還依賴其他模塊，那么define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。

define(['Lib'], function(Lib){
　　function foo(){
　　　　Lib.doSomething();
　　}
　　return {
　　　　foo : foo
　　};
});

　　當require()函數加載上面這個模塊的時候，就會先加載Lib.js文件。AMD也采用require()語句加載模塊，但是不同於CommonJS，

　　它要求兩個參數：require([module], callback);

　　第一個參數[module]，是一個數組，里面的成員就是要加載的模塊；第二個參數callback，則是加載成功之后的回調函數。

　　如果將前面的代碼改寫成AMD形式，就是下面這樣：

require(['math'], function (math) {
　math.add(2, 3);
});

　　math.add()與math模塊加載不是同步的，瀏覽器不會發生假死。所以很顯然，AMD比較適合瀏覽器環境。目前，主要有兩個Javascript庫實現了AMD規范：require.js和curl.js。

CMD規范：
　　CMD (Common Module Definition), 是seajs推崇的規范，CMD則是依賴就近，用的時候再require。它寫起來是這樣的：

define(function(require, exports, module) {
    var clock = require('clock');
    clock.start();
});

　　CMD與AMD一樣，也是采用特定的define()函數來定義,用require方式來引用模塊

　　define(id?, dependencies?, factory)
　　　　id:字符串，模塊名稱(可選)
　　dependencies: 是我們要載入的依賴模塊(可選)，使用相對路徑。,注意是數組格式
　　factory: 工廠方法，返回一個模塊函數

define('hello', ['jquery'], function(require, exports, module) {
　　// 模塊代碼
});

　　如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。

define(function(require, exports, module) {
// 模塊代碼
});

　　注意：帶 id 和 dependencies 參數的 define 用法不屬於 CMD 規范，而屬於 Modules/Transport 規范。

CMD與AMD區別

　　AMD和CMD最大的區別是對依賴模塊的執行時機處理不同，而不是加載的時機或者方式不同，二者皆為異步加載模塊；AMD依賴前置，js可以方便知道依賴模塊是誰，立即加載；而CMD就近依賴，需要使用把模塊變為字符串解析一遍才知道依賴了那些模塊，這也是很多人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模塊用的時間短到可以忽略。