基于Layui自定义模块的使用方法详解


Posted in Javascript onSeptember 14, 2019

layui是一个极其不错的前端UI框架、是后端程序员的福音。总之如果你是一个后端开发者、如果你苦于你的界面“惨不忍睹”、选择layui来开发是个极好的选择。

之前的项目也有使用过layui、只是没有过多的关注其框架本身。对于项目上、拿来即用即可!

为什么要自定义模块呢?好处很多、比如可以大量重用代码......

我也是一个极其懒惰的人、总是想办法让代码可重用

根据layui官方的文档说明、首先第一步是要确定你要扩展的模块名称

我现在做的是登录功能、因此我的扩展模块名叫 login

使用layui.define()方法来扩展模块、当然模块中你也可以使用layui的其他方法、如下

layui.define('layer', callback);

在定义扩展模块的时候、我需要使用layui的layer模块、然后在回调函数中定义自己的方法

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模块、以便在我登录的时候、不需要写过度的代码即可实现登录、让页面看起来更清爽【无任何杂质】

那么模块定义完了、怎么使用呢?

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

嗯、就这样、在登录的时候、直接将参数传递过去即可、在上述代码中url部分是使用TP的方法生成的、这里不用过多的研究【如果你是写前端的话】。

嗯、就这样、整个模块定义完成!!展示的效果如下

基于Layui自定义模块的使用方法详解

以上这篇基于Layui自定义模块的使用方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
javascript连续赋值问题
Jul 08 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
原生js实现轮播图特效
May 04 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 #Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 #Javascript
Layui Form 自定义验证的实例代码
Sep 14 #Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 #Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 #Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 #Javascript
vue登录注册实例详解
Sep 14 #Javascript
You might like
分享PHP入门的学习方法
2007/01/02 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
vuex实现购物车功能
2020/06/28 Javascript
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Python API自动化框架总结
2019/11/12 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
python中二分查找法的实现方法
2020/12/06 Python
关于Python错误重试方法总结
2021/01/03 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
社团招新策划书
2014/02/04 职场文书
优秀经理获奖感言
2014/03/04 职场文书
中秋晚会策划方案
2014/06/12 职场文书
授权委托书格式
2014/07/31 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
给领导的感谢信范文
2015/01/23 职场文书
碧霞祠导游词
2015/02/09 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
Python IO文件管理的具体使用
2022/03/20 Python