layui 封裝自定義模塊

轉自：https://lianghongbo.cn/blog/430585105a35948c

layui是國人開發的一款非常簡潔的UI框架，使用了模塊化加載方式，因此在使用過程中我們難免需要添加自己的模塊，本教程就教大家封裝一個簡單的模塊。

平常使用中，ajax可以說使用廣泛，所以這里我們添加一個自己的模塊，將ajax封裝一下，方便使用。

注：模塊加載需要服務器環境支持，因此看本教程前，請先在你本地搭建好本地服務器環境，這個不在本教程范疇內，請自行百度。

 

1、搭建項目目錄

 

首先從layui的網站下載layui的包，放置到自己的項目里，這里我用一個全新的空項目，添加完layui后，目錄結構如下：

2、編寫模塊文件

 

layui.define(['jquery'], function(exports){ 
    var $ = layui.jquery;
    var obj = {
        ajax: function (url, type, dataType, data, callback) {
            $.ajax({
                url: url,
                type: type,
                dataType: dataType,
                data: data,
                success: callback
            });
        }
    };
    //輸出接口
    exports('common', obj);
});

layui.define()方法為layui的定義模塊方法，該方法接收2個參數，第一個參數為依賴模塊，這里看到我們依賴與jquery；第二個回調方法，這里面我們定義模塊的內容，就是提供那些方法，從上面可以看出我們定義了一個obj對象，該對象有一個ajax方法用於調用jquery的ajax執行我們的操作。如果你是封裝其他的jquery插件，那就把插件的js代碼放到layui.define()的回調方法里就行了。

 

exports()為輸出接口，這個方法也有兩個參數，第一個為輸出模塊的名字，第二個為輸出哪個對象。

 

到此我們的模塊就寫完了，如果后續需要添加方法，就給obj對象添加方法就行了。現在我們的目錄結構如下：

現在我在 plugin 的 layui 文件夾下新建 modules 文件夾，用以保存我們自己的模塊文件，在這個文件夾里新建 common.js 文件，來編寫我們第一個模塊，該文件內容如下：

3、設置layui加載組件目錄模塊

 

模塊寫完后，我們需要配置layui，讓layui能夠找到我們的模塊，一般這個配置是在我們的全局js里完成，這里我在 assets/js 下面新建 global.js 文件，該文件內容如下：

layui.config({
    base: '/assets/plugin/layui/modules/'      //自定義layui組件的目錄
}).extend({ //設定組件別名
    common:   'common',
});

layui.config()為layui的配置方法，base參數表示我們模塊的保存目錄，這個目錄是從網站的訪問根目錄開始算的，從上一步中可以看出，我的模塊保存路徑為 /assets/plugin/layui/modules/ 文件夾下；extend里面就來定義我們的實際模塊名，上面代碼中冒號前的common表示模塊的名字，也就是以后我們加載模塊時使用的名字，而冒號后的‘common’表示我們模塊文件的名字，這里其實是指 /assets/plugin/layui/modules/common.js 文件，我們可以省略js后綴，加載時會自動添加后綴。

4、使用模塊

 

模塊定義好后，我們就可以來使用模塊了，使用模塊其實和使用layui的自帶模塊一樣，現在來修改項目的 index.html 文件，在里面我使用模塊的ajax方法訪問一個在線翻譯的接口，文件代碼如下：

<script src="assets/plugin/layui/layui.js"></script>
<script src="assets/js/global.js"></script>
<script>
    layui.use(['common'], function () {
        var common = layui.common;
        common.ajax('http://route.showapi.com/32-9', 'post', 'json', {
            'showapi_appid': 28043,
            'showapi_sign': 'fd5ce066f69441bfa078c0ad16129b15',
            'q': 'hello'
        }, function (res) {
            alert(JSON.stringify(res));
        });
    });
</script>

訪問 index.html 看到下圖返回結果，證明模塊封裝成功了。