同时使用requireJS和Layui时,解决在html文件中Layui扩展模块加载报错
前言
部分后台管理框架使用Layui作为前端,并且使用了requireJS,期间可能出现的加载Layui扩展模块加载不了,或加载报错的问题。
若无法加载或报错模块不是前言中提到的模块,可直接参考后面的解决思路。
本次解决的问题的前提:
1,使用requireJS;
2,使用Layui;
3,使用的Layui扩展模块SkuTable,其中SkuTable本身又使用了sortable扩展模块。
解决方案
先上解决方案。
html的js部分中:
// 先声明模块(不熟悉的,可以参考这个链接:https://layui.dev/docs/2/modules.html#extend)
layui.extend({
sortable: '{/}sortable.js所在目录/sortable',
skuTable: '{/}skuTable.js所在目录/skuTable',
});
// 然后使用模块
layui.use(['skuTable','其他模块',…], function () {
// 你的代码
})skuTable.js 无需修改。
sortable.js 做了很多适配,需要修改下适配顺序。sortable.js 中需要修改的(仅开头一处,约第8行开始,修改为下面的):
// TODO 适配 layui 模块
if (typeof exports === 'object' && typeof module !== 'undefined') { // 原第1项判断
module.exports = factory();
} else if (window.layui && layui.define) { // 原第3项判断,改到第2项
layui.define(function (exports) {
exports('sortable', factory());
});
} else if (typeof define === 'function' && define.amd){ // 原第2项判断,改到第3项
define(factory);
} else { // 原第4项判断
global = global || self;
global.Sortable = factory();
}解决方案end
解决思路
注:仅限没有其他思路的情况(若对相关技术不熟悉,先查文档!先查文档!先查文档!)
1,依次在要修改的页面的 html 文件、js 文件,以及要使用的扩展模块的 js 文件打印输出随机文字;
2,访问对应页面,查看浏览器控制台输出;
3,根据输出顺序以及结果,判断文件加载顺序,以及是加载问题还是加载成功但是模块js需要调整。
以本次解决为例:
本次使用的后台管理框架 EasyAdmin 。
最开始使用的通过js标签引入的方式,引入skuTable没有问题,但是引入sortable报错了,于是放弃了sortable功能。
后来不甘心,感觉应该是技术不到家,因为skuTable给的例子是可以正常运行的,于是在群里问了下,没有得到结果。没办法,只能去翻Layui的文档,在模块部分看到了 声明模块 的方式,修改js标签引入为声明模块。
之后不报错了,但是页面还是无法正常显示内容,并且页面打开过段时间后控制台会提示 ,,于是按照以上解决思路操作后,发现sortable开头的判断进入了其他判断里,并没有进入Layui的判断里,于是修改了判断顺序,一切都正常了,完工!
提示:
修改后的模块不要随意用到其他项目里,以防出问题!
修改后的模块不要随意用到其他项目里,以防出问题!
修改后的模块不要随意用到其他项目里,以防出问题!