搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

模块规范

layui 定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后,成为 layui 最核心的模块加载引擎。

layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候,且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义:

</>code

  1. layui.use(['form', 'upload'], function(){ //如果只加载一个模块,可以不填数组。如:layui.use('form')
  2. var form = layui.form //获取form模块
  3. ,upload = layui.upload; //获取upload模块
  4. //监听提交按钮
  5. form.on('submit(test)', function(data){
  6. console.log(data);
  7. });
  8. //实例化一个上传控件
  9. upload({
  10. url: '上传接口url'
  11. ,success: function(data){
  12. console.log(data);
  13. }
  14. })
  15. });

layui 的模块对象会绑定在 layui 对象下,内部由 layui.define() 方法来完成。每个模块都有一个特定命名,且无法被占用。所以你无需担心模块的空间被污染,除非你主动 delete layui['模块名']。调用模块可通过 layui.use() 来实现,再通过 layui 对象获得模块对象。如:

</>code

  1. layui.use(['layer', 'laypage', 'laydate'], function(){
  2. var layer = layui.layer //获得 layer 模块
  3. ,laypage = layui.laypage //获得 laypage 模块
  4. ,laydate = layui.laydate; //获得 laydate 模块
  5. //使用模块
  6. });

我们推荐你将所有的业务代码都写在一个大的 use 回调中,而不是将模块接口暴露给全局,比如下面的方式我们是极不推荐的:

</>code

  1. //强烈不推荐下面的做法
  2. var laypage, laydate;
  3. layui.use(['laypage', 'laydate'], function(){
  4. laypage = layui.laypage;
  5. laydate = layui.laydate;
  6. });

你之所以想使用上面的错误方式,是想其它地方使用不在执行一次 layui.use?但这种理解本身是存在问题的。因为如果一旦你的业务代码是在模块加载完毕之前执行,你的全局对象将获取不到模块接口,因此这样用不仅不符合规范,还存在报错风险。建议在你的 js 文件中,在最外层写一个 layui.use 来加载所依赖的模块,并将业务代码写在回调中,这样还可以确保 html 文档加载完毕再执行回调代码。

layui 官方提供的模块有时可能还无法满足你,或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法,相信你在文档左侧的“底层方法”中已有所阅读。下面就让我们一起扩展一个 layui 模块吧:

第一步:确认模块名,假设为:mymod,然后新建一个mymod.js 文件放入项目任意目录下(注意:不用放入layui目录)

第二步:编写 mymod.js 如下:

</>code

  1. /**
  2. 扩展一个 mymod 模块
  3. **/
  4. layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define('mod1', callback);
  5. var obj = {
  6. hello: function(str){
  7. alert('Hello '+ (str||'mymod'));
  8. }
  9. };
  10. //输出 mymod 接口
  11. exports('mymod', obj);
  12. });

第三步:设定扩展模块所在的目录,然后就可以在别的JS文件中使用了

</>code

  1. //config的设置是全局的
  2. layui.config({
  3. base: '/res/js/' //假设这是你存放拓展模块的根目录
  4. }).extend({ //设定模块别名
  5. mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
  6. ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
  7. });
  8. //你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为 layui 2.2.0 新增
  9. layui.extend({
  10. mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径,即不跟随 base 路径
  11. })
  12. //使用拓展模块
  13. layui.use(['mymod', 'mod1'], function(){
  14. var mymod = layui.mymod
  15. ,mod1 = layui.mod1
  16. ,mod2 = layui.mod2;
  17. mymod.hello('World!'); //弹出 Hello World!
  18. });

大体上来说,layui 的模块定义很类似 Require.js 和 Sea.js,但跟他们又有着明显的不同,譬如在接口输出等地方。

其实关于模块的核心,就是 layui.js 的两个底层方法:一个用于定义模块的 layui.define(),一个加载模块的 layui.use()

layui - 在每一个细节中,用心与你沟通