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

標籤：script   lock   function   命名   解決方案   code   使用   source   1.7   

兩個庫同時都定義了一個叫$的函數，所以在同時使用的時候會發生衝突。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(   )調用jQueryjQuery(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時，使用$( )

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