基于Layui自定義模塊的使用方法詳解

更新時間：2019年09月14日 22:48:56 作者：張超博客

今天小編就為大家分享一篇基于Layui自定義模塊的使用方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

layui是一個極其不錯的前端UI框架、是后端程序員的福音?？傊绻闶且粋€后端開發(fā)者、如果你苦于你的界面“慘不忍睹”、選擇layui來開發(fā)是個極好的選擇。

之前的項目也有使用過layui、只是沒有過多的關(guān)注其框架本身。對于項目上、拿來即用即可！

為什么要自定義模塊呢？好處很多、比如可以大量重用代碼......

我也是一個極其懶惰的人、總是想辦法讓代碼可重用

根據(jù)layui官方的文檔說明、首先第一步是要確定你要擴(kuò)展的模塊名稱

我現(xiàn)在做的是登錄功能、因此我的擴(kuò)展模塊名叫 login

使用layui.define()方法來擴(kuò)展模塊、當(dāng)然模塊中你也可以使用layui的其他方法、如下

layui.define('layer', callback);

在定義擴(kuò)展模塊的時候、我需要使用layui的layer模塊、然后在回調(diào)函數(shù)中定義自己的方法

layui.define(["layer","jquery"],function (exports) {
  var obj = {
    login : function (url,data,$,targetUrl) {
      $.post(url,{code:data.code},function (res) {
       if (res.code&&res.code==400){
         layer.msg(res.msg,{icon:1},function () {
           window.location.href = targetUrl;
         });
       }else{
         layer.msg(res.msg,{icon:1},function () {
           window.location.href = targetUrl;
         });
       }
      });
    }
  }
  exports("login",obj);
});

上述代碼中定義了一個login模塊、以便在我登錄的時候、不需要寫過度的代碼即可實現(xiàn)登錄、讓頁面看起來更清爽【無任何雜質(zhì)】

那么模塊定義完了、怎么使用呢？

<script type="text/javascript">
  layui.config({
    base: '/static/admin/js/module/'//模塊存放的目錄
  }).use(['jquery','element','form','login'],function () {
    var $ = layui.jquery,
      form = layui.form,
      element = layui.element,
      login = layui.login;
    form.on("submit(subBtn)",function (data) {
      //獲取表單的值
      var field = data.field;
      login.login("{:url('Login/doLogin')}",field,$,"{:url('Index/index')}");
      return false;
    });
  });
</script>

嗯、就這樣、在登錄的時候、直接將參數(shù)傳遞過去即可、在上述代碼中url部分是使用TP的方法生成的、這里不用過多的研究【如果你是寫前端的話】。

嗯、就這樣、整個模塊定義完成！！展示的效果如下