Jquery与其它js框架(MooTools以及Prototype、Dojo、YUI等等)之间共享冲突的解决办法

转自:zend实验室

注:jquery官方原文:Using jQuery with Other Libraries


本篇文章将帮助你解决Jquery与其它js框架之间的共享冲突的问题,实现jquery与Mootools之间的共存。最近在做一些关于CRM的界面,其中用到了一套界面库,是以Mootools为基础开发的,但是后来考虑需要引入一些新的组件,并且这些组件都是以jquery为基础开发的,如leightbox等。结果引入jquery之后却发现$在两个框架中都有各自的定义,冲突也显现出来了。经过收集,网上大致提供了三种解决办法。

方法一、

 

<html>
  <head>
    <script src="Mootools.js"></script>
    <script src="jquery.js"></script>
    <script>
      jQuery.noConflict();//释放jquery中$定义,并直接使用jQuery代替平时的$
      jQuery(document).ready(function(){
        jQuery("div").hide();
      });
      $('someid').style.display = 'none';//此处中的$为原Mootools中的$,使用方法不变
    </script>
  </head>
  <body>
  </body>
  </html>

 

方法二、

 

<html>
   <head>
     <script src="Mootools.js"></script>
     <script src="jquery.js"></script>
     <script>
       jQuery.noConflict();  
       //将你使用的jquery代码放到document ready方中
       jQuery(document).ready(function($){
         // 此处为jQuery的$定义
         $("div").hide();
      });  
       //此处为Mootools的定义
      $('someid').style.display = 'none';
     </script>
   </head>
   <body>
   </body>
</html>

 

方法三、

 

 <html>
  <head>
     <script src="Mootools.js"></script>
     <script src="jquery.js"></script>
    <script>
      var $j = jQuery.noConflict();//以$j来替代jQuery中的$,同时区分mootools
        $j(document).ready(function(){
        $j("div").hide();
        });
       $('someid').style.display = 'none';  //原mootools中的$照旧使用
    </script>
  </head>
  <body></body>
  </html>

 

  zend实验室强烈建议你使用第三中方法来解决jquery与其它js框架之间共享冲突问题,理由是它既简短,又能实现你想要的结果,并且不会像第二个方法中那样存在使用位置限制。想在哪用就在哪用,随心所欲。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章