基于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 相关文章推荐
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
Node.js fs模块原理及常见用途
Oct 22 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木马webshell扫描器代码
2012/01/25 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
可输入的下拉框
2006/06/19 Javascript
载入进度条 效果
2006/07/08 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
Python 除法小技巧
2008/09/06 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
学生实习推荐信范文
2013/11/26 职场文书
实习教师自我鉴定
2013/12/09 职场文书
2014年党务公开方案
2014/05/08 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
《正比例》教学反思
2016/02/23 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书