解决jQuery库与其他JS库的冲突
HTML5学堂：在我们进行开发时，我们经常使用各种类库/框架辅助操作。当我们引入jQuery以及zepto等使用$作为变量名的框架时，必然会产生冲突，那么应当如何处理冲突呢？
为什么会发生冲突
在jQuery库中，几乎所有的插件都被限制在他的命名空间里。通常全局对象都被很好地存储在命名空间里，一次在和其他库一起使用时，一般不会引起冲突。
如何解决冲突
虽然其他库与jQuery库一般不会发生冲突,但由于"$"是jQuery自身的快捷符,而其他JS库中也含有"$"符,如果多库共存,那么,就存在是哪个库使用"$"符的问题,为了解决这个问题,在jQuery中,可以通过函数jQuery.noConfliet(),将变量"$"的使用权过渡给需要使用的其他JS库,其调用的语法格式为:
jQuery.neConflict()
这个函数的作用是变更"$"变量的使用权,以确定jQuery库不与其他库相冲突,使用权变更后,就只能使用jQuery变量访问jQuery对象。
虽然通过函数jQuery.noConfliet()可以很好地解决多库共存时变量符"$"的使用权问题,但在实际的应有中,又分为jQuery在其他库前导入与在其他库后导入两种情况。
一、jQuery库与在其他库之后引入；
在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$控制权交给其他JS库
-
<body>
-
<p id="pp">Test-prototype(将被隐藏)</p>
-
<p >Test-jQuery(将被绑定单击事件)</p>
-
</body>
-
<script src="prototype.js" type="text/javascript"></script>
-
<script src="jquery.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
-
jQuery(function(){ //使用jQuery
-
jQuery("p").click(function(){
-
alert( jQuery(this).text() );
-
});
-
});
-
$("pp").style.display = 'none'; //使用prototype.js隐藏元素
-
</script>
此外还有另一种选择。自定义一个快捷方式。
-
<script src="prototype.js" type="text/javascript"></script>
-
<script src="scripts/jquery.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
/*自定义一个比较短快捷方式*/
-
var $j = jQuery.noConflict();
-
/*使用jQuery*/
-
$j(function(){
-
$j("p").click(function(){
-
alert( $j(this).text() );
-
});
-
});
-
/*使用prototype.js隐藏元素*/
-
$("pp").style.display = 'none';
-
</script>
欢迎沟通交流~HTML5学堂
二、jQuery库在其他库之前导入，那么可以直接使用jQuery来做一些jQuery的工作，同时也可以使用jQuery.noConflict()
-
<script src="scripts/jquery.js" type="text/javascript"></script>
-
<script src="prototype.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
/*直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。*/
-
jQuery(function(){
-
jQuery("p").click(function(){
-
alert( jQuery(this).text() );
-
});
-
});
-
$("pp").style.display = 'none'; //使用prototype
-
</script>
欢迎沟通交流~HTML5学堂
极客编程技术分享
