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对象之内置对象Math使用方法
Apr 16 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
jQuery基础知识小结
Dec 22 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
建立动态的WML站点(三)
2006/10/09 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
理解javascript对象继承
2016/04/17 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
Python 处理数据的实例详解
2017/08/10 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python 构造三维全零数组的方法
2018/11/12 Python
python实现弹窗祝福效果
2019/04/07 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
应聘自荐信
2013/12/14 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
学生检讨书范文
2015/01/27 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python