LayUi自定义模块的定义与使用

欢迎大家来到IT世界,在知识的湖畔探索吧!

layui中你模块其实是动态加载一个js，将其中的对象注册到layui的modules对象。

在layui中的modules数组中，存储所有的自定义模块。

1、定义layui模块

来源于官方文档定义方法

//config的设置是全局的 layui.config({ base: '/res/js/' //假设这是你存放拓展模块的根目录 }).extend({ //设定模块别名 mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录 });

欢迎大家来到IT世界,在知识的湖畔探索吧!

要注意在整体生命周期中config中的base只能有一个。

2、定义一个基本layui模块

目录路径为
/Style/Test/layui/module/module1.js

代码

欢迎大家来到IT世界,在知识的湖畔探索吧!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的全局自定义模块代码

直接代码

欢迎大家来到IT世界,在知识的湖畔探索吧!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"); }); });

代码说明:

• 使用注册函数方法，可以注册不同的目录下的不同的模块
• 同时防止重复注册