如何扩展 layui 模块
layui 官方提供的模块有时可能还无法满足你,或者你试图按照 layui 的模块规范来扩展一个模块。那么你有必要认识layui.define()
方法。下面就让我们一起扩展一个 layui 模块吧:
第一步:确认模块名,假设为:mymod,然后新建一个mymod.js 文件放入项目任意目录下(注意:可以不用放入layui目录,当然如果你非要放也是可以的),我把 mymod.js 放置于 /public/static/js/module/
目录下;
第二步:编辑mymod.js的内容,假设是下面这样
/**
扩展一个 mymod 模块
**/
layui.define(function(exports){ // 提示:模块也可以依赖其它模块,如:layui.define(['layer', 'form'], callback);
var obj = {
hello: function(str){
alert('Hello ' + (str || 'mymod'));
}
};
// 输出 mymod 接口
exports('mymod', obj);
});
第三步:在需要使用到该拓展模块的页面(比如 index.html),通过以下方法调用
layui.config({
base: '/public/static/js/module/' // 这是你存放拓展模块的根目录
}).extend({
mymod: 'mymod' // 如果 mymod.js 是在根目录,也可以不用设定别名
// 假如你在 module 目录下有个子目录 test,里面有一个 mod1.js 文件(除exports语句,其他内容和mymod.js一致),而且执行了 exports('mod1', callback),那么这里可以扩展一个别名
,mod1 = 'test/mod1'
});
layui.use(['element', 'mymod', 'mod1'], function(){
var element = layui.element
,mymod = layui.mymod
,mod1 = layui.mod1;
mymod.hello('World!');
mod1.hello();
});