脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Layui自定义模块的使用

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

 更新时间：2019年09月14日 22:48:56   作者：张超博客  
今天小编就为大家分享一篇基于Layui自定义模块的使用方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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自定义模块的使用方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS中数组与对象的遍历方法实例小结

    JS中数组与对象的遍历方法实例小结

    这篇文章主要介绍了JS中数组与对象的遍历方法,结合实例形式总结分析了JavaScript针对数组与对象遍历操作相关函数与使用技巧,需要的朋友可以参考下
    2018-08-08
  • Echarts自定义图形的方法参考

    Echarts自定义图形的方法参考

    在使用ECharts绘制折线图时,为了丰富图表的视觉表达,设计师们常常会为视图搭配上不同的图标,下面这篇文章主要给大家介绍了关于Echarts自定义图形的方法参考,需要的朋友可以参考下
    2023-02-02
  • JavaScript中Promise处理异步的并行与串行

    JavaScript中Promise处理异步的并行与串行

    js中的promise是一个异步编程的解决方案,语法层面上他是一个构造函数,名字为Promise(),下面这篇文章主要给大家介绍了关于JavaScript中Promise处理异步的并行与串行的相关资料,需要的朋友可以参考下
    2022-12-12
  • javascript跨域请求包装函数与用法示例

    javascript跨域请求包装函数与用法示例

    这篇文章主要介绍了javascript跨域请求包装函数与用法,结合实例形式分析了javascript基于ajax的跨域请求封装函数与相关使用技巧,需要的朋友可以参考下
    2016-11-11
  • js中位运算的运用实例分析

    js中位运算的运用实例分析

    这篇文章主要介绍了js中位运算的运用实例分析,需要的朋友可以参考下
    2018-12-12
  • 用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)

    用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)

    Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定
    2012-06-06
  • js批量设置样式的三种方法不推荐使用with

    js批量设置样式的三种方法不推荐使用with

    批量设置样式的三种方法:第一种使用JSON/第二种使用cssText/使用第三种with(不推荐使用),感兴趣的朋友可以参考下，希望可以帮助到你
    2013-02-02
  • js实现视频播放时屏幕显示水印

    js实现视频播放时屏幕显示水印

    这篇文章主要为大家详细介绍了js如何实现视频播放时屏幕显示水印的效果,文中的示例代码讲解详细,对我们深入掌握js有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • javascript eval(func())使用示例

    javascript eval(func())使用示例

    eval的作用其实很简单，就是把一段字符串传递给JS解释器，由Javascript解释器将这段字符串解释成Javascript代码，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-12-12
  • 原生JS面向对象实现打字小游戏

    原生JS面向对象实现打字小游戏

    这篇文章主要为大家详细介绍了原生JS面向对象实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论