对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 相关文章推荐
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
js操作数组函数实例小结
Dec 10 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP 文件系统详解
2012/09/13 PHP
php创建session的方法实例详解
2015/01/27 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
vue3.0 上手体验
2020/09/21 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
Python动态加载模块的3种方法
2014/11/22 Python
详解Python中的文本处理
2015/04/11 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python实现随机爬山算法
2021/01/29 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
西式婚礼证婚词
2014/01/12 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
客房部经理岗位职责
2015/02/02 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android