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

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

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

1、定义模块

来源于官方文档定义方法

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

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

定义一个基本模块

目录路径为 /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为当前目录下的文件名，同时也是模块名

核心关键点： 使用modules来判断是否已经注册，如果已经注册则不在注册，这个是核心的关键，否则会提示当前模块已经被注册

调用自定义模块

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

            });

    });