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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
js实现计时器秒表功能
Dec 16 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实现XML和数组的相互转化功能示例
2017/02/08 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Django日志模块logging的配置详解
2017/02/14 Python
详解python3中tkinter知识点
2018/06/21 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python实现LRU热点缓存及原理
2019/10/29 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
房地产营销策划方案
2014/02/08 职场文书
教师求职自荐书
2014/06/14 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
清洁工个人工作总结
2015/03/05 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
React实现动效弹窗组件
2021/06/21 Javascript