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基础的动画教程,直观易懂
Jan 10 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
Async/Await替代Promise的6个理由
Jun 15 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输出全球各个时区列表的方法
2015/03/31 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
使用python实现飞机大战游戏
2020/03/23 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
给面试官的感谢信
2014/02/01 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
汽车促销活动方案
2014/03/31 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
班级心理活动总结
2014/07/04 职场文书
申报优秀教师材料
2014/12/16 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL