layui自定义模块使用

学习教程 2019-08-01 137次浏览 1个评论

layui 自定义模块

1. 前言

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

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

2.用法

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

layui自定义模块使用

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自定义模块使用

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

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

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

layui自定义模块使用

layui自定义模块使用

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

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

喜欢 (395)