使用layui框架封裝ajax模組的具體步驟

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的定義模組方法，該方法接收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([&#39;common&#39;], function () {
         var common = layui.common;
         common.ajax(&#39;http://route.showapi.com/32-9&#39;, &#39;post&#39;, &#39;json&#39;, {
             &#39;showapi_appid&#39;: 28043,
             &#39;showapi_sign&#39;: &#39;fd5ce066f69441bfa078c0ad16129b15&#39;,
             &#39;q&#39;: &#39;hello&#39;
         }, function (res) {
             alert(JSON.stringify(res));
         });
     });
</ script >

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

相關推薦：layui教學

#

以上是使用layui框架封裝ajax模組的具體步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！