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选择框渲染 ,这是局部渲染
})
标签:function,use,form,layui,文档,模块,通读,mymod 来源: https://blog.csdn.net/ZOEylchen/article/details/116702411