HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery与类库搭建 ——> 如何解决jQuery库与其他JS库的冲突2

如何解决jQuery库与其他JS库的冲突2

2015/04/28 22:00:17 | 作者:HTML5学堂(码匠) | 分类:jQuery与类库搭建 | 关键词:jQuery,JS库,命名冲突

解决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库

  1. <body>
  2.     <p id="pp">Test-prototype(将被隐藏)</p>
  3.     <p >Test-jQuery(将被绑定单击事件)</p>
  4. </body>
  5. <script src="prototype.js" type="text/javascript"></script>
  6. <script src="jquery.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.     jQuery.noConflict();    //将变量$的控制权让渡给prototype.js
  9.     jQuery(function(){        //使用jQuery
  10.         jQuery("p").click(function(){
  11.             alert( jQuery(this).text() );
  12.         });
  13.     });
  14.     $("pp").style.display = 'none';    //使用prototype.js隐藏元素
  15. </script>

此外还有另一种选择。自定义一个快捷方式。

  1. <script src="prototype.js" type="text/javascript"></script>
  2. <script src="scripts/jquery.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4.     /*自定义一个比较短快捷方式*/
  5.     var $j = jQuery.noConflict();
  6.     /*使用jQuery*/
  7.     $j(function(){                        
  8.         $j("p").click(function(){
  9.             alert( $j(this).text() );
  10.         });
  11.     });
  12.     /*使用prototype.js隐藏元素*/
  13.     $("pp").style.display = 'none';        
  14. </script>

欢迎沟通交流~HTML5学堂

二、jQuery库在其他库之前导入,那么可以直接使用jQuery来做一些jQuery的工作,同时也可以使用jQuery.noConflict()

  1. <script src="scripts/jquery.js" type="text/javascript"></script>
  2. <script src="prototype.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. /*直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。*/
  5.     jQuery(function(){
  6.         jQuery("p").click(function(){
  7.             alert( jQuery(this).text() );
  8.         });
  9.     });
  10.     $("pp").style.display = 'none'; //使用prototype
  11. </script>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端