這篇文章將為大家詳細(xì)講解有關(guān)layui封裝模塊的方法，文章內(nèi)容質(zhì)量較高，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)商河,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

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

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

1、搭建項(xiàng)目目錄

首先從layui的網(wǎng)站下載layui的包，放置到自己的項(xiàng)目里，這里我用一個(gè)全新的空項(xiàng)目，添加完layui后，目錄結(jié)構(gòu)如下：

2、編寫模塊文件

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

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個(gè)參數(shù)，第一個(gè)參數(shù)為依賴模塊，這里看到我們依賴與jquery；第二個(gè)回調(diào)方法，這里面我們定義模塊的內(nèi)容，就是提供那些方法，從上面可以看出我們定義了一個(gè)obj對象，該對象有一個(gè)ajax方法用于調(diào)用jquery的ajax執(zhí)行我們的操作。如果你是封裝其他的jquery插件，那就把插件的js代碼放到layui.define()的回調(diào)方法里就行了。

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

到此我們的模塊就寫完了，如果后續(xù)需要添加方法，就給obj對象添加方法就行了?，F(xiàn)在我們的目錄結(jié)構(gòu)如下：

3、設(shè)置layui加載組件目錄模塊

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

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

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

4、使用模塊

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

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

以上就是layui封裝模塊的方法介紹，詳細(xì)使用情況還得要大家自己使用過才能知道具體要領(lǐng)。如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！