日期:2014-05-16  浏览次数:20373 次

jquery与其他js冲突问题 解决

jquery里ajax非常好用,前一些天把项目部署到服务的时候,出现页面出现js错误,不支持length。。等属性,把出现js错误定位下,发现jquery里ajax嵌套其他的js。最后发现prototype.js,coypSelect.js与jquery
发生冲突,最后把jquery里ajax去掉了,换成var myAjaxs=new Ajax.Request();

今天在网上搜下相关文章,根源原来是:

? 由于jQuery以及 prototype.js,coypSelect.js都使用了美元符函数“$”作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用。

?

?下面是我在网上搜到解决问题的文章:

流行的解法:

不过很快,有很多人给出了解决方案,如比较流行的方案是这样 的:


Js代码 复制代码
  1. <script?src="http://jquery.com/src/latest/"></script>?? ??
  2. ??<script?type="text/javascript">?? ??
  3. ?????JQ?=?$;??//rename?$?function?? ??
  4. ?</script>?? ??
  5. <script?src="prototype.js"></script>???
<script src="http://jquery.com/src/latest/"></script>  
  <script type="text/javascript">  
     JQ = $;  //rename $ function  
 </script>  
<script src="prototype.js"></script> 
?

这样一来,你可以使用JQ来代替jQuery里的$函数名,而prototype的$函数照常使用,像这样:

?
Js代码 复制代码
  1. <script?type="text/javascript">?? ??
  2. ??JQ(document).ready(function(){?? ??
  3. ???JQ("#test_jquery").html("this?is?jquery");?? ??
  4. ???$("test_prototype").innerHTML="this?is?prototype";?? ??
  5. ??});?? ??
  6. ?</script>???
 <script type="text/javascript">  
   JQ(document).ready(function(){  
    JQ("#test_jquery").html("this is jquery");  
    $("test_prototype").innerHTML="this is prototype";  
   });  
  </script> 
?

尽管这种办法在一定程度上解决了两者的冲突,但作为jQuery的死忠,我是万分不情愿改写$为JQ或其他替代的字符。反之Prototype的粉丝估计也会这样想。那么,是不是有另一种解决方案,让两种框架能和谐共处呢?现在流行和谐嘛!

另类解法:

先看一小段代码,猜一下会有什么效果?

?

Js代码 复制代码
  1. 1.?<script?type="text/javascript"> ??
  2. 2.?(function(name){?? ??
  3. 3.?????alert('hello?'+?name);?? ??
  4. 4.?})("