1. 程式人生 > >JS模組化方案(2)之CMD 模組(SeaJS)方案

JS模組化方案(2)之CMD 模組(SeaJS)方案

一、 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   ./才表示當前路徑

這裡寫圖片描述