layui 封裝自定義模組

2022-02-03 01:18:31 字數 3219 閱讀 4452

**:

layui是國人開發的一款非常簡潔的ui框架,使用了模組化載入方式,因此在使用過程中我們難免需要新增自己的模組,本教程就教大家封裝乙個簡單的模組。

平常使用中,ajax可以說使用廣泛,所以這裡我們新增乙個自己的模組,將ajax封裝一下,方便使用。

1、搭建專案目錄

2、編寫模組檔案

layui.define(['jquery'], function

(exports));}};

//輸出介面

exports('common', obj);

});

layui.define()方法為layui的定義模組方法,該方法接收2個引數,第乙個引數為依賴模組,這裡看到我們依賴與jquery;第二個**方法,這裡面我們定義模組的內容,就是提供那些方法,從上面可以看出我們定義了乙個obj物件,該物件有乙個ajax方法用於呼叫jquery的ajax執行我們的操作。如果你是封裝其他的jquery外掛程式,那就把外掛程式的js**放到layui.define()的**方法裡就行了。

exports()為輸出介面,這個方法也有兩個引數,第乙個為輸出模組的名字,第二個為輸出哪個物件。

到此我們的模組就寫完了,如果後續需要新增方法,就給obj物件新增方法就行了。現在我們的目錄結構如下:

現在我在 plugin 的 layui 資料夾下新建 modules 資料夾,用以儲存我們自己的模組檔案,在這個資料夾裡新建 common.js 檔案,來編寫我們第乙個模組,該檔案內容如下:

3、設定layui載入元件目錄模組

模組寫完後,我們需要配置layui,讓layui能夠找到我們的模組,一般這個配置是在我們的全域性js裡完成,這裡我在 assets/js 下面新建 global.js 檔案,該檔案內容如下:

layui.config().extend();
layui.config()為layui的配置方法,base引數表示我們模組的儲存目錄,這個目錄是從**的訪問根目錄開始算的,從上一步中可以看出,我的模組儲存路徑為 /assets/plugin/layui/modules/ 資料夾下;extend裡面就來定義我們的實際模組名,上面**中冒號前的common表示模組的名字,也就是以後我們載入模組時使用的名字,而冒號後的『common』表示我們模組檔案的名字,這裡其實是指 /assets/plugin/layui/modules/common.js 檔案,我們可以省略js字尾,載入時會自動新增字尾。

4、使用模組

訪問 index.html 看到下圖返回結果,證明模組封裝成功了。

**:layui是國人開發的一款非常簡潔的ui框架,使用了模組化載入方式,因此在使用過程中我們難免需要新增自己的模組,本教程就教大家封裝乙個簡單的模組。

平常使用中,ajax可以說使用廣泛,所以這裡我們新增乙個自己的模組,將ajax封裝一下,方便使用。

1、搭建專案目錄

2、編寫模組檔案

layui.define(['jquery'], function

(exports));}};

//輸出介面

exports('common', obj);

});

layui.define()方法為layui的定義模組方法,該方法接收2個引數,第乙個引數為依賴模組,這裡看到我們依賴與jquery;第二個**方法,這裡面我們定義模組的內容,就是提供那些方法,從上面可以看出我們定義了乙個obj物件,該物件有乙個ajax方法用於呼叫jquery的ajax執行我們的操作。如果你是封裝其他的jquery外掛程式,那就把外掛程式的js**放到layui.define()的**方法裡就行了。

exports()為輸出介面,這個方法也有兩個引數,第乙個為輸出模組的名字,第二個為輸出哪個物件。

到此我們的模組就寫完了,如果後續需要新增方法,就給obj物件新增方法就行了。現在我們的目錄結構如下:

現在我在 plugin 的 layui 資料夾下新建 modules 資料夾,用以儲存我們自己的模組檔案,在這個資料夾裡新建 common.js 檔案,來編寫我們第乙個模組,該檔案內容如下:

3、設定layui載入元件目錄模組

模組寫完後,我們需要配置layui,讓layui能夠找到我們的模組,一般這個配置是在我們的全域性js裡完成,這裡我在 assets/js 下面新建 global.js 檔案,該檔案內容如下:

layui.config().extend();
layui.config()為layui的配置方法,base引數表示我們模組的儲存目錄,這個目錄是從**的訪問根目錄開始算的,從上一步中可以看出,我的模組儲存路徑為 /assets/plugin/layui/modules/ 資料夾下;extend裡面就來定義我們的實際模組名,上面**中冒號前的common表示模組的名字,也就是以後我們載入模組時使用的名字,而冒號後的『common』表示我們模組檔案的名字,這裡其實是指 /assets/plugin/layui/modules/common.js 檔案,我們可以省略js字尾,載入時會自動新增字尾。

4、使用模組

訪問 index.html 看到下圖返回結果,證明模組封裝成功了。

Layui自定義模組基礎學習

新手剛剛接觸layui,在自定義自己的layui模組的時候廢了半天勁,最終終於定義了乙個模組成功了,特此做此記錄 步驟如下 第一步 新建乙個js檔案,目錄自選 該例項實在專案的根目錄下新建乙個mydefinationlayuimodal,js檔案在該目錄下 採用layui.define方法 layu...

Layui自定義模組的使用

這裡以common.js為例,如下 common.js檔案 layui.define function exports exports common obj common為新建的模組名 不考慮命名規範的話,名字隨便起 obj即為模組中的obj物件 對你的新模組進行配置 建立config.js檔案專一...

Layui自定義模組的使用方式

為什麼要自定義模組呢?好處很多 比如可以大量重用 根據layui官方的文件說明 首先第一步是要確定你要擴充套件的模組名稱 現在做的是登入功能 因此擴充套件模組名叫 login 使用layui.define 方法來擴充套件模組 當然模組中你也可以使用layui的其他方法 如下 layui.define...