模組化開發之sea.js實現原理總結

標籤：style   blog   http   color   使用   strong   

seajs官網說：seajs是一個模組載入器，所以學習它並不難。

在我的理解就是：本來我們是需要手動建立 script標籤 引入 js檔案的，但用seajs後，它就自動幫我們完成這些工作。

 

 這裡只說實現原理，具體使用請看seajs官網：http://seajs.org/docs/

下面總結一下：

1. sea.js 是怎樣解決 模組載入(這裡說的模組其實就是js檔案載入)，

2. sea.js 是怎樣解決 模組依賴

3. sea.js 是怎樣解決 命名衝突

 

1.模組載入

　　其實，原理很簡單，和手動引入js檔案是一樣的。

　　就是當調用有載入功能的函數 如 seajs.use 、 require 、require.async 時，

　　其內部代碼會建立一個script標籤，把src設定成你要引入的js檔案，然後append到DOM文檔中進行載入，

　　當載入完畢後，再把這個script標籤移除掉，所以當我們審查元素時看不到有那個<script>標籤，

　　但因為檔案已經引入了，即使把這個script移除也不會影響代碼使用.

　　我們可以用360衛士限制網速的功能，把網速降低，然後引入jq,是可以看到它就是這樣處理的

　　

載入完畢後，sea.js會把這個script標籤移除：

總的一句 ： 就是利用 script 標籤進行模組載入

 

2.模組依賴

　　上面的問題清楚了，其實這個依賴也很簡單啦，也就是 載入 順序的問題。

　　例如 a.js 依賴於 b.js， 那在sea.js內部代碼中，就先載入b.js然後再載入a.js，這樣就可以解決依賴問題了。

 

3.命名衝突

　　解決了上面的兩個問題，就剩下依賴介面的問題了， 就是模組的依賴是搞定了，但是sea.js是用define( fn )函數來定義模組的，裡面的變數都是局部的，

　　得給外面一個介面調用才行啊。

　　so,  exports對象就出場啦， 當你使用sea.js定義一個模組的時候，你可以把你的 對外函數介面 都放在exports對象上，　　如： 

1 define(function (require, exports, module){2     var arr = [12,3,4,5,56];3     var method = function (){ 4         //code...5      }6     exports.arr = arr;   //對外介面7     exports.method = method;  //對外介面8 })

當別一個檔案要依賴此檔案時， 調用 require( url )時，傳回值就是這個exports對象，所以就解決了介面的問題。

同時也很好的解決了命名衝突的問題，就算幾個同事都用一樣的名字，也不會有問題。

因為這裡返回的exports就相當於一個命名空間了。

 

 

如有錯誤，請指正，歡迎拍磚！