当前位置:首页 > 未分类 > 正文内容

同时使用requireJS和Layui时,解决在html文件中Layui扩展模块加载报错

admin2年前 (2024-02-25)未分类565

前言

部分后台管理框架使用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标签引入为声明模块。

之后不报错了,但是页面还是无法正常显示内容,并且页面打开过段时间后控制台会提示  Layui hint: skuTable is not a valid moduleLayui hint: sortable is not a valid module,于是按照以上解决思路操作后,发现sortable开头的判断进入了其他判断里,并没有进入Layui的判断里,于是修改了判断顺序,一切都正常了,完工!


提示:

修改后的模块不要随意用到其他项目里,以防出问题!

修改后的模块不要随意用到其他项目里,以防出问题!

修改后的模块不要随意用到其他项目里,以防出问题!

扫描二维码推送至手机访问。

版权声明:本文由前端开发技术分享发布,如需转载请注明出处。

本文链接:https://www.jqkcms.fun/?id=4

分享给朋友:

相关文章

在layui-tab中使用layui的table,table不能铺满……

在layui-tab中使用layui的table,table不能铺满,会差几个px(我测试差5个px,根据测试环境的不同,可能差的数量不一样)。给出以下几个方案供参考:1. 方案一:表头和表内容每一行的第一个td/th,增加左(或右)内边距5个px。如果列宽度使用的百分比,可能实际效果还会差一两个p...

UniApp H5 跨域代理配置并使用

UniApp H5 跨域代理配置并使用一、方式一:修改 manifest.json 文件在 UniApp 找到 manifest.json -》源码视图,添加 h5 配置项:"h5" : {     "dev...

vue 子组件调用父组件方法

示例:    父组件:   ...(略)   <子组件 @触发的方法="父组件方法"></子组件>   ...(略)  &nbs...

VUE开发报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent ...

VUE开发报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed p...

微信小程序 -- 由于隐私协议未设置,影响隐私相关api调用

在app.json中,usePrivacyCheck设置为false,可以免除在开发者工具中调试时的影响,开发版暂未测试。...