整理jquery冲突的解决办法,以ecmall系统解决为例

今天调试项目的一个diy的问题时,发现diy的编辑框不出现了。这个diy是ecmall系统的。不出现后,个人觉得很奇怪,就开始分析查找原因。查找思路。

1.看看diy的模板是否有问题,,精排查,代码没有动,应该没有问题。

2.对比下之前的备份代码。【我有个习惯,每开发一个功能就会备份一遍代码】,经对比没有变化。

3.问题就集中在了我新加入的jquery轮播的插件上了。diy用的也是jquery编写。为了测试,我把刚刚写的jquery插件删除,然后登陆后台进行模板编辑。此时就好了,所以我断定是jquery的老毛病,冲突了。

于是,搜集整理了一些解决jquery的冲突的办法。力求最全。

首先:jquery与其他js冲突的问题,如jquery与prototype。

问题描述:当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突。

第一种情况:jquery.js在prototype.js之后进行引入,如:

< script src = " prototype.js " type = " text/javascript " /> < script src = " jquery.js " type = " text/javascript " />   在这种情况下,我们在自己的js代码中如下写的话: $( ‘ #msg ‘ ).hide(); $永远代表的是jquery中定义的$符号,也可以写成JQuery(‘#msg’).hide();如果想要使用prototype.js中定义的$,我们在后面再介绍。

第二种情况:jquery.js在prototype.js之前进行引入,如:

< script src = " jquery.js " type = " text/javascript " /> < script src = " prototype.js " type = " text/javascript " /> 在这种情况下,我们在自己的js代码中如下写的话: $( ‘ #msg ‘).hide(); $此时代表的prototype.js中定义的$符号,如果我们想要调用jquery.js中的工厂选择函数功能的话,只能用全称写法JQuery(‘#msg’).hide().

下面先介绍在第一种引入js库文件顺序的情况下,如何正确的使用不同的js库中定义的$符号。

一.使用JQuery.noConflict() 该方法的作用就是让JQuery放弃对$的所有权,将$的控制权交还给prototype.js,因为jquery.js是后引入的,所以最后拥有$控制权的是JQuery。它的返回值是JQuery。当在代码中调用了该方法以后,我们就不可以使用$来调用JQuery的方法了,此时$就代表在prototype.js库中定义的$了。如下:

JQuery.noConflict();JQuery('#msg').hide(); //此处不可以再写成$('#msg').hide(),此时的$代表prototype.js中定义的$符号。 自此以后$就代表prototype.js中定义的$,jquery.js中的$无法再使用,只能使用jquery.js中$的全称JQuery了。二.自定义JQuery的别名

如果觉得第一种方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全称比较麻烦的话,我们还可以为JQuery重定义别名。如下:

var $j = JQuery.noConflict(); $j(‘#msg’).hide(); // 此处$j就代表JQuery 自此以后$就代表prototype.js中定义的$,jquey.js中的$无法再使用,只能使用$j来作为jquey.js中JQuery的别名了。

三.使用语句块,在语句块中仍然使用jquery.js中定义的$,如下:

JQuery.noConflict(); JQuery(document).ready(function($){ $(‘#msg’).hide();//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. });

或者使用如下语句块: (function($){ $(‘#msg’).hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery)

如果在第二种引入js库文件顺序的情况下,如何使用jquery.js中的$,我们还是可以使用上面介绍的语句块的方法,如:

<script src = "jquery.js" type = "text/javascript" /> <script src = "prototype.js" type = "text/javascript" /><script type="text/javascript">(function($){ $(‘#msg’).hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery)</script>

这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

其次:jquery版本之间冲突问题的解决方案

案例:解决jQuery1.3.2和1.4.2的冲突。(本例已测试通过!)

第一步:在1.4.2的源代码的最后加上一句 :

1

var $j4 = jQuery.noConflict(true);

之所以在源码这里加,而不是像大多数文章提的在要用到的时候加,这是因为很多基于1.4.2的插件都要加,在这里加可以避免过多插件加这句代码导致重复。这一句是将1.4.2的jQuery和$的引用权限全部放弃。也就是基于1.4.2的插件不能再用jQuery和$了。同时给予$j4的新的命名空间,注意它是window的属性。看1.4.2的源代码会发现它其实也就执行了这两句:

1

2

window.$=_$;

window.jQuery=_jQuery;

道理同window.$=_temp$(返还命名空间)只是命名不同而已。

第二步:在基于1.4.2的框架的所有插件的头部加上以下代码:

1

var _temp$ = window.$,_tempjQuery = window.jQuery;

将jQuery1.3.2的$和jQuery放到临时的变量空间上:

1

window.$ = $j4;

这句和下面的那句都是为了给中间的代码能够正确使用jQuery和$用的。后面的$j4是赋予他们正确的引用。

1

window.jQuery = $j4;

之所以要先放临时变量存储,有三点必须这样做的理由:

①.我们不希望改动大量的jQuery插件源代码,最好是不动,即使改的话,尽量改的少。而在头部尾部加改动代码,中间的原始代码不动也是不错的一种方式。

②.因为1.4.2的已经放弃了jQuery和$的控制权,但是已有的插件代码又用了他们来做引用,因为插件不可能预知冲突,即使有冲突他人开发的插件也一定要用$或者jQuery引用,除非它不是jQuery下的插件。

③.为了防止插件里面直接用window.$和window.jQuery进行引用从而导致引用到1.3.2的jQuery和$,虽然这种情况比较少,但是以防万一。

中间的原始代码不动,尾部加以下代码:

1

2

window.$ = _temp$;//将$的引用权限返还给jQuery1.3.

window.jQuery = _tempjQuery;//将jQuery的引用权限返还给jQuery1.3.

第三步:以后要用基于jQuery1.4.2的选取函数就只能用$j4(element)了。

销售世界上第一号的产品——不是汽车,

整理jquery冲突的解决办法,以ecmall系统解决为例

相关文章:

你感兴趣的文章:

标签云: