对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时区函数介绍
Sep 14 Javascript
javascript不可用的问题探究
Oct 01 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JS原型链怎么理解
Jun 27 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php中执行系统命令的方法
2015/03/21 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
js闭包用法实例详解
2016/12/13 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
javascript 中的try catch应用总结
2017/04/01 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
js实现随机抽奖
2020/03/19 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python中的模块和包概念介绍
2015/04/13 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python实现的汉诺塔算法示例
2019/10/23 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
职工趣味运动会方案
2014/02/10 职场文书
中秋节主持词
2014/04/02 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
玄武湖导游词
2015/02/05 职场文书
2015年酒店工作总结
2015/04/28 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android