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中获取数据库中的值的方法
Jul 14 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
Javascript中For In语句用法实例
May 14 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
php中几种常见安全设置详解
2010/04/06 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php字符串操作常见问题小结
2016/10/11 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
职工宿舍管理制度
2015/08/05 职场文书
周末问候语大全
2015/11/10 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书