layui如何封裝模塊

小編給大家分享一下layui如何封裝模塊，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

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

1、搭建項目目錄

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

2、編寫模塊文件

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

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對象添加方法就行了。現在我們的目錄結構如下：

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('//route.showapi.com/32-9', 'post', 'json', {            'showapi_appid': 28043,            'showapi_sign': 'fd5ce066f69441bfa078c0ad16129b15',            'q': 'hello'        }, function (res) {            alert(JSON.stringify(res));        });    });</script>

以上是“layui如何封裝模塊”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！