对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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
webpack3之loader全解析
Oct 26 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
js实现九宫格抽奖
Mar 19 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
八大排序算法的Python实现
2021/01/28 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
python实现Floyd算法
2018/01/03 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Python自带的IDE在哪里
2020/07/01 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
文秘专业应届生求职信
2014/05/26 职场文书
董存瑞观后感
2015/06/11 职场文书
2016国庆促销广告语
2016/01/28 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android