三分钟带你玩转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的官方文档中都有,有兴趣的程序猿可以仔细阅读官方文档体会其中的区别。

直接使用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>

使用自执行函数封装

使用这种方式,你可以在匿名函数内部继续使用标准的$对象,这也是众多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>

使用标准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() 方法

noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

实例

当然,您仍然可以通过全名替代简写的方式来使用 jQuery:

$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行!");
});
});

实例

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:

var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行!");
});
});

实例

如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":

$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行!");
});
});
Javascript 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
轻松搞定jQuery.noConflict()
Feb 15 #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
You might like
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
javascript引导程序
2008/10/26 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
JsonServer安装及启动过程图解
2020/02/28 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
Python实现多行注释的另类方法
2014/08/22 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Python模块搜索路径代码详解
2018/01/29 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
物理教育专业求职信
2014/06/25 职场文书
幼儿生日活动方案
2014/08/27 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers