JavaScript中解決jQuery和Prototype.js同時引入衝突問題

zhuxiaoxi發表於2018-01-20
JavaScriptjQueryJS

兩個庫同時都定義了一個叫$的函式，所以在同時使用的時候會發生衝突。jQuery( http://jquery.com/ https://jquery.org/ )中提供了一種返還$的使用權給其他js庫使用的方法。截至到這篇文章完成時(2018/01/20)，Prototype.js( http://prototypejs.org/ )的最新版本是1.7.3(2015/09/22)，未提供返還使用權的方法。

解決先載入Prototype.js後載入jQuery的問題

解決方法一

如何解決

在引入jQuery後使用jQuery.noConflict();返還$使用權，否則Prototype.js會呼叫失敗。

如何呼叫

  • 在需要使用jQuery時，使用jQuery( )代替$( )
  • 在需要使用Prototype.js時，使用$( )

解決方法二

如何解決

在引入jQuery後將jQuery的$繫結到其他物件上，例如$j，使用var $j = jQuery.noConflict();。

如何呼叫

  • 在需要使用jQuery時，使用$j( )代替$( )
  • 在需要使用Prototype.js時，使用$( )

解決方法三

如何解決

如果還希望在jQuery程式碼部分使用$，可以使用名稱空間的概念。將所有可以寫到document的ready()事件中的jQuery程式碼封裝到裡面，首先使用也jQuery.noConflict();返還$使用權。方法二中介紹的的將$繫結到其他物件中的方法，此時對於document的ready()外的事件同樣適用。

如何呼叫

  • 在jQuery(document).ready(function($){ })外需要使用jQuery時，使用jQuery( )代替$( )
  • 在jQuery(document).ready(function($){ })中需要使用jQuery時，使用jQuery( )

  • 在需要使用Prototype.js時，使用$( )

    舉例

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();  

在.ready()事件外，你可以使用jQuery(   )呼叫jQuery

jQuery(document).ready(function ($){  
//在.ready()事件內，你可以使用$(   )呼叫jQuery
});  

//在.ready()事件外，你可以使用$(   )呼叫Prototype.js

</script>

解決先載入jQuery後載入Prototype.js的問題

解決方法一

如何解決

兩種情況只有這點不同，這裡無需新增jQuery.noConflict();，來返還$使用權。

如何呼叫

  • 在需要使用jQuery時，使用jQuery( )代替$( )
  • 在需要使用Prototype.js時，使用$( )

解決方法二

如何解決

在引入jQuery後將jQuery的$繫結到其他物件上，例如$j，使用var $j = jQuery.noConflict();。

如何呼叫

  • 在需要使用jQuery時，使用$j( )代替$( )
  • 在需要使用Prototype.js時，使用$( )

解決方法三

如何解決

如果還希望在jQuery程式碼部分使用$，可以使用名稱空間的概念。將所有可以寫到document的ready()事件中的jQuery程式碼封裝到裡面。方法二中介紹的的將$繫結到其他物件中的方法，此時對於document的ready()外的事件同樣適用。

如何呼叫

  • 在jQuery(document).ready(function($){ })外需要使用jQuery時，使用jQuery( )代替$( )
  • 在jQuery(document).ready(function($){ })中需要使用jQuery時，使用jQuery( )
  • 在需要使用Prototype.js時，使用$( )

相關文章