jQuery中noConflict()用法实例分析


Posted in Javascript onFebruary 08, 2015

本文实例讲述了jQuery中noConflict()用法。分享给大家供大家参考。具体分析如下:

jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库。这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。

一、"$"操作符

1、jQuery默认使用"$"操作符,prototype等其他框架也是是使用"$",于是,如果jQuery在其他库之后引入,那么jQuery将获得"$"使用权。这样的情况也很容易理解,毕竟JS是从上到下流式执行的。

2、如果在其他使用"$"的库之前引入jQuery,那么jQuery将不会占用"$"。

提示:在其他 JavaScript 库为其函数使用 $ 时,该方法很有用。

我们在jquery中获取变量都会使用到$,但是还有很多插件都是可以使用$这个符号了,如果我们同时要引用就会导致出现问题了,jquery为了防止这种事情发生就引入了noconflict()

二、jQuery.noConflict的定义
 
jQuery.noConflict 方法包含一个可选的布尔参数,用以决定移交 $ 引用的同时是否移交 jQuery 对象本身:

jQuery.noConflict([removeAll])

函数的说明:

缺省情况下,执行 noConflict 会将变量 $ 的控制权移交给第一个产生 $ 的库;当 removeAll 设置为 true 时,执行 noConflict 则会将 $ 和 jQuery 对象本身的控制权全部移交给第一个产生他们的库。
 
三、jQuery.noConflict源码分析
 
jQuery 源码开头,首先做的一件事情是这样的:

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

容易理解的是,jQuery 通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象,以防止变量被强行覆盖。一旦 noConflict 方法被调用,则通过 _jQuery, _$, jQuery, $ 四者之间的差异,来决定控制权的移交方式,具体的代码如下:

noConflict: function( deep ) {
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}

再来看上面所说的参数设定问题,如果 deep 没有设置,_$ 覆盖 window.$,此时 jQuery 别名 $ 失效,但 jQuery 本身完好无损。如果有其他类库或代码重新定义了 $ 变量,它的控制权就完全交接出去了。反之如果 deep 设置为 true 的话,_jQuery 覆盖 window.jQuery,此时 $ 和 jQuery 都将失效。
这种操作的好处是,不管是框架混用还是 jQuery 多版本共存这种高度冲突的执行环境,由于 noConflict 方法提供的移交机制,以及本身返回未被覆盖的 jQuery 对象,完全能够通过变量映射的方式解决冲突。

四、jQuery.noConflict实例
 
1、将 $ 引用的对象映射回原始的对象:

jQuery.noConflict();
jQuery("div p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $()

2、恢复使用别名 $,然后创建并执行一个函数,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用。在这个函数中,原来的 $ 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效:

jQuery.noConflict();
(function($) { 
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
... // 其他用 $ 作为别名的库的代码

3、可以将 jQuery.noConflict() 与简写的 ready 结合,使代码更紧凑:

jQuery.noConflict()(function(){
  // 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码

4、创建一个新的别名用以在接下来的库中使用 jQuery 对象:

var j = jQuery.noConflict();
j("div p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5、完全将 jQuery 移到一个新的命名空间:

var dom = {};
dom.query = jQuery.noConflict(true);
//结果:
dom.query("div p").hide();  // 新 jQuery 的代码
$("content").style.display = "none";  // 另一个库 $() 的代码
jQuery("div > p").hide();  // 另一个版本 jQuery 的代码

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery中 noConflict() 方法使用
Apr 25 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
jquery实现聚光灯效果的方法
Feb 06 #Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 #Javascript
JQuery中serialize()用法实例分析
Feb 06 #Javascript
jQuery中on()方法用法实例详解
Feb 06 #Javascript
JS实现文字向下滚动完整实例
Feb 06 #Javascript
jquery中filter方法用法实例分析
Feb 06 #Javascript
Jquery对select的增、删、改、查操作
Feb 06 #Javascript
You might like
浅析php变量修饰符static的使用
2013/06/28 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php实现telnet功能示例
2014/04/08 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
利用python画一颗心的方法示例
2017/01/31 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
路政管理专业推荐信
2013/11/11 职场文书
实习教师自我鉴定
2013/12/12 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
应聘会计求职信
2014/06/11 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
秋菊打官司观后感
2015/06/03 职场文书