背景
公司提供埋点代码给客户网站上埋点, 实现在线聊天/留言表单功能, 埋点代码中有 jQuery 代码, 客户网站也有 jQuery 代码, 客户说一埋上我们的代码控制台就报错
控制台报错信息如下:
jquery-ui.min.js:formatted:18 Uncaught TypeError: Cannot read properties of undefined (reading 'version')
Uncaught TypeError: owl.owlCarousel is not a function
跳转到报错处并格式化代码, 文件如下:
define(['jquery'], function($) {
'use strict';
function dialogPatch() {
$.widget('ui.dialog', $.ui.dialog, {
_createTitlebar: function() {
this.options.closeText = $('<a>').text('' + this.options.closeText).html();
this._superApply();
},
_setOption: function(key, value) {
if (key === 'closeText') {
value = $('<a>').text('' + value).html();
}
this._super(key, value);
}
});
}
return function() {
var majorVersion = $.ui.version.split('.')[0] // 此处报错
, minorVersion = $.ui.version.split('.')[1];
if (majorVersion === 1 && minorVersion >= 12 || majorVersion >= 2) {
console.warn('jQuery patch for CVE-2016-7103 is no longer necessary, and should be removed');
}
dialogPatch();
}
;
});
解决过程:
- 查看控制台报错, 发现是 jquery-ui.min.js 报错, 点击转到源码处, 格式化代码, 发现是 $.ui.version 报错 $.ui undefined
- 打断点, 清空缓存刷新页面, 发现
$.fn.jquery
确实是我们的 jQuery 版本号 (1.11.3), 说明这里用的 $ 确实是我们引入的 jQuery - 查看我们的埋点代码, 发现我们引入 jQuery 后马上写了
jQuery.noConflict(true)
解除绑定了, 按理说不会有版本冲突啊??
找不到原因, 只能瞎蒙
-
怀疑 jQuery 源码和调用 noConflict 之间有空隙被乘虚而入了(实际觉得这不可能吧?), 于是改为把 noConflict 这一步直接写到源码里(反正我们的埋点代码里也没咋用 jQuery), 然而客户网站仍然报错
-
发现报错代码里开头是 define 引入 jQuery , 而 jQuery 源码里也有个 define , 尝试去掉我们源码里这个, 客户网站没报错了, 解决