一、理解 1、什麼是模塊、模塊化？ 將一個複雜的程式依據一定的規範封裝成幾個文件，併進行組合在一起 2、為什麼要模塊化？ 降低複雜度，提高解耦性，部署方便 3、模塊化的好處 避免命名衝突（減少命名空間污染） 更好的分離，按需載入 更高復用性 高可維護性 4、頁面引入載入script 二、模塊化規範 ...
一、理解
1、什麼是模塊、模塊化？
將一個複雜的程式依據一定的規範封裝成幾個文件，併進行組合在一起
2、為什麼要模塊化？
降低複雜度，提高解耦性，部署方便
3、模塊化的好處
- 避免命名衝突（減少命名空間污染）
- 更好的分離，按需載入
- 更高復用性
- 高可維護性
4、頁面引入載入script
二、模塊化規範
1、CommonJS（node根據該規範編寫）
說明：
每一個文件都可以當做一個模塊
在伺服器端：模塊的載入 是運行時同步載入的
在瀏覽器端：模塊需要提前編譯打包處理
基本語法：
模塊引入：require（xxx）
第三方模塊：xxx為模塊名
自定義模塊：xxx為模塊文件路徑
暴露模塊：exports.xxx = value 和 module.exports = value
暴露的模塊 本質是 exports 對象
exports本身是一個空對象 exports.xxx = value是給exports對象添加屬性或方法
module.exports = value 是直接用value新對象來覆蓋原來的空對象
實現：
伺服器端實現：Node.js
瀏覽器端實現：Browserify （CommonJS的瀏覽器端的打包工具）
下載安裝browserify
全局：npm install browserify -g
局部：npm install browserify --save-dev
定義模塊代碼（js文件代碼 並暴露相應內容）
引入模塊 在app.js 中用require引入模塊 但是瀏覽器不認識require方法，需要打包處理js
在根目錄下 終端輸入 browserify js/src/app.js -o js/dist/bundle.js （js/src/app.js源文件 js/dist/bundle.js 是打包輸出的文件）
頁面使用引入：
<script type="text/javascript" src="js/dist/bundle.js"></script> （瀏覽器真正跑的是打包生成的文件）
2、AMD
說明：
專門用於瀏覽器端的模塊化規範，模塊的載入是非同步的
基本語法：
定義暴露模塊：
//定義沒有依賴的模塊：
define(function(){
return 模塊
})
//定義有依賴的模塊：
define(['module1','module2'],function(m1,m2){
return 模塊
})
引入使用模塊：
require(['module1','module2'],function(m1,m2){
使用m1/m2
})
實現（瀏覽器端）：
Require.js
3、CMD（瞭解）
說明：專門用於瀏覽器端，模塊的載入是非同步的，模塊使用時才會載入執行
基本語法：
定義暴露模塊：
//定義沒有依賴的模塊：
define(function(require,exports,module){
exports.xxx = value
module.exports = value
})
//定義有依賴的模塊：
define(function(require,exports,module){
//引入依賴模塊(同步)
var module2 = require("./module2")
//引入依賴模塊（非同步）
require.async("./module3",function(m3){
})
//暴露模塊
exports.xxx = value
})
引入使用模塊：
require(function(require){
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
實現（瀏覽器端）：Sea.js
4、ES6
說明：依賴模塊需要編譯打包處理
語法：
導出模塊：export xxx
引入模塊：import xxx from "url"
頁面引入
實現（瀏覽器端）：
使用Babel將ES6編譯為ES5代碼
使用Browserify編譯打包js
