1.為什么模塊化

1.前端邏輯越來越復雜和龐大
2.按邏輯劃分模塊和文件，最終有很多小文件
3.小文件之間有依賴關系，需要手動解決
4.發布的時候，需要打包成一個文件，加速下載性能。

需要一個模塊化系統

當前的開發現狀：
通過定義一個立即執行函數：
(function(){})

來封裝模塊。

有一個名字叫：module pattern（模塊模式）

2.當前的模塊化系統

其他語言的模塊方案。
c include
java import
css @import

js的模塊方案。
開始的時候，js比較簡單（很多幾十幾百行的小文件）沒有考慮模塊系統。

1.Commonjs

后來commonjs小組制定了一個commonjs規范。
node 就是遵循的這個規范。
這個規范，通過 require來加載依賴。通過 exports來導出模塊。

缺點：
cjs運行在node里面，很好。但是前端天生異步，cjs不能很好的運行在前端瀏覽器。
如果想運行，需要一些處理。后端的或前端的。
例如前端：ajax請求cjs模塊，然后，正則匹配模塊依賴，解決依賴。增加了前端程序員的工作量。

2.AMD

xhr
ajax獲取腳本內容，然后正則查找依賴，然后eval執行腳本。

缺點：
ajax不能跨域
eval盡量少用

可以利用worker 提升性能。

document.write

優點：
可以跨域
缺點：
不能再文檔加載完成的時候，調用：這個時候一調用會把文檔清空。

另外他會阻塞頁面渲染。

head.appendChild

var script = document.createElement('script');
script.src = '地址';
document.head.appendChild(script)

這種方式需要配合函數包裝來實現。

 define(moduleName,[依賴列表],function(dep){
 //參數是依賴列表的值，
 //返回的是模塊的定義。
 return {}
 }) 

AMD的用法
一種是

 define(moduleName,[dep1,dep2],function(dep1,dep2){
 //參數是依賴列表的值，
 //返回的是模塊的定義。
 return {}
 }) 

這種方式當依賴特別多的時候，參數和依賴的關系很難對應。

另外一種：

 define(function(){
 var dep1 = require('dep1')
     var dep2 = require('dep2')
 //返回的是模塊的定義。
 return {}
 }) 

他有一個名字叫 simpled commonjs（簡化的cjs）。
這種方式的依賴搜集是通過 Function.prototype.toString.toString 把函數的定義返回來，然后正則匹配。

3.技術細節點

eval
eval對scope的影響。
非直接調用會影響全局變量。（global.eval,或者是 e = eval,e()）

document.write
當文檔關閉的時候，
調用 write相當于調用 document.open().document.write();

Function.prototype.toString
可以通過他拿到函數的定義。

4.模塊化的方案

commonjs
用在node環境
amd
用在瀏覽器環境
es6 module
以后的標準。