layui中你模块其实是动态加载一个js,将其中的对象注册到layui的modules对象。
在layui中的modules数组中,存储所有的自定义模块。
1、定义layui模块
来源于官方文档定义方法
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
要注意在整体生命周期中config中的base只能有一个。
2、定义一个基本layui模块
目录路径为
/Style/Test/layui/module/module1.js
代码
layui.define(['layer','laydate'],function (exports) {
var layer = layui.layer;
//定义一个对象
var o = {
sayHello: function (str) {
layer.msg(str);
}
};
//输出 mymod 接口
exports('module1', o);
});
3、注册当前模块到layui中
编写一个通用注册模块的方法
//注册一个目录下的模块
function registerLauiModule(baseDir,moduleNames) {
function moduleIsExist(moduleName) {
var retValue = false;
for (var o in layui.modules) {
if (o === moduleName) {
retValue = true;
break;
}
}
return retValue;
}
var arrModuleName = moduleNames.split(',');
var moduleConfig = {};
$.each(arrModuleName, function (i, item) {
if (moduleIsExist(item) !== true) {
moduleConfig[item] = "{/}" + baseDir + "/" +item;
}
});
var moduleCount = 0;
for (var o in moduleConfig) {
moduleCount++;
}
if (moduleCount > 0) {
layui.extend(moduleConfig);
}
}
其中 baseDir,为注册的目录 moduenames为当前目录下的文件名,同时也是模块名,可以是多个使用,进行分隔,
核心关键点:
使用layui.modules来判断是否已经注册,如果已经注册则不再注册,这个是核心的关键,否则会提示当前模块已经被注册,防止重复注册。
4、调用自定义layui模块
注册好后就可以layui.use进行使用layui的全局自定义模块代码
直接代码
var $ = layui.$;
$(function () {
registerLauiModule("/Style/Test/layui/module/", "module1,module2");
registerLauiModule("/Style/Test/extModule/", "module3");
layui.use(["module1", "module3"], function() {
var module1 = layui.module1;
var module3 = layui.module3;
module1.sayHello("hello1");
module3.sayHello("hello2");
//module2.sayBye("bye1");
});
});
代码说明:
- 使用注册函数方法,可以注册不同的目录下的不同的模块
- 同时防止重复注册
本文暂时没有评论,来添加一个吧(●'◡'●)