jQuery中noconflict函数的实现原理分解


Posted in Javascript onFebruary 03, 2015

jQuery中,noconflict是用来防止变量冲突,用来释放变量控制权的一个重要方法。我们知道,jQuery中对外提供有两个全局变量,$和jQuery,虽然jQuery只产生了两个全局变量,极少情况下才会出现冲突,但是如果网页中如果包涵较多的类库,有自定义$或jQuery全局变量的存在时,就产生冲突。

jQuery提供的noconflict函数很好的解决了变量冲突问题,无论是$或者jQuery冲突都可以解决,接下来我们就来分析一下jQuery的冲突处理。

先来看一下jQuery源码中noconflict的实现:

(function(window,undefined){
var 
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
noConflict: function( deep ){
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}
})
}(window)

在这里jQuery.extend是jQuery扩展静态属性的方法,这里可以看成直接在jQuery上附加noConflict方法。在匿名函数的内部,分别定义内部变量_jQuery和_$用来存储window.jQuery和window.$, 这么做的用作在于用内部变量保存jQuery运行之前这两个全局变量的状态, 以便在后面的防冲突操作中还原这两个变量。noConflict可处理$和jQuery这两个变量冲突的情况,默认处理$,传入一个true参数,则处理jQuery冲突的情况。
window.$ === jQuery用来判断全局变量是否等于jQuery,如果等于,则重新还原全局变量$为jQuery运行之前的变量(存储在内部变量 _$ 中);deep && window.jQuery === jQuery 当开启深度冲突处理并且全局变量jQuery等于内部jQuery,则把全局jQuery还原成之前的状况。判断window.$ === jQuery和window.jQuery=jQuery的意义在于保护已经定义的变量不被重写,如下面的代码:

//引入jQuery库
var $="String";
var jq=jQuery.noconflict();
var jQuery="This is a line";
var j=jq.noconflict(true);
console.log($);//这里如果没有window.$===jQuery这句判断,那么$将会等于undefined而不是"String"。
console.log(jQuery); //同上,如果没有判断window.jQuery===jQuery,重新定义的jQuery就会被undefined覆盖。

整个运行流程参加下图:

jQuery中noconflict函数的实现原理分解

noConflict返回的是jQuery库内部的jQuery构造函数, 像使用$一样尽情使用它吧!

Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 #Javascript
JavaScript闭包详解
Feb 02 #Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 #Javascript
javascript的switch用法注意事项分析
Feb 02 #Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 #Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 #Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 #Javascript
You might like
php抓即时股票信息
2006/10/09 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
js实现列表按字母排序
2020/08/11 Javascript
Python实现的Excel文件读写类
2015/07/30 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
别名指示符是什么
2012/10/08 面试题
一套Delphi的笔试题一
2016/02/14 面试题
优秀体育委员自荐书
2014/01/31 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
幼儿园辞职信
2015/05/13 职场文书
护士工作心得体会
2016/01/25 职场文书
z-index不起作用
2021/03/31 HTML / CSS
MySQL 不等于的三种使用及区别
2021/06/03 MySQL