jquery与prototype冲突问题

 

一、magento -- 在magento模板开发中如何共用jQuery与Prototype库

      作为一个开放开源的电子商务平台，magento 的成功自不必说，然而magento 的开发人员可能从一开始就使用Prototype库，导致至今也还末完成jQuery 对Prototype的替换，因为实在是有太多的代码是使用Prototype写的，尽管jQuery 对Prototype的替换是事在必行。

      为了能夠在magento 中使用jQuery 丰富的web ui插件，程序员不得不面对这样的问题。

      如何才能在magento 中共用jQuery和Prototype呢，方法有很多种，而事实上作为我认为最成功的js库（连ms都不得不低头支持开源而在VS STUDIO中采用），jQuery 早就考虑到这点而提供了接口来帮助程序员处理共用两个库或能引起的冲突。

二、如果是先加载其它的js库，之后加载jQuery库，可以使用下列方法来处理。

      方法一：jQuery 库和它的所有插件都是在jQuery 名字空间内的，包括全局变量也是保存在jQuery 名字空间内的。默认使用$符号作为jQuery 的缩写。jQuery.noConflict();则是在任何时候，只要是在jQuery 库加载后就可以调用，将$符号的使用权返回给其它的js库，如果你想知道是什么实现的，其实很简单，jQuery 在创建它自己的名字空间时就将其它库的$保存在自己的一个变量当中，你可以自己去看一下jQuery 的源代码。

view plaincopy to clipboardprint?

1. <mce:script src="prototype.js" mce_src="prototype.js"></mce:script>  
2. <mce:script src="jquery.js" mce_src="jquery.js"></mce:script>  
3.    <mce:script type="text/javascript"><!--  
4. //各个js库之间的主要冲突在于$的冲突，这个方法是用来处理这个问题的
5.      jQuery.noConflict();  
7. //原本使用jQuery代码部分的$用jQuery替代
8.      jQuery(document).ready(function(){  
9.        jQuery("div").hide();  
10.      });  
12. // Use Prototype with $(...), etc.
13.      $('someid').hide();  
15. // --></mce:script>

       方法二：如果你仍然想使用类似于$这样比较简短的字符，你可以将jQuery.noConflict();的返回值赋值给某个变量。这个变量就是jQuery的新缩写了，当然你可以使用$以外的任意字符串，比如：

view plaincopy to clipboardprint?

1. <mce:script src="prototype.js" mce_src="prototype.js"></mce:script>  
2.    <mce:script src="jquery.js" mce_src="jquery.js"></mce:script>  
3.    <mce:script type="text/javascript"><!--  
4. //$j就相当于jQuery，名称你可以自主定义
5. var $j = jQuery.noConflict();  
7. // Use jQuery via $j(...)
8.      $j(document).ready(function(){  
9.        $j("div").hide();  
10.      });  
12. // Use Prototype with $(...), etc.
13.      $('someid').hide();  
15. // --></mce:script>

      方法三，如果你还是想使用$，而不想使用别的字符，也是可以的。而且通常程序员都比较喜欢这样做，因为这样做写好的代码几乎都不用替换原来的$符号。那就是利用名字空间的概念就所有的jQuery代码封装在document的ready事件名字空间范围内，如：

view plaincopy to clipboardprint?

1. <mce:script src="prototype.js" mce_src="prototype.js"></mce:script>  
2.   <mce:script src="jquery.js" mce_src="jquery.js"></mce:script>  
3.   <mce:script type="text/javascript"><!--  
4.     jQuery.noConflict();  
6. // Put all your code in your document ready area
7.     jQuery(document).ready(function($){  
8. // 这样你可以在这个范围内随意使用$而不用担心冲突
9.       $("div").hide();  
10.     });  
12. // Use Prototype with $(...), etc.
13.     $('someid').hide();  
15. / --></mce:script> 

 三、如果是先加载jQuery库，再加载其它的js库

       按照这样的顺序加载，就不存在其它js库的$符号被jQuery占用的问题。所以对其它的js库的代码可以不作任何修改，照常使用$，而对jQuery可以使用jQuery来替代$.如：

view plaincopy to clipboardprint?

1. <mce:script src="jquery.js" mce_src="jquery.js"></mce:script>  
2. <mce:script src="prototype.js" mce_src="prototype.js"></mce:script>  
3. <mce:script type="text/javascript"><!--  
4. // Use jQuery via jQuery(...)
5.   jQuery(document).ready(function(){  
6.     jQuery("div").hide();  
7.   });  
9. // Use Prototype with $(...), etc.
10.   $('someid').hide();  
12. --></mce:script> 

      或者你不想写jQuery这么长的字符，你可以通过

view plaincopy to clipboardprint?

1. var $j = jQuery; 

      来实现简短一点的$j，这可能是最好的办法了。不过，当你只想使用jQuery来写代码时，你可以通过名字空间仍然使用$,即采用和jQuery源代码一样的方法：

view plaincopy to clipboardprint?

1. (function($) {   
2. /* 在这个名字空间内，你可以随意使用$符号来引用jQuery，只不过是其它$被jQuery使用，你不能使用prototype或其它的js库 */ }  
3. )(jQuery) 

      这样我们就可以轻松的在magento 中同时使用多个js库，尤其是jQuery这个插件丰富的而且社区活跃的js库。