五種方法解決Magento中jQuery和Prototype兼容性

時間 2019-11-07

標籤五種方法解決 magento jquery prototype 兼容性欄目 JQuery 简体版

原文原文鏈接

Magento的發佈版本里的JS大可能是用Prototype寫的，若是須要引入jQuery的話，可能有些變量會衝突，因此須要作些處理來處理jQuery和Prototype的兼容性。javascript

第一種狀況：先加載Prototype，再加載jQuery

方法一：jQuery 庫和它的全部插件都是在jQuery名字空間內的，包括全局變量也是保存在jQuery 名字空間內的。

使用jQuery.noConflict();主要做用是在任什麼時候候，只要在jQuery加載後就能夠調用，將$符號的使用權返回給其它的js庫，jQuery在建立它本身的名字空間時就將其它庫的$保存在本身的一個變量當中。php

<html>
<head>
  <script src="prototype.js"></script>
  <script src="jquery.js"></script>
  <script type="text/javascript" >
     //各個js庫之間的主要衝突在於$的衝突，這個方法是用來處理這個問題的
     jQuery.noConflict();  
 
     //本來使用jQuery代碼部分的$ 用jQuery替代
     jQuery(document).ready(function (){
       jQuery("div").hide();
     }); 
 
     // Use Prototype with $(...), etc.
     $('proto').hide();
  </script>
</head>
<body></body>
</html>

方法二：若是你仍然想使用相似於$這樣比較簡短的字符，你能夠將jQuery.noConflict()的返回值賦值給某個變量。這個變量就是jQuery的新縮寫了，固然你可使用$之外的任意字符串，好比：html

<html>
<head>
  <script src="prototype.js"></script>
  <script src="jquery.js"></script>
  <script type="text/javascript" >
     //$j就至關於jQuery，名稱你能夠自主定義
     var  $j = jQuery.noConflict();  
 
     // Use jQuery via $j(...)
     $j(document).ready(function (){
       $j("div").hide();
     });  
 
     // Use Prototype with $(...), etc.
     $('proto').hide();
  </script>
</head>
<body></body>
</html>

方法三：若是你仍是想使用$，而不想使用別的字符，也是能夠的。並且一般程序員都比較喜歡這樣作，由於這樣作寫好的代碼幾乎都不用替換原來的$符號。那就是利用名字空間的概念就全部的jQuery代碼封裝在document的ready事件名字空間範圍內，如：jQuery(document).ready(這裏填入jQuery代碼)，Magento筆記喜歡使用這種方法：java

<html>
<head>
  <script src="prototype.js"></script>
  <script src="jquery.js"></script>
  <script type="text/javascript" >
    jQuery.noConflict();  
 
    // Put all your code in your document ready area
    jQuery(document).ready(function ($){
      // 這樣你能夠在這個範圍內隨意使用$而不用擔憂衝突
      $("div" ).hide();
    });  
 
    // Use Prototype with $(...), etc.
    $('proto' ).hide();
  </script>
</head>
<body></body>
</html>

第二種狀況：先加載jQuery，再加載Prototype

按照這樣的順序加載，就不存在其它js庫的$符號被jQuery佔用的問題。因此對其它的js庫的代碼能夠不做任何修改，照常使用$，而對 jQuery可使用jQuery來替代$.如：jquery

<html>
<head>
  <script src="prototype.js"></script>
  <script src="jquery.js"></script>
  <script type="text/javascript" >
  // 使用 jQuery 用 jQuery(...)
  jQuery(document).ready(function (){
    jQuery("div" ).hide();
  });  
 
  // 使用 Prototype 時，用 $(...),
  $('someid' ).hide();
  </script>
</head>
<body></body>
</html>

或者你不想寫jQuery這麼長的字符，你能夠經過另一種方法：程序員

var  $j = jQuery;

來實現簡短一點的$j，這多是最好的辦法了。

不過，當你只想使用jQuery來寫代碼時，你能夠經過名字空間仍然使用$,即採用和jQuery源代碼同樣的方法：ide

<script type="text/javascript" >
    (function($) {
    /* 在這個名字空間內，你能夠隨意使用$符號來引用jQuery，只不過是其它$被jQuery使用，你不能使用prototype或其它的js庫
    */ }
    )(jQuery)
</script>

參考來源：http://docs.jquery.com/Using_jQuery_with_Other_Libraries spa