如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
了解一個技術，首先要了解這個技術產生的背景及解決的問題，而不應該只是單純的知道該怎么用。之前的狀態可能就是只是為了了解而了解，并不知道實際產生的原因及帶來的好處，所以今天就來總結一下。
1. 什么是模塊化編程
來看百度百科的定義
模塊化程序設計是指在進行程序設計時將一個大程序按照功能劃分為若干小程序模塊，每個小程序模塊完成一個確定的功能，并在這些模塊之間建立必要的聯系，通過模塊的互相協作完成整個功能的程序設計方法。
比如 java 的 import，C# 的 using。我的理解是通過模塊化編程，可以將不同的功能獨立出來，修改某個功能時不會對其他功能產生影響。
2. 為什么要模塊化
來看下面一個例子
function sayWord(type){ if(type === 1){
console.log("hello");
}else if(type === 2){
console.log("world");
}
} function Hello(){ sayWord(1);
} Hello()
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
假設上面三個文件，B.js 引用了 A.js 里面的內容，C.js 又引用了 B.js 里面的內容，如果編寫 C.js 的人只知道引用了 B.js，那他就不會引用 A.js 就會導致程序出錯，而且文件的引用順序也不能出錯。給整體代碼的調試修改帶來不便。
還有個問題，上述代碼暴露了兩個全局變量，容易造成全局變量的污染
3. AMD
AMD 即 Asynchronous Module Definition（異步模塊定義）。采取異步加載的方式加載模塊，模塊的加載不會影響它后面的語句執行。而且只有用到的時候才會去加載相關文件，屬于瀏覽器端的標準
假設下面這種情況
define(function(){ return {
getFormatDate:function(date,type){ if(type === 1){ return '2018-08-9' } if(type === 2){ return '2018 年 8 月 9 日' }
}
}
}) define(['./util.js'],function(util){ return {
aGetFormatDate:function(date){ return util.getFormatDate(date,2)
}
}
}) define(['./a-util.js'],function(aUtil){ return {
printDate:function(date){ console.log(aUtil.aGetFormatDate(date))
}
}
}) require(['./a.js'],function(a){ var date = new Date()
a.printDate(date)
})
console.log(1);
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
頁面上先打印 1，然后才會打印 2018 年 8 月 9 日。因此 AMD 的加載并不會影響后續的語句執行。
如果不是異步加載會出現什么情況呢
var a = require('a');
console.log(1)
后面的語句需要等待 a 加載完成才能執行，如果加載時間過長，整個程序都會卡在這。因此，瀏覽器不能同步加載資源，這也是 AMD 的產生背景。
AMD 是在瀏覽器端實現模塊化開發的規范。由于該規范不是 JavaScript 原始支持的，使用 AMD 規范進行開發的時候需要引入第三方的庫函數，也就是 RequireJS。
RequireJS 主要解決的問題
-
使 JS 異步加載，避免頁面失去響應
-
管理代碼之間的依賴性，有利于代碼的編寫和維護
下面來看看如何使用 require.js
要想使用 require.js，首先要 define
define(id?, dependencies?, factory);
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) { exports.verb = function() { return beta.verb(); return require("beta").verb();
}
});
一個返回對象的匿名模塊：
define(["alpha"], function (alpha) { return {
verb: function(){ return alpha.verb() + 2;
}
};
});
一個沒有依賴性的模塊可以直接定義對象：
define({
add: function(x, y){ return x + y;
}
});
如何使用
AMD 采用 require 語句加載模塊
require([module],callback);
-
module：是一個數組，里面的成員是要加載的模塊
-
callback：加載成功之后的回調函數
例如
require(['./a.js'],function(a){ var date = new Date()
a.printDate(date)
})
具體的使用方法如下
define(function(){ return {
getFormatDate:function(date,type){ if(type === 1){ return '2018-08-09' } if(type === 2){ return '2018 年 8 月 9 日' }
}
}
}) define(['./util.js'],function(util){ return {
aGetFormatDate:function(date){ return util.getFormatDate(date,2)
}
}
}) define(['./a-util.js'],function(aUtil){ return {
printDate:function(date){ console.log(aUtil.aGetFormatDate(date))
}
}
}) require(['./a.js'],function(a){ var date = new Date()
a.printDate(date)
})
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
假設這里有 4 個文件，util.js，a-util.js 引用了 util.js，a.js 引用了 a-util.js，main.js 引用了 a.js。
其中，data-main 屬性的作用是加載網頁程序的主模塊。
上例演示了一個主模塊最簡單的寫法，默認情況下，require.js 假設依賴和主模塊在同一個目錄。
使用 require.config() 方法可以對模塊的加載行為進行自定義。require.config() 就寫在主模塊（main.js）的頭部，參數是一個對象，這個對象的 paths 屬性指定各個模塊的加載路徑
require.config({
paths:{ "a":"src/a.js", "b":"src/b.js" }
})
還有一種方法是改變基礎目錄（baseUrl）
require.config({
baseUrl: "src",
paths: { "a": "a.js", "b": "b.js",
}
});
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
4. CommonJS
commonJS 是 nodejs 的模塊化規范，現在被大量用在前端，由于構建工具的高度自動化，使得使用 npm 的成本非常低。commonJS 不會異步加載 JS，而是同步一次性加載出來
在 commonJS 中，有一個全局性的方法 require()，用于加載模塊，例如
const util = require('util');
然后，就可以調用 util 提供的方法了
const util = require('util'); var date = new date();
util.getFormatDate(date,1);
commonJS 對于模塊的定義分三種，模塊定義（exports），模塊引用（require）和模塊標示（module）
exports() 對象用于導出當前模塊的變量或方法，唯一的導出口。require() 用來引入外部模塊。module 對象代表模塊本身。
舉個栗子
module.exports = {
getFormatDate:function(date, type){ if(type === 1){ return '2017-06-15' } if(type === 2){ return '2017 年 6 月 15 日' }
}
} const util = require('util.js')
module.exports = {
aGetFormatDate:function(date){ return util.getFormatDate(date,2)
}
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
或者下面這種方式
function foobar(){ this.foo = function(){ console.log('Hello foo');
} this.bar = function(){ console.log('Hello bar');
}
} exports.foobar = foobar; var foobar = require('./foobar').foobar,
test = new foobar();
test.bar();
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
5. ES6 Module
ES6 模塊的設計思想是盡量靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量，而 CommonJS 和 AMD 模塊都只能在運行時確定這些關系。如 CommonJS 加載方式為 “運行時加載”，ES6 的加載方式為 “編譯時加載” 或者靜態加載，即 ES6 可以在編譯時就完成模塊加載，效率比 CommonJS 模塊的加載方式高。
ES6 模塊自動采用嚴格模式，不管有沒有在模塊頭部加上 “use strict”。
ES6 export 語句輸出的接口與其對應的值是動態綁定關系，即通過該接口可以取到模塊內部實時的值。而 CommonJS 模塊輸出的是值的緩存，不存在動態更新。
ES6 與 CommonJS 模塊的差異
-
CommonJS 模塊輸出的是一個值的復制，ES6 模塊輸出的是值的引用。
-
CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。
-
CommonJS 中的 this 指向當前模塊，ES6 模塊 this 為 undefined
第二個差異是因為 CommonJS 加載的是一個對象（即 Module.exports 屬性），該對象只有在腳本運行結束時才會生成，而 ES6 模塊不是對象，它的對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。
總結
CommonJS 采用了服務器優先的策略，使用同步方式加載模塊，而 AMD 采用異步加載的方式。所以如果需要使用異步加載 js 的話建議使用 AMD，而當項目使用了 npm 的情況下建議使用 CommonJS。
藍藍設計( www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
