编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

LayUi自定义模块的定义与使用(layui自定义表格)

wxchong 2025-03-19 17:37:10 开源技术 2 ℃ 0 评论

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");
            });

    });

代码说明:

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

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表