一、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（服務端的模塊化、同步加載）
什么是CommonJS？
CommonJS API定義許多普通應用程序（主要指非瀏覽器的應用）使用的API，在兼容CommonJS的環(huán)境下，可以使用JavaScript開發(fā)以下程序：
- 服務器端JavaScript應用程序
- 命令行工具
- 圖形界面應用程序
- 混合應用程序（如，Titanium或Adobe AIR）
CommonJS與NodeJS的關系：
NodeJS是CommonJS規(guī)范的實現(xiàn)
CommonJS用法：
CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}
require()用來引入外部模塊；exports對象用于導出當前模塊的方法或變量，唯一的導出口；module對象就代表模塊本身。
Browserify 是目前最常用的 CommonJS 格式轉換的工具，使用Browserify轉化過后，就可以直接在瀏覽器中調用。
// foo.js
module.exports = function(x) {
console.log(x);
};
// main.js
var foo = require("./foo");
foo("Hi");
使用下面的命令，就能將main.js轉為瀏覽器可用的格式。
$ 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定義的模塊可以被其它模塊調用，require不行。define和require不一樣的地方是define的回調函數(shù)需要有return語句返回模塊對象，這樣define定義的模塊才能被其他模塊引用；require的回調函數(shù)沒有return語句，所以不能被其他模塊調用。
目前，主要有兩個Javascript庫實現(xiàn)了AMD規(guī)范：require.js和curl.js
require.js的誕生，就是為了解決兩個問題：
（1）實現(xiàn)js文件的異步加載，避免網(wǎ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轉化成ES5
基本規(guī)則：
- 每一個模塊只加載一次， 每一個JS只執(zhí)行一次， 如果下次再去加載同目錄下同文件，直接從內存中讀取。 一個模塊就是一個單例，或者說就是一個對象；
- 每一個模塊內聲明的變量都是局部變量， 不會污染全局作用域；
- 模塊內部的變量或者函數(shù)可以通過export導出；
- 一個模塊可以導入別的模塊
