码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript中解决jQuery和Prototype.js同时引入冲突问题

时间:2018-01-20 22:48:19      阅读:238      评论:0      收藏:0      [点我收藏+]

标签: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代码部分使用$,可以使用命名空间的概念。将所有可以写到documentready()事件中的jQuery代码封装到里面,首先使用也jQuery.noConflict();返还$使用权。方法二中介绍的的将$绑定到其他对象中的方法,此时对于documentready()外的事件同样适用。

如何调用

  • 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代码部分使用$,可以使用命名空间的概念。将所有可以写到documentready()事件中的jQuery代码封装到里面。方法二中介绍的的将$绑定到其他对象中的方法,此时对于documentready()外的事件同样适用。

如何调用

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

JavaScript中解决jQuery和Prototype.js同时引入冲突问题

标签:script   lock   function   命名   解决方法   code   使用   source   1.7   

原文地址:https://www.cnblogs.com/zhuxiaoxi/p/8322056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!