JavaScript模塊化解決方案Sea.js（上）

1.模塊化開發的背景

當你開發的網站越來越大時候，越來越複雜的時候會經常遇到下面的問題：衝突和依賴

moduleOne.js

function dialog(){}//對話框

function drag(){}//拖拽

function panel(){}//面板

<!-- 同事一自定義的庫 -->
<script type="text/javascript" src="moduleOne.js"></script>

<!-- 同事二自定義的庫 -->
<script type="text/javascript">
   /*
      第一個問題：衝突
      這個裏面的方法有可能和同事一庫中的方法重名，進行覆蓋
    */
   function panel(){}

   /*
       怎樣解決這個問題呢？可以在同事一的庫中添加模塊名稱類似於
       moduleOne.panel = function(){}
       同事二可以這樣自定義自己的方法
    */
   moduleTwo.panel = function(){}
   /*
       雖然上述的衝突解決了，但是如果同事多了，項目大了更復雜了
       模塊的命名增加多了，可能是很多層模塊如下所示：
       moduleOne.xxx.yyy.zzz = function(){}
       還有如果有規範還行，如果沒有規範這個問題完全無法想象？

       第二個問題：依賴問題
           這個問題簡直是太讓人崩潰了，親身體驗過才知道....嗚嗚...
           項目我們會約定一些添加約束的規則，但是這些規則有的時候
           還不是很健全。下面是我的組件的順序下面的模塊會依賴上面的
           模塊，但是加入某天需要在panel裏面添加一個新功能，發現
           下面的模塊依賴出問題了，你需要去各個頁面裏面去修改依賴
           文件的順序，很無語啊......
    */
</script>

<script src="dialog.js"></script>
<script src="panel.js"></script>
<script src="drag.js"></script>

通過上面的代碼我們就可以發現業務複雜了，代碼多了，就需要模塊化的框架來管理我們的代碼。Sea.js是一個非常好的解決方案。
moduleTwo.js

var needStr = 'Sea js need load this module!!!';

moduleOne.js

/**
   Sea.js中define方法中的三個參數是不允許修改的
   這個請注意
       require:模塊加載函數，用於加載依賴模塊
       exports:對外接口，將模塊內的數據向外提供訪問的入口
       module:模塊的元函數
*/
define(function(require,exports,module){

   /*
       假如現在moduleOne需要依賴moduleTwo模塊，如何加載呢?
           可以使用require方法進行加載moduleTwo模塊，其中require
           方法加載模塊後返回的就是exports向外界暴露的接口
    */
   var exInterface = require('./moduleTwo.js');


   //自定義函數
   function panel(){
       alert('This is a Panel!!!');

       //需要訪問moduleTwo中的數據，兩者之間產生依賴關係
       alert(needStr);
   }

   //將方法向外提供接口，以供外部訪問
   exports.panel = panel ;
});

<!-- 導入Sea.js的類庫-->
<script src="script/sea.js"></script>
<script type="text/javascript">
    /*
        在模塊中用define方法定義了函數，如何在外部使用呢？
        其中use方法中的回調函數中的ex參數表示define方法中
        向外提供的訪問接口
     */
    seajs.use('./script/moduleOne.js',function(ex){
        alert("Callback Runnning!!!");

        ex.panel();
    });

    function panel(){
        alert("Define Panel!");
    }
    panel();
</script>

上面講了模塊化開發的背景和常見的兩種問題種類，拋出了問題。然後用Sea.js解決這個簡單的模塊化問題。後面還會降到如何用Sea.js結合Grunt JS構建工具，構建現實中線下開發和線上開發的過程。