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 相关文章推荐
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
Js的Array数组对象详解
Feb 22 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 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
一个简单实现多条件查询的例子
2006/10/09 PHP
PHP与javascript的两种交互方式
2006/10/09 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python的concat等多种用法详解
2018/11/28 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
珍惜水资源建议书
2014/03/12 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python