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

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

在正常使用中，ajax可以說被廣泛使用，所以在這里我們添加了一個自己的模塊來包裝ajax，以方便使用。

注：模塊加載需要服務(wù)器環(huán)境的支持。因此，在閱讀本教程之前，請在本教程范圍內(nèi)建立本地服務(wù)器環(huán)網(wǎng)站建設(shè)公司境。請自己百度。

1、建立項目目錄

首先，從layui的網(wǎng)站下載layui的包，放在自己的項目中。在這里，我使用一個新的空項目。添加layui后，目錄結(jié)構(gòu)如下：

2、編制模塊文件

現(xiàn)在我在 plugin 的 layui 新建的文件夾 modules 文件夾用于保存我們自己的模塊文件，并在此文件夾中新建 common.js 為了編寫我們的第一個模塊，文件內(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定義模塊方法，接收兩個參數(shù)，第一個參數(shù)是依賴模塊。在這里，我們可以看到我們依賴jquery；第二種回調(diào)方法，我們定義模塊的內(nèi)容，就是提供這些方法，從上面可以看出，我們定義了obj對象，這個對象有一個ajax方法來調(diào)用jqueryajax來執(zhí)行我們的操作。如果您包裝了其他jquery插件，請將插件的js代碼放入layuiry.define()回調(diào)方法就行了。

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

到目前為止，我們的模塊已經(jīng)完成。如果后續(xù)需要添加方法，只需添加obj對象。目前我們的目錄結(jié)構(gòu)如下:

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

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

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

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

關(guān)鍵詞標(biāo)簽: 模塊 框架 cms教程