Discuz和jQuery冲突的解决办法

时间：2011-4-21     作者：smarteng     分类： WEB相关

Discuz和jQuery有两个冲突的地方。

冲突一、Array.prototype.push函数冲突

Discuz 7.0版本为了兼容低版本的IE，重写了Array的push方法，代码位于include/common.js中，如下：



1
2
3
4
Array.prototype.push = function(value) {
   this[this.length] = value;
   return this.length;
}


但以上代码没有做任何检测直接进行了覆盖导致冲突，解决办法是修改为如下代码：

 



1
2
3
4
5
6
if(typeof Array.prototype.push === 'undefined') {
   Array.prototype.push = function(value) {
      this[this.length] = value;
      return this.length;
   }
}


此问题在Discuz 7.2中估计已经修复，因为在common.js中没有找到以上代码；Discuz_X1.5中同样未找到。

冲突二、$(id)函数冲突

Discuz使用了S()作为对象选取函数，刚好与jQuery默认的$()函数重合造成冲突，代码依旧位于include/common.js中，如下：



1
2
3
function $(id) {
   return document.getElementById(id);
}


解决方法1：

将jquery.js在common.js之前载入，不然jquery的$()函数会覆盖common.js的$()函数；然后用到jQuery的$()函数的地方都用jQuery()代替。

解决方法2：

将jquery.js在common.js之后载入，在调用jQuery的函数前使用一下代码：



1
var jq = jQuery.noConflict();


以上是将$()函数映射回原来的$()函数；之后便可以使用jq()或jQuery()来代替jQuery原来的$()函数，这里jq和jQuery相同，而$()函数则是原来Discuz的$()函数。

解决方法2也可使用jQuery.noConflict()的其他用法代替，参见后面的使用说明。

xprins同学提到Discuz_X1.5，特意安装试用了一下，使用以上方法可以解决问题，提供一下Discuz X1.5和jQuery冲突的解决办法 给大家做参考。

=============

jQuery.noConflict() 使用说明

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。这有助于确保jQuery不会与其他库的$对象发生冲突。

在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$(“div p”)的地方，就必须换成jQuery(“div p”)。

注意:这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。



1
2
3
4
5
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';


恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。



1
2
3
4
5
6
7
jQuery.noConflict();
(function($) {
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
// 其他用 $ 作为别名的库的代码


可以通过jQuery.noConflict()级联函数来简化写法。



1
2
3
4
jQuery.noConflict()(function(){
  // 使用 $ 作为 jQuery 别名的代码
});
// 其他用 $ 作为别名的库的代码


创建一个新的别名用以在接下来的库中使用jQuery对象。



1
2
3
4
5
var j = jQuery.noConflict();
// 使用 jQuery 的代码
j("div p").hide();
// 使用其他库的 $() 的代码
$("content").style.display = 'none';


把jQuery完全移动到另一个命名空间的对象上，如下



1
2
3
4
5
6
7
8
var dom = {};
dom.query =jQuery.noConflict(true);
// 使用新 jQuery 的代码
dom.query("div p").hide();
// 使用其他库的 $() 的代码
$("content").style.display = 'none';
// 使用 jQuery 的代码
jQuery("div > p").hide();


参考：http://api.jquery.com/jQuery.noConflict/

上一篇:今天升级了一下 下一篇:转：俞军的PM12条
smarteng
smarteng

人生就流星，虽然转瞬即逝，但也有永恒。

恰饭
分类
热门文章
最新日志
存档
标签
timestamp datetime time awk 技术文章 SEM 营销 赚钱 go-zero 抓包 测试覆盖率 系统 hostname goquery mockgen gomock validator urldecode urlencode redirect context port pulsar Consul epoll yaml 错误处理 code-review xlsx excel c 读书 阅读 写作 生活 shen 统计 test Module mod 效率 无密码 天网 Future video computer tmux ce Logrotate supervisor command screen rsa java markdown 测试 水平居中 error brew homebrew http nodejs composer 工具 框架 gopath gomod golang go 播放器 服务器 腾讯云 单元测试 爬虫 命令 emlog replace 模型 PHP升级 阿里云 习惯 group_concat SQL Server PHPExcel 面试 单点登录 开源项目 tag guid yaf md5 博客 微博 团队 Geolocation Mac 客户端 网赚 豆瓣 编程语言
京东