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）

表单的事件监听 （form）

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

Layui 实例

layui.table.cache[id]

layui.form.cache[id]