对Layer UI 模块化的用法详解


Posted in Javascript onSeptember 26, 2019

此文章适合入门的同学查看,之前因为项目的原因,在网上找了一套Layer UI做的后台管理系统模板,完全不懂LayUI里面的JS用法,看了官方文档和其它资料后才明白怎么去实现模块化这个例子,但是还是感觉网上的资料写得不够清晰,我尝试把自己的想法写出来,大家可以一起学习

1.首先从简单的入手

加载所需模块

方法:layui.use([mods], callback)

引用了Layui.js后

往js文件写入

layui.use(['layer'],function(){ [mods]加载的模块,现在加载的是弹出层
 var layer = layui.layer; 弹出层模块
 layer.msg('风继续吹')
})

2.定义模块

方法:layui.define([mods], callback)

layui.define(['layer'], function(exports){
 //do something
 
 exports('demo', function(){
  alert('Hello World!');
 });
});

3.全局配置

方法:layui.config(options)

layui.config({
 base: 'js/' //你存放新模块的目录,注意,不是layui的模块目录
}).use('index'); //加载入口

来到这一步,也许你还不明白,但是看完以下这个例子,你就会清晰多了

1.新建一个js文件夹和一个index.html,再加上官方下载的layui文件

在js文件夹里面建立index.js(注意这个文件的名称)

目录现在是这样的

1

2.再进行全局配置

在index.html中写

layui.config({
 base:'js/' //你存放新模块的目录,注意,不是layui的模块目录
  }).use(['index','layer'],function(){ //加载入口 上述的 index 即为你 js/ 目录下的 index.js,看看官方的文件结构,如下图,index.js相当于就成为了新的文件模块(与下文提的模块不一样)
 var layer = layui.layer;
 layer.msg('leslie world');
})

2

不仅可以指定我们的index.js模块文件模块(),还可以引用内置的模块,比如laydate,layer等等

3.自定义模块

在index.js中

layui.define(['layer'],function(exports){ //引用layer模块
 var layer = layui.layer;
 exports('index',function(){ //注意,这里是模块输出的核心,模块名必须和use时的模块名一致,这里的index就是在index.html use的模块
 layer.msg('leslie cheung');
 })
})

现在呢,我们已经定义了新的模块 index,怎么去运行该模块呢

4.最后使用热加载模块layui.use()

继续在index.js写

layui.use(['index'],function(){
 layui.index() //调用index这个自定义模块
})

最后总结一下,通俗易懂点来讲,进行全局配置(layui.config):创建的这个index.js是我们业务所需要的文件模块,类似于layer,laydate那些结构的;

自定义模块:接着我们发现业务的需求,需要进一步在index.js去写自己的小模块,于是呢通过define自定义模块;

热加载模块:内置模块和自定义模块怎么使用,通过layui.use()去加载

好了,以上就是我个人的理解,如有错误,欢迎指出。希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Node.js的包详细介绍
Jan 14 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
vue源码中的检测方法的实现
Sep 26 #Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 #Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 #Javascript
Vue项目环境搭建详细总结
Sep 26 #Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 #Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 #Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 #Javascript
You might like
php中将一个对象保存到Session中的方法
2015/03/13 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
javascript 自定义事件初探
2009/08/21 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
flask-restful使用总结
2018/12/04 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
python推导式的使用方法实例
2021/02/28 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
自主招生自荐信格式
2013/12/03 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
植树节活动总结
2014/04/30 职场文书
化验员岗位职责
2015/02/14 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS