轻松搞定jQuery.noConflict()


Posted in Javascript onFebruary 15, 2016

jQuery是目前使用最广泛的前端框架之一,有大量的第三方库和插件基于它开发。为了避免全局命名空间污染,jQuery提供了jQuery.noConflict()方法解决变量冲突。这个方法,毫无疑问,非常有效。遗憾的是,jQuery的官方文档对该方法的描述不够清晰,许多开发者并不清楚当他们调用jQuery.noConflict()时,究竟发生了什么,从而导致在使用时出现了许多问题。尽管如此,jQuery.noConflict()背后实现原理依然值得Web开发者学习掌握,成为解决类似全局命名空间污染问题的利器。

jQuery.noConflict()的作用?
  jQuery.noConflict()的存在只有一个目的:它允许你在同一个页面加载多个jQuery实例,尤其是不同版本的jQuery。你可能会觉得奇怪,为什么要在一个页面加载/使用多个不同版本的jQuery对象呢?一般而言,有两种情况。第一种情况,你的业务代码采用了最新版的jQuery库,而你选用的第三方插件依赖的更早版本的jQuery库;第二种情况,你正维护着一个系统,它已有的业务代码由于各种原因,引用了较老版本的jQuery库,你新开发的模块采用的是其他版本的jQuery库。不论哪种情况,你都不得不面对,jQuery对象/方法冲突的问题。幸运的是,jQuery.noConflict()帮你解决了这个烦恼。

jQuery被加载时发生了什么?
  当jQuery被页面引用/加载时,它被封装在一个自执行函数(匿名函数)里,它提供的所有一切变量、函数、对象都在匿名函数内部的可执行环境内,外部环境无法调用,以防止全局命名空间污染。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQuery在匿名函数内部定义了两个全局对象:jQuery和$,把自己暴露给外部环境。开发者习惯使用的各种公共方法都是通过这两个对象进行访问的,如jQuery.ajax(),jQuery.css()等。在最初,它们指向匿名函数内部的同一个对象jQuery(私有变量),通过它访问匿名函数内部的私有变量和函数。这使得匿名函数在自执行后其内部的私有变量和函数仍然进驻在内存里,不会被javascript的垃圾回收机制清除。

window.jQuery = window.$ = jQuery;

  当jQuery被页面加载后,当前页面有可能已经存在了jQuery和$这两个全局变量(比如,加载了其它的第三方库,其内部也定义了它俩),这就会导致已经存在的对象被覆盖(全局命名空间污染)。为了解决这个问题,jQuery在内部先将已经存在的全局变量缓存起来,保存在私有变量_jQuery和_$中,供后续调用。所以,如果页面在加载jQuery库时,还不存在jQuery和$对象,那么_jQuery和_$都是undefined;否则,它们都会保存对已有jQuery和$的引用(也许来自之前引用的第三方库或是不同版本的jQuery库)。之后,jQuery会像上文说描述的那样,覆盖这两个全局变量并将自己暴露给外部环境。至此,页面上的全局变量jQuery和$已经指向刚刚引入的jQuery库。

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

// Otherwise expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery;

jQuery.noConflict()的神奇效果?
  假设你维护的系统已经引用了1.7.0版本的jQuery库,而你在新添加的功能里引用了1.10.2版本的jQuery库。那么,还有办法重新使用jQuery 1.7.0 或是同时使用两个版本的jQuery库吗?答案是肯定,那就是jQuery.noConflict()。实际上,利用jQuery.noConflict(),你可以立刻把全局变量jQuery和$重新指向之前引用的对象。很神奇吧?这就是为什么jQuery在对外暴露自己前内部缓存了之前引用的对象。
  jQuery.noConflict()接受一个可选的布尔值参数,通常默认值是false。这个参数会带来什么影响呢?其实,很简单。如果调用jQuery.noConflict()或是jQuery.noConflict(false),只有全局变量$会被重置恢复成之前的引用值;如果调用jQuery.noConflict()或是jQuery.noConflict(true),那么全局变量jQuery和$都会被重置恢复成之前的引用值。这一点非常重要,建议牢记。当你调用jQuery.noConflict(false/true)之后,它会返回当前jQuery的实例,利用这个特性我们可以实现jQuery的重命名。

// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

我们再来看一个代码片段,测试一下是否真正理解了神奇的noConflict()

<!-- jQuery and $ are undefined -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery and $ now point to jQuery 1.10.2 -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.7.0 -->

<script>jQuery.noConflict();</script>
<!-- jQuery still points to jQuery 1.7.0; $ now points to jQuery 1.10.2 -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.6.4 -->

<script>var jquery164 = jQuery.noConflict( true );</script>
<!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 -->

避免第三方库的冲突
  以上的代码片段展示了如何解决多版本jQuery的冲突。接下来,我们尝试解决jQuery库和第三方库的冲突,下面出现的代码片段在jQuery的官方文档中都有,有兴趣的程序猿可以仔细阅读官方文档体会其中的区别。

1、直接使用No-Conflict模式
  使用No-Conflict模式,其实就是对jQuery进行重命名,再调用。

<!-- 采用no-conflict模式,jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
var $j = jQuery.noConflict();
// $j 引用了jQuery对象本身.
 
$j(document).ready(function() {
  $j( "div" ).hide();
});
 
// $ 被重新指向prototype.js里定义的对象
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
  var mainDiv = $( "main" );
}
 
</script>

2、使用自执行函数封装
  使用这种方式,你可以在匿名函数内部继续使用标准的$对象,这也是众多jQuery插件采用的方法。需要注意的是,使用这种方法,函数内部无法再使用prototype.js定义的$对象了。

<!-- jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
jQuery.noConflict();
 
(function( $ ) {
  // Your jQuery code here, using the $
})( jQuery );
 
</script>

3、使用标准jQuery(document).ready()函数
  如果jQuery库在其它库之前引入,那么jQuery内部定义的jQuery和$会被第三方库覆盖,这时候再使用noConflict()已经没有什么意义了。解决的方法很简单,直接使用jQuery的标准调用方式。

<!-- jquery.js在prototype.js之前被引入. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
 
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
  jQuery( "div" ).hide();
});

// 或者
jQuery(function($){
  // Your jQuery code here, using the $
});
 
// Use the $ variable as defined in prototype.js
window.onload = function() {
  var mainDiv = $( "main" );
};

</script>

以上就是为大家介绍的jQuery.noConflict()使用方法,希望大家分分钟可以玩转jQuery.noConflict()。

Javascript 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 #Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 #Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 #Javascript
10个JavaScript中易犯小错误
Feb 14 #Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 #Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 #Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 #Javascript
You might like
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP面向对象精要总结
2014/11/07 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
javascript实现无限级select联动菜单
2015/01/02 Javascript
javascript控制台详解
2015/06/25 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Python简易版停车管理系统
2019/08/12 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
医院工作检讨书范文
2014/02/10 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
《学棋》教后反思
2014/04/14 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
刑事撤诉申请书
2015/05/18 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
Selenium浏览器自动化如何上传文件
2022/04/06 Python
windows系统安装配置nginx环境
2022/06/28 Servers