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

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

最近在看一些关于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