Layer UI 模块化的用法(转)

此文章适合入门的同学查看,之前因为项目的原因,在网上找了一套Layer UI做的后台管理系统模板,完全不懂LayUI里面的JS用法,看了官方文档和其它资料后才明白怎么去实现模块化这个例子,但是还是感觉网上的资料写得不够清晰,我尝试把自己的想法写出来,大家可以一起学习

1.首先从简单的入手

加载所需模块

方法:layui.use([mods], callback)

引用了Layui.js后

往js文件写入

layui.use(['layer'],function(){  [<span style="color:rgb(102,102,102);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', '微软雅黑', Tahoma, Arial, sans-serif;font-size:14px;">mods]加载的模块,现在加载的是弹出层</span>  
    var layer = layui.layer;  <strong>弹出层模块</strong>  
    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()去加载

原文:https://blog.csdn.net/wsssqe/article/details/79502827 感谢分享

posted on 2018-04-13 11:43  YellowCool  阅读(591)  评论(0编辑  收藏  举报

导航