曾經的前端模塊化

什麼是模塊化？

將一個系統分離成獨立功能部分的方法，嚴格定義模塊接口，模塊間具備透明性。

爲何要模塊化？

web應用愈來愈複雜，簡單的代碼組織方式已經沒法知足業務的架構需求，須要經過模塊化方式組織代碼。

無模塊時代

1.全局變量氾濫

2.命名衝突

3.依賴關係管理

模塊萌芽時代

當即執行函數（IIFE）

commonjs

node.js的模塊化方式，就是參照CommonJS規範實現的。在CommonJS中，有一個全局性方法require()，用於加載模塊。假定有一個數學模塊math.js，就能夠像下面這樣加載。

var math = require('math');

　 math.add(2,3); // 5

這種同步加載的方式在服務端不存在問題，第二行math.add(2, 3)，在第一行require('math')以後運行，所以必須等math.js加載完成。也就是說，若是加載時間很長，整個應用就會停在那裏等。服務端由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。所以瀏覽器端須要異步加載模塊。

AMD

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

寫法以下：

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

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　// some code here
});

兩個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(); 
});

AMD和CMD最大的區別是對依賴模塊的執行時機處理不一樣，而不是加載的時機或者方式不一樣，兩者皆爲異步加載模塊。

AMD依賴前置，js能夠方便知道依賴模塊是誰，當即加載；而CMD就近依賴，須要使用把模塊變爲字符串解析一遍才知道依賴了那些模塊，這也是不少人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模塊用的時間短到能夠忽略。

現在大部分前端都經過ES6模塊化的語法，再用webpack進行編譯。system.js模塊加載器，提供了通用的模塊導入途徑，支持傳統模塊和ES6寫法。