# 模塊化
之前有提到過模塊化是僅從`js`層面來分析和解決問題的。
## 無模塊時代
在ajax還未提出之前，js還只是一種“玩具語言”，由[`Brendan Eich`](https://baike.baidu.com/item/Brendan%20Eich)花了不到十天時間發明，用來在網頁上進行表單校驗、實現簡單的動畫效果等等，你可以回想一下那個網頁上到處有公告塊飄來飄去的時代。
這個時候并沒有前端工程師，服務端工程師只需在頁面上隨便寫寫js就能搞定需求。那個時候的前端代碼大概像這樣，代碼簡單的堆在一起，只要能從上往下依次執行就可以了。
```
var a = 1;
if(xx){
//.......
}
else{
//xxxxxxxxxxx
}
for(var i=0; i<10; i++){
//........
}
element.onclick = function(){
//.......
}
```
## 模塊萌芽時代（了解）
2006年，ajax的概念被提出，前端擁有了主動向服務端發送請求并操作返回數據的能力，隨著Google將此概念的發揚光大，傳統的網頁慢慢的向“富客戶端”發展。前端的業務邏輯越來越多，代碼也越來越多，于是一些問題就暴漏了出來：
### 全局變量的災難
1. 小明定義了 i=1
2. 小剛在后續的代碼里：i=0
3. 小明在接下來的代碼里：if(i==1){...} //悲劇
### 函數命名沖突
>[success] 項目中通常會把一些通用的函數封裝成一個文件，常見的名字有utils.js、common.js...
1. 小明定義了一個函數：function formatData(){ ? }
2. 小剛想實現類似功能，于是這么寫：function formatData2(){ ? }
3. 小光又有一個類似功能，于是：function formatData3(){ ? }
### 依賴關系不好管理
>[success] b.js依賴a.js，標簽的書寫順序必須是
```
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
```
順序不能錯，也不能漏寫某個。在多人開發的時候很難協調。
## 模塊化需要解決的問題
從以上的嘗試中，可以歸納出js模塊化需要解決那些問題：
1\. 如何安全的包裝一個模塊的代碼？（不污染模塊外的任何代碼）
2\. 如何唯一標識一個模塊？
3\. 如何優雅的把模塊的API暴漏出去？（不能增加全局變量）
4\. 如何方便的使用所依賴的模塊？
圍繞著這些問題，js模塊化開始了一段艱苦而曲折的征途。
