【HDCX】解决某协网站jquery和基础代码冲突的问题

Posted by zhang on

最近在看一些关于JS以及jQuery的书,突然想起在做某协网站还有一个存在已久的BUG……

为了实现首页的一个大幻灯轮换,我引用了JQuery库,不过由于网站是基于开源程序Discuz来做的,DIY功能和下来菜单无法使用。当时年少无知也不知道是什么原因,再加上工期紧任务重→_→被某泽催的。只好跳过去不去管它,毕竟不影响展示效果。

想起这个BUG,我今天又详细的查阅了一些技术文档,发现造成这个问题的原因原来是Discuz与jQuery不兼容……不兼容,你在逗我是么。。。

一.问题原因

通过分析jQuery和common.js的源码,我发现jQuery是通过全局变量$来实现引用的,而Discuz的common.js也同样占用了$。因此,冲突的根源就是这个全局变量$。说的明白点,两个帅锅(jQuery和common.js)同时存在,但只有一个美眉($),美眉归谁的问题

这两个库在加载的时候都会占用$变量。因此,按照覆盖的原理,谁后加载,$变量就是谁。从而导致脚本停止运行。

二.解决思路

知道了问题原因,那么解决方法也很简单,把jQuery和common.js其中一个的全局变量$给替换掉。

虽然说的简单,但是要换掉哪个$呢?common.js是核心文件,虽然某协网站中Discuz核心文件被我改动了近千行,数百个文件。但是毕竟那是年少无知不懂事的时代。尽量还是不要更改common.js。那就只能改jQuery了。

其实jQuery团队早就想到了这一问题,并实现了 noConflict() 方法。noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

另外还可以通过全名替代简写的方式来使用 jQuery,即把变量简写$替换成全名jQuery。

除了common.js和jQuery.js文件,一般还会涉及到控制特效的js文件,了解了这些问题后就可以进行下面的操作了。

三.解决方法

1.将$释放给common.js

2.将控制特效的js文件

实现代码:

第一种:

在jquery库的文件结尾添加

jQuery.noConflict();

然后把特效控制的js文件中的

$(

全部替换成

jQuery(

保存好所有文件,更新一下缓存,问题就都解决了,看看是不是不冲突了。

第二种:(原理同上,只不过是自造了一个简写,这也是我用的方法)

在调用jQuery的函数前添加一个变量

var jq = jQuery.noConflict();

将$()函数映射回原来的$()函数;之后便可以使用jq(来替换$(。

当然,我们还可使用jQuery.noConflict()的其他用法代替。可以看下w3school里的关于jQuery - noConflict() 方法介绍http://www.w3school.com.cn/jquery/jquery_noconflict.asp

#About Me

张小璋,野蛮生长成世界500强企业供应链金融产品经理的法语毕业生。微信公众号:张小璋碎碎念(ID: SylvainZhang )。
一直在互联网金融公司从事产品经理工作并负责互联网金融产品线,深耕互联网金融和区块链领域。「PMCAFF」、「人人都是产品经理」专栏作家、「PmTalk」签约作家。