一、 CMD

1、基本介紹
SeaJS 是一個適用於 Web 瀏覽器端的模組載入器。使用 SeaJS，可以更好地組織 JavaScript 程式碼。
2、實現庫：seajs 1.3.1
Sea.js 手冊與文件

二、基礎語法：

1、模組定義
define
使用全域性函式 define 來定義模組：

define(function(require, exports, module) {
  // The module code goes here  
});

require 函式用來訪問其他模組提供的 API.
exports 用來向外提供模組的 API.
module

引數儲存模組的元資訊。
module.exports：
exports 物件由模組系統建立，這不能滿足開發者的所有需求， 有時候會希望 exports 是某個類的例項。 這時可用 module.exports 來實現：

define(function(require, exports, module) {

   function common(){
      return "common";
   }

   // 對外提供介面
   //exports =common;
   module.exports = common;
})

2、如何依賴模組

//require函式的返回值：define中的module
 
.exports
var common =  require('./common/common.js');

3、頁面中載入模組

3.1、引用SeaJa庫

<script src="https://cdn.bootcss.com/seajs/1.3.1/sea.min.js" type="text/javascript" charset="utf-8"></script>

3.2 使用模組

seajs.use(['./js/damu.js', './js/hsp.js'], function(damu, hsp) {
  damu.B();
  hsp.B();
});

3.3載入模組

載入單個入口模組
載入多個入口模組

 /* 載入單個入口模組
        * 注意：同時載入多個模組時，順序無法控制
        * */
        /* seajs.use('./js/damu.js',function(damu){
            damu.A();
         })

         seajs.use('./js/hsp.js',function(hsp){
            hsp.A();
         })*/
        /* 載入多個入口模組
        注意：可以控制順序
         */
         seajs.use(['./js/damu.js', './js/hsp.js'], function(damu, hsp) {
           damu.B();
           hsp.B();
         });

三、案例：

index.html

    <script src="https://cdn.bootcss.com/seajs/1.3.1/sea.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        /* 載入單個入口模組
        * 注意：同時載入多個模組時，順序無法控制
        * */
        /* seajs.use('./js/damu.js',function(damu){
            damu.A();
         })

         seajs.use('./js/hsp.js',function(hsp){
            hsp.A();
         })*/
        /* 載入多個入口模組
        注意：可以控制順序
         */
         seajs.use(['./js/damu.js', './js/hsp.js'], function(damu, hsp) {
           damu.B();
           hsp.B();
         });
</script>

common.js

define(function(require, exports, module) {

    function common(){
        return "common";
    }

    // 對外提供介面
    //exports =common;
    module.exports = common;
})

damu.js

define(function(require, exports, module) {

    function A(){
        //require函式的返回值：define中的module.exports
        var common =  require('./common/common.js');
        console.log("A from damu&"+ common());
    }

    function B(){
        var common =  require('./common/common.js');
        console.log("B from damu&"+ common());
    }

    function C(){
        var common =  require('./common/common.js');
        console.log("C from damu&"+ common());
    }

    exports.A =A;
    exports.B =B;
    exports.C =C
    /*
     * 天坑！！！
     * exports = {
        A:A,
        B:B,
        C:C
    }*/
    /*module.exports = {
        A:A,
        B:B,
        C:C
    }*/
})

hsp.js

define(function(require, exports, module) {

    function A(){
        //require函式的返回值：define中的module.exports
        var common =  require('./common/common.js');
        console.log("A from hsp&"+ common());
    }

    function B(){
        var common =  require('./common/common.js');
        console.log("B from hsp&"+ common());
    }

    function C(){
        var common =  require('./common/common.js');
        console.log("C from hsp&"+ common());
    }

    module.exports = {
        A:A,
        B:B,
        C:C
    }
})

tg.js

define(function(require, exports, module) {

    function A(){
        //require函式的返回值：define中的module.exports
        var common =  require('./common/common.js');
        console.log("A from tg&"+ common());
    }

    function B(){
        var common =  require('./common/common.js');
        console.log("B from tg&"+ common());
    }

    function C(){
        var common =  require('./common/common.js');
        console.log("C from tg&"+ common());
    }

    module.exports = {
        A:A,
        B:B,
        C:C
    }
})

四、使用細節和注意事項

1、路徑問題：
模組內參照於當前模組；
業務程式碼參照於程式碼的呼叫位置。
如下：
'./js/damu.js' ：./ 參考程式碼執行位置
模組中 require('./common/common.js'); ：./ 參考當前模組

2、天坑：exports和module.exports的區別

• 模組物件永遠是module.exports；
• require函式的返回值：define中的module.exports
• 預設情況下exports和module.exports指向同一個引用。

      向外暴露函式
         module.exports = function(){}
      向外暴露物件
         module.exports = {。。。}
         exports.a=a
         exports.b=b   ./才表示當前路徑