对Layer UI 模块化的用法详解

站长资源 2024/11/26 佚名

2 0 1

此文章适合入门的同学查看，之前因为项目的原因，在网上找了一套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(注意这个文件的名称)

目录现在是这样的

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');
})

不仅可以指定我们的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()去加载

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

Layer,UI,模块化

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“对Layer UI 模块化的用法详解”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

对Layer UI 模块化的用法详解

解决layui的radio属性或别的属性没显示出来的问题

vue源码中的检测方法的实现

评论“对Layer UI 模块化的用法详解”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接