layui文档通读笔记

预先加载模块layui.use

layui通过use方法加载 模块，当你的js需要用到layui模块的hi后，且避免到处写layui.use()的麻烦。

layui.form(['form','upload']),function(){

}

//如果只有一个模块，可以不填数组

layui.use('form',function(){
    var form = layui.form //获取form模块
    var upload=layui.upload;//获取upload模块
    //监听提交按钮
    form.on('submit(test)',function(data){
        console.log(data)
    });
    //实例化一个上传控件
    upload({
        url:'上传接口',
        success:function(data){
            console.log(data)
        }
    })
})

模块命名空间

layui的模块对象会绑定在layui对象上，内部由==layui.define()==方法来完成。
每个模块都有一个特定命名，且无法被占用。所以你无需担心模块的空间被污染，
除非你主动delete layui[‘模块名’].
调用模块可通过layui.use()来实现，再通过layui对象获得模块对象。
也就是用layui.use([‘layer’,‘laypage’,‘laydate’],function(){
var layer= layui.layer //获得layer模块
// 这样才可以使用模块哦

})

非常不推荐将模块暴露给全局

var laypage,laydata;
layui.use(['laypage','laydate'],function(){
    laypage=layui.laypage;
    laydate=layui.laydate;
})

// layui官方提供的模块有时可能还无法满足你，或者你试图按照layui的模块规范来扩展一个模块，
那么此时有必要认识一下layui.define()方法来完成。

第一步：确认模块名，假设为mymod,然后新建一个mymode.js文件放入项目任意目录下
第二步：编写mymode.js如下
   layui.define(function(exports){
       //提示：模块也可以依赖其他模块，如 layui.define('mod1',callback);
       var obj={
           hello: function(str){
               alert('Hello'+(str||'mymod'));
           }
       };
       //输出mymode接口
       exports('mymod',obj);
   })
第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了
layui.config({
    base:'/res/js //假设这是你存放拓展模块的根目录
}).extend({
    //设定模块名
    mymod:'mymod', //如果mymod.js是在根目录，也可以不用设定别名,
    mod1:'admin/mod1' //相对于上述base目录的子目录
})

你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）

layui.extend({
  mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})

使用拓展模块

layui.use(['mymod','mod1'],function(){
    var mymod=layui.mymod
    var mod1=layui.mod1
    var mod2=layui.mod2
    mymod.hello('World!');//弹出Hello World!
}])

一些问题？

1. 为什么表单不显示
如果你的表单元素是动态添加的，那么在组件初始加载的时候是无法读取到的，你只需要执行一个试图渲染的实例就可以

layui.use('form',function(){
    var form=layui.form;//只有执行了这一部，部分表单元素才会自动修饰
    ...
    form.render() //执行方法来渲染 这是全部渲染
    form.render('select'); //刷新select选择框渲染 ，这是局部渲染
})