Layui不完全使用指南

全部加载

全模块用法（一般用于线上环境）

<script src="../layui/layui.all.js"></script>  
<script>
;!function(){
  //无需再执行layui.use()方法加载模块，直接使用即可
  var form = layui.form
  ,layer = layui.layer;
  
  //…
}();
</script>

这样加载的 JS 就只有 layui.all.js

按需加载

按需加载（不推荐）

从下面的代码逻辑可以看出跟 预先加载 的区别了。

预先加载是一进入页面，就把依赖的模块相继下载，而按需加载一般是在某个事件里，使用 layui.use来加载需要的模块。

注意加载的是 layui.js 而不是 layui.all.js，不然这样就跟 全部加载 一样了。

/*
  Demo2.js
  按需加载一个Layui模块
*/
 
//……
//你的各种JS代码什么的
//……
 
//下面是在一个事件回调里去加载一个Layui模块
button.addEventListener('click', function(){
  layui.use('laytpl', function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
    var html = laytpl('').render({});
    console.log(html);
  });
});

预先加载（模块化的用法）

https://www.layui.com/doc/base/modules.html#before

从下面的代码逻辑可以看出，layui.use 引入的模块 form, upload， 那么进入页面就会加载这些模块了。

/*
  Demo1.js
  使用Layui的form和upload模块
*/
layui.use(['form', 'upload'], function(){  //如果只加载一个模块，可以不填数组。如：layui.use('form')
  var form = layui.form //获取form模块
  ,upload = layui.upload; //获取upload模块
  
  //监听提交按钮
  form.on('submit(test)', function(data){
    console.log(data);
  });
  
  //实例化一个上传控件
  upload({
    url: '上传接口url'
    ,success: function(data){
      console.log(data);
    }
  })
});

类型	JS
全部加载	layui.all.js
预先加载	layui.js
按需加载	layui.js

Layui 的事件监听

主要是 数据表格 与 表单 组件的事件监听比较特殊，其他组件的事件监听使用常规的事件监听方式即可。这里的特殊指的是，需要使用 table.on 或者 form.on, element.on 这些通过指定的 lay-filter 来监听。

表格的事件监听（table）

event	描述
toolbar	监听头部工具栏事件
checkbox	监听复选框选择
edit	监听单元格编辑
row	监听行单击事件
rowDouble	监听行双击事件
tool	监听行工具事件
sort	监听排序切换

表单的事件监听 （form）

event	描述
select	监听select下拉选择事件
checkbox	监听checkbox复选框勾选事件
switch	监听checkbox复选框开关事件
radio	监听radio单选框事件
submit	监听表单提交事件

常用元素的事件监听（element）

event	描述
tab	监听 Tab 选项卡切换事件
tabDelete	监听 Tab 监听选项卡删除事件
nav	监听导航菜单的点击事件
collapse	监听折叠面板展开或收缩事件

Layui 实例

layui.table.cache[id]

layui.form.cache[id]