layui 自定义模块

1. 前言

今天在写一个功能模块的时候突然想起了以前想用但是没有的东西：layui自定义模块，于是按照官方文档进行编写，编写中我遇到两个大坑:

  • 坑一： 我自定义的 js 功能模块没有加载(已解决)
  • 坑二： 我想引入一个 js插件，但是一直加载不成功(解决中)，我想的是实在不行采用非模块化方式引入。
    虽然坑二未解决，但是如果你不引入外部 js插件也还是可以用的

2.用法

首先来看一下我的文件目录很重要的，标红的地方是我自定义的模块文件目录

layui自定义模块使用_plugin

layuiconfig.js，指定自定义 js 路径，此处注意”：号”后面的 mymod 指的是 js 文件，此处 js 省略了，前面的是模块名

layui.config({
    base: '/H-Admin/static/plugins/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名

    mymod: 'mymod', //如果 mymod.js 是在根目录，也可以不用设定别名
});

mymod.js 具体实现逻辑，我只写了最简单的

layui.define(function(exports){
    var obj = {
        myFun: function(){
            alert("hello ");
        }
    };
    
    exports('mymod', obj)
});

我是在 index 页面引入的

layui自定义模块使用_java_02

好了至此最简单的layui模块引入完成。

说说我第一个坑的解决办法

打开调试器 F12 查看这里的目录结构是否和你的项目目录结构一致，不一致肯定报错，我在这折腾很久。

layui自定义模块使用_plugin_03layui自定义模块使用_javascript_04

不一致就更改 base 后面值就好了，base 是相对项目上一层而言的。

至此定义一个简单的layui模块，讲解完毕，如有其他问题欢迎留言交流