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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
JavaScript实现多球运动效果
2020/09/07 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
Numpy 多维数据数组的实现
2020/06/18 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
本科毕业生求职信
2014/06/15 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
导游欢送词
2015/01/31 职场文书
人事文员岗位职责
2015/02/04 职场文书
600字作文之感受大自然
2019/11/27 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android