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

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

1、require時代

Javascript社區作了不少努力，在當時現有的運行環境中，實現了「模塊」的效果

原始寫法:

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

1 function m1(){
2 　//...
3 }
4 function m2(){
5 　//...　　
6 }

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

對象寫法：

　　爲了解決上面的缺點，能夠把模塊寫成一個對象，全部的模塊成員都放到這個對象裏面

1 var module1 = new Object({
2 　_count : 0,
3 　m1 : function (){
4 　　//...
5 　},
6 　m2 : function (){
7 　　//...
8 　}
9 });

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

1 module1.m1();

　　這樣的寫法會暴露全部模塊成員，內部狀態能夠被外部改寫。好比，外部代碼能夠直接改變內部計數器的值。

1 module._count = 1;

當即執行函數寫法:

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

 1 var module = (function() {
 2 var _count = 0;
 3 var m1 = function() {
 4 alert(_count)
 5 }
 6 var m2 = function() {
 7 alert(_count + 1)
 8 }
 9 return {
10 m1: m1,
11 m2: m2
12 }
13 })();

　　使用上面的寫法，外部代碼沒法讀取內部的_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，就能夠像下面這樣加載。

1 var math = require('math');

　　而後，就能夠調用模塊提供的方法：

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

　　正是因爲CommonJS 使用的require方式的推進，纔有了後面的AMD、CMD 也採用的require方式來引用模塊的風格

AMD規範：

　　有了服務器端模塊之後，很天然地，你們就想要客戶端模塊。並且最好二者可以兼容，一個模塊不用修改，在服務器和瀏覽器均可以運行。
　　可是，因爲一個重大的侷限，使得CommonJS規範不適用於瀏覽器環境。若是在瀏覽器中運行，會有一個很大的問題

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

　　第二行math.add(2, 3)，在第一行require(‘math’)以後運行，所以必須等math.js加載完成。也就是說，若是加載時間很長，整個應用就會停在那裏等。這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於客戶端瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於「假死」狀態。所以，瀏覽器端的模塊，不能採用「同步加載」（synchronous），只能採用」異步加載」（asynchronous）。這就是AMD規範誕生的背景。

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

　　它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。
　　模塊必須採用特定的define()函數來定義。

1 define(id?, dependencies?, factory)

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

　　若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中。

1      // math.js
2 　　define(function (){
3 　　　　var add = function (x,y){
4 　　　　　　return x+y;
5 　　　　};
6 　　　　return {
7 　　　　　　add: add
8 　　　　};
9 　　});    

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

1 define(['Lib'], function(Lib){
2 　　function foo(){
3 　　　　Lib.doSomething();
4 　　}
5 　　return {
6 　　　　foo : foo
7 　　};
8 });

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

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

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

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

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

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

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

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

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

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

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

　　若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中。

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

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

CMD與AMD區別

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