layui 封裝自定義模塊

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

layui是國人開發的一款很是簡潔的UI框架，使用了模塊化加載方式，所以在使用過程當中咱們不免須要添加本身的模塊，本教程就教你們封裝一個簡單的模塊。

日常使用中，ajax能夠說使用普遍，因此這裏咱們添加一個本身的模塊，將ajax封裝一下，方便使用。

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

 

一、搭建項目目錄

 

首先從layui的網站下載layui的包，放置到本身的項目裏，這裏我用一個全新的空項目，添加完layui後，目錄結構以下：

二、編寫模塊文件

 

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 文件，來編寫咱們第一個模塊，該文件內容以下：

三、設置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後綴，加載時會自動添加後綴。

四、使用模塊

 

模塊定義好後，咱們就能夠來使用模塊了，使用模塊其實和使用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 看到下圖返回結果，證實模塊封裝成功了。