layui是一個極其不錯的前端UI框架、是後端程式設計師的福音。總之如果你是一個後端開發者、如果你苦於你的介面“慘不忍睹”、選擇layui來開發是個極好的選擇。

之前的專案也有使用過layui、只是沒有過多的關注其框架本身。對於專案上、拿來即用即可！

為什麼要自定義模組呢？好處很多、比如可以大量重用程式碼......

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

根據layui官方的文件說明、首先第一步是要確定你要擴充套件的模組名稱

我現在做的是登入功能、因此我的擴充套件模組名叫  login

使用layui.define()方法來擴充套件模組、當然模組中你也可以使用layui的其他方法、如下

layui.define('layer', callback);

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);
});
 

那麼模組定義完了、怎麼使用呢？

<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>
 

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

day、day、up !