導讀:cms教程cms教程layui它是一個前端，采用自己的模塊規范編寫UI遵循原生的框架HTML/C">

layui 它是一個前端，采用自己的模塊規范編寫 UI 遵循原生的框架 HTML/CSS/JS 書寫和組織形式，門檻很低，可以立即使用。

在正常使用中，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定義模塊方法，接收兩個參數，第一個參數是依賴模塊。在這里，我們可以看到我們依賴jquery；第二種回調方法，我們定義模塊的內容，就是提供這些方法，從上面可以看出，我們定義了obj對象，這個對象有一個ajax方法來調用jqueryajax來執行我們的操作。如果您包裝了其他jquery插件，請將插件的js代碼放入layuiry.define()回調方法就行了。

exports()為輸出界面，該方法還有兩個參數，一個是輸出模塊的名稱，另一個是輸出對象。

到目前為止，我們的模塊已經完成。如果后續需要添加方法，只需添加obj對象。目前我們的目錄結構如下:

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

模塊完成后，我們需要配置layui，以便layui能夠找到我們的模塊。一般來說，這網站seo優化個配置是在我們的整體js中完成的，我在這里 assets/js 下面新建 global.js 文件內容如下：

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

layui.config()是layui的配置方法，base參數表示我們模塊的保存目錄，從網站的訪問根目錄開始。從上一步可以看出，我的模塊保存路seo網站優化培訓徑是 /assets/plugin/layui/modules/ 在extend中定義我們的實際模塊名，上述代碼中冒號前的common表示模塊的名稱，即我們將來加載模塊時使用的名稱，冒號后的‘common這實際上是指我們模塊文件的名稱 /assets/plugin/layui/modules/common.js 文件，我們可以省略js后綴，加載時會自動添加后綴。

關鍵詞標簽: 模塊 框架 cms教程