Layui學習筆記（一）—— 關於模塊的擴展

 在使用layui的時候，總有官方自帶模塊不夠用想自己擴展的時候，這時候我們就需要擴展模塊了。

模塊擴展有兩種：

　　（一）普通地擴展

layui.define( function (exports) {

});

　　（二）依賴其他模塊擴展

layui.define( [ 'xxx', 'xxx', 'xxx' ], function (exports) {　　
      // xxx代表其他模塊的名稱，例如 'jquery', 'layer'
});    

 

當我們想定義模塊中的方法時，可以使用以下代碼：

var object = {
     f1 : function (obj) {    //方法1
         ...
     }
     , f2 : function (obj) {    //方法2
         ...
     }
};

在結束的時候需要加上：

//exports('key', value); 
//key是該擴展模塊的名字，模塊名必須和layui.use時的模塊名一致
//通過layui.key來獲取該模塊，例：var func = layui.key;
//value須與該模塊內定義的對象名一致，此處為object
exports('key', object);  //輸出接口

做完以上步驟后就可以在別的JS文件中使用了，

 

使用時輸入以下代碼：

layui.config({
    base: '...'    //設置模塊的根目錄
}).extend({
    key : 'xx'    //當擴展的模塊xx.js存放於base設置的根目錄，也可以不用設置別名
    //key: '../../..'    //當擴展模塊xx.js存放於根目錄下的子目錄中時這樣寫
});

layui.use('key', function() {
    var key  = layui.key;    

    ...    //方法內容
});

即可使用擴展模塊中的方法了

 

 

擴展模塊xx.js的完整代碼

/**
 * layui的擴展模塊xx.js
 */

layui.define(function (exports) {
       var object = {
            f1: function (obj) {
                ...
            }
            , f2: function (obj) {
                ...
            }
        };
    exports('key', object);
});