一、js模塊化
1浦妄、模塊化規(guī)范：
- script
- CommonJS
- AMD
- CMD
- ES6 modules
2见芹、script（同步加載，瀏覽器端）
<script src="js/index.js"></script>
文件異步加載的script寫法：
<script src="js/require.js" defer async="true" ></script>
defer是為兼容IE阅懦，因為IE不支持async徘铝，只支持defer
同步加載，加載多個文件時瀏覽器會停止網(wǎng)頁渲染
3惕它、CommonJS（服務(wù)端的模塊化、同步加載）
什么是CommonJS郁惜？
CommonJS API定義許多普通應(yīng)用程序（主要指非瀏覽器的應(yīng)用）使用的API甲锡，在兼容CommonJS的環(huán)境下羽戒，可以使用JavaScript開發(fā)以下程序：
- 服務(wù)器端JavaScript應(yīng)用程序
- 命令行工具
- 圖形界面應(yīng)用程序
- 混合應(yīng)用程序（如虎韵，Titanium或Adobe AIR）
CommonJS與NodeJS的關(guān)系：
NodeJS是CommonJS規(guī)范的實現(xiàn)
CommonJS用法：
CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}
require()用來引入外部模塊；exports對象用于導出當前模塊的方法或變量驶社，唯一的導出口养晋；module對象就代表模塊本身。
Browserify 是目前最常用的 CommonJS 格式轉(zhuǎn)換的工具逊抡，使用Browserify轉(zhuǎn)化過后零酪，就可以直接在瀏覽器中調(diào)用。
// foo.js
module.exports = function(x) {
console.log(x);
};
// main.js
var foo = require("./foo");
foo("Hi");
使用下面的命令孝凌，就能將main.js轉(zhuǎn)為瀏覽器可用的格式月腋。
$ browserify main.js > compiled.js
※ webpack也是基于CommonJS規(guī)范實現(xiàn)的
4、AMD（客戶端的模塊化片拍、異步加載）
AMD模塊特定的define()函數(shù)來定義妓肢，采用require()語句加載模塊，但是不同于CommonJS纲缓，它要求兩個參數(shù)：
define(function(){
return ***
});
require([module], callback);
define與require的區(qū)別：
- define定義模塊喊废，require加載使用模塊。
- define定義的模塊可以被其它模塊調(diào)用污筷，require不行。define和require不一樣的地方是define的回調(diào)函數(shù)需要有return語句返回模塊對象耿焊，這樣define定義的模塊才能被其他模塊引用遍搞；require的回調(diào)函數(shù)沒有return語句，所以不能被其他模塊調(diào)用溪猿。
目前，主要有兩個Javascript庫實現(xiàn)了AMD規(guī)范：require.js和curl.js
require.js的誕生诊县，就是為了解決兩個問題：
（1）實現(xiàn)js文件的異步加載依痊，避免網(wǎng)頁失去響應(yīng)；
（2）管理模塊之間的依賴性胸嘁，便于代碼的編寫和維護。
加載非規(guī)范的模塊：
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
5群井、CMD（與AMD很像）
define(function(require,exports,module){...});
seaJS遵循CMD規(guī)范
6书斜、ES6 modules
目前需要使用babel轉(zhuǎn)化成ES5
基本規(guī)則：
- 每一個模塊只加載一次， 每一個JS只執(zhí)行一次荐吉， 如果下次再去加載同目錄下同文件稍坯，直接從內(nèi)存中讀取搓劫。 一個模塊就是一個單例混巧，或者說就是一個對象；
- 每一個模塊內(nèi)聲明的變量都是局部變量咧党， 不會污染全局作用域；
- 模塊內(nèi)部的變量或者函數(shù)可以通過export導出负蠕；
- 一個模塊可以導入別的模塊
