本文主要是针对Layui官网文档中的模块规范进行学习,然后归纳笔记,进行简化记忆,方便后期复盘巩固,如需深入学习,详见:Layui 模块规范 (layuion.com)
Layui定义了一套更轻量级的模块规范,经过大量实践后,成为iayui最核心的模块加载引擎。
模块的核心,即layui.js的两个底层方法:
1. 定义模块的layui.define();
2. 加载模块的layui.use().
一、预先加载模块
layui通过use方法加载模块,当JS需要用到layui模块时,避免到处写layui.use(),在最外层定义如下:
<script>
layui.use(['form', 'upload'], function(){
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);
}
})
});
</script>
二、扩展一个layui模块
layui官方提供的模块如果无法满足,可视图按照layer的模块规范来扩展一个模块。
第一步:确定模块名,假设为:mymod,然后新建一个mymod.js文件放入项目任意目录(不用放入layui目录)
第二步:编写mymod.js
//扩展一个mymod模块
layui.define(function(exports){
//模块也可以依赖其他模块
var obj = {
hello: function(src){
alert('Hello ' + (str || 'mymod'));
}
};
//输出mymod接口
exports('mymod', obj);
});
第三步:设定扩展模块所在的目录,然后就可在别的JS文件中使用
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是你存放扩展模块的根目录
}).extend({ //设定模块别名
mymod:'mymod', //如果mymod.js是在根目录,也可以不用设定别名
mod1: 'admin/mod1' //相对于上述base目录的子目录
});
//你也可以忽略base设定的根目录,直接在extend指定路径, v2.2.0新增
layui.extend({
mod2: '{/} http://cdn.xxx.com/lib/mod2' //{/}即代表采用自有路径,不跟随base路径
})
//使用扩展模块
layui.use(['mymod', 'mod1'], function(){
var mymod = layui.mymod
, mod1 = layui.mod1
, mod2 = layui.mod2;
mymod.hello('World!'); //弹出Hello World!
});