对Layer UI 模块化的用法详解
此文章适合入门的同学查看，之前因为项目的原因，在网上找了一套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()去加载
好了，以上就是我个人的理解，如有错误，欢迎指出。希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
window.event.srcElement 得到事件源对象
window.event.srcElement 得到事件源对象代码，大家可以参考脚本之家以前发的代码，多浏览兼容的。2009-05-05
这篇文章主要介绍了使用js实现单链解决前端队列问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
微信小程序中的画布是非常重要的展示控件,其相当于HTML中的canvas控件,下面这篇文章主要给大家介绍了关于微信小程序实现Canvas画板的相关资料,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了JavaScript实现的数字与字符串转换功能,涉及javascript数字、字符串等运算与转换相关操作技巧,需要的朋友可以参考下2017-08-08
漂亮的widgets，支持换肤和后期开发新皮肤...2007-04-04
这篇文章主要介绍了完美实现八种js焦点轮播图的具体资料，基于完美运动框架move2.js而完成的八种焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家详细介绍了微信小程序实现双层嵌套菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了js实现简单图片拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源,本文就来介绍一下Webpack处理样式资源的配置详情,感兴趣的可以了解一下2023-12-12
这篇文章主要为大家详细介绍了原生JavaScript实现购物车效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论