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

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

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

layui是一個(gè)極其不錯(cuò)的前端UI框架、是后端程序員的福音。總之如果你是一個(gè)后端開(kāi)發(fā)者、如果你苦于你的界面“慘不忍睹”、選擇layui來(lái)開(kāi)發(fā)是個(gè)極好的選擇。

之前的項(xiàng)目也有使用過(guò)layui、只是沒(méi)有過(guò)多的關(guān)注其框架本身。對(duì)于項(xiàng)目上、拿來(lái)即用即可！

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

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

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

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

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

layui.define('layer', callback);

在定義擴(kuò)展模塊的時(shí)候、我需要使用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);
});

上述代碼中定義了一個(gè)login模塊、以便在我登錄的時(shí)候、不需要寫(xiě)過(guò)度的代碼即可實(shí)現(xiàn)登錄、讓頁(yè)面看起來(lái)更清爽【無(wú)任何雜質(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í)候、直接將參數(shù)傳遞過(guò)去即可、在上述代碼中url部分是使用TP的方法生成的、這里不用過(guò)多的研究【如果你是寫(xiě)前端的話(huà)】。

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