jQuery多库共存问题解决方法
一、问题概述:
1、随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时,那么此时,就会产生冲突。
2、由于jQuery的更新速度过快,所以插件更不上,导致不同版本的jQuery对插件支持的不一样,而刚好我们此时需要用一个高版本的jQuery进行开发,我们用的z-tree则是低版本的jQuery,所以在这种场景下,则会产生$和jQuery命名空间冲突的问题
3、这里jQuery解决多库共存的问题的绝决方案只用于单文件js类库框架,如果是多文件就不行了像EXT这种
二、解决方法
1、通过jQuery自带的noConflict函数将$或者jQuery映射回给之前使用过$和jQuery对象的js类库
简介:jQuery.noConflict()的具体实现
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script>jQuery={};//模拟jQuery对象//将$和jQuery两个对象(命名空间)存入到临时变量中去,应为这两个变量可能会和其他库的变量冲突var _$=window.$,_jQuery=window.jQuery;//上面定义的_$和_jQuery的变量值可能会存在三种情况//第一种当jQuery文件位于最顶端时,那么里面存储的就是js全局变量的默认值//第二种当jQuery文件位于其他js文件之下,且前面的库库有使用到window.$和window.jQuery中的任意一个, //那么当调用下面的noConflict方法之后,jQuery就会将对应的window.$和window.jQuery控制权返还给之前使用到他们的js库//实际交还$对象和jQuery对象的方法 jQuery.noConflict=function(deep){//交还$对象的控制权//因为jQuery会做window.$=window.jQuery=jQuery这个操作,//将window.$和window.jQuery对象都托管给jQuery对象,所以当//加载完jQuery文件之后,执行jQuery.noConflict()如果window.$//对象已经脱管给了jQuery对象的话,那么就通过将原来的//window.$的值覆盖现在window.$的形式,完成$对象控制权的交//换, 所以覆盖之后的$对象的值就是在jQuery之前使用到$对象的js//库中定义的值,而我们也不能使用$符来使用选择器,只能通过jQuery对象if(window.$===jQuery){window.$=_$;//将原先缓存的window.$(之前加载完成的js库的$对象)覆盖在执行jQuery文件之后重新定义的jQuery自带的$对象 }//交换jQuery对象的控制权//jQuery对象不能轻易的交还控制权,所以这里加了一个deep参数,只有当这个参数为true时,才会交还if(deep && window.jQuery===jQuery){window.jQuery=_jQuery;//将原先缓存的window.jQuery(之前加载完成的js库的jQuery对象)覆盖在执行jQuery文件之后重新定义的jQuery自带的jQuery对象 } return jQuery;//返回jQuery对象,这样的话我们就可以给jQuery对象重新定义一个个性化的名字} </script> </body> </html>
(1)通过jQuery.noConflict()交还$和jQuery对象的控制权,解决命名控件冲突的问题
当jQuery文件第一个加载时,调用jQuery.noConflict()交换$的控制权
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../common/jquery-1.9.1.min.js"></script></head> <body> <script>console.log(window.$);//打印function (e,t){return new b.fn.init(e,t,r)} jQuery中定义的$对象 jQuery.noConflict();console.log(window.$);//打印出undefined </script> </body> </html>
当jQuery文件在其他js库加载完之后加载,且这些库已经使用了$对象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../common/prototype.js"></script><script src="../common/jquery-1.9.1.min.js"></script></head> <body> <script>console.log(window.$);//打印出:function (e,t){return new b.fn.init(e,t,r)} jQuery中定义的$对象 jQuery.noConflict();console.log(window.$);//打印出prototype中定义的$对象 </script> </body> </html>
(2)通过jQuery.noConflict()来给jQuery对象重新命名的方式解决冲突问题
这实际上也是交换$对象给前面的js类库后,通过返回的jQuery对象自定义的给jQuery对象命名的方式,解决的方式其实和上面的是一样的,但是区别是我们可以定义一个个性化的名字(前提是不要和前面的对象冲突)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../common/jquery-1.9.1.min.js"></script> </head> <body> <script>var zc=jQuery.noConflict();alert(zc("body").length);//输出:1 </script> </body> </html>
(3)听过jQuery.noConflict()方法返还$对象的控制权,通过匿名执行函数(闭包)的方式重新恢复对$对象的使用,只不过,$对象只在闭包范围内有效
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../common/jquery-1.9.1.min.js"></script> </head> <body> <script>jQuery.noConflict();//交还$对象的控制权给前面使用过$对象的js库 (function($){alert($("body").length);//输出:1; })(jQuery)//将jQuery对象作为实参传递给形参$,这样$还是代表jQuery对象 </script> </body> </html>
(4)通过jQuery.noConflict()同时去除$对象和jQuery对象的控制权
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../common/jquery-1.9.1.min.js"></script> </head> <body> <script>jQuery.noConflict(true);alert($);//输出:undefined alert(jQuery);//输出:undefined </script> </body> </html>
(5)下面是终极的解决方案,使用这个方案你可以把jQuery集成到你自己定义的js类库中区,同时,去除$和jQuery对象的控制,也就是说,$和jQuery不再适用,而把jQuery对象的所有的属性和方法,都转移到你的对象下面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../common/jquery-1.9.1.min.js"></script> </head> <body> <script>var zc={};//自定义的对象 zc.query=jQuery.noConflict(true);alert(zc.query("body").length);//输出:1 alert(jQuery);//输出:undefined alert($);//输出:undefined </script> </body> </html>
通过上面的输出发现:此时$和jQuery对象均无法使用,而自定义的zc.query怎可以使用jQuery对象所有的属性和方法
转载于:https://www.cnblogs.com/GreenLeaves/p/6379001.html
jQuery多库共存问题解决方法相关推荐
- jQuery多库共存及jQuery插件官方网站
刚有空闲时间低头一看电脑日历,哇偶!今天是520耶,作为一枚单身狗,还好有代码同志们陪着我,开森=v=好啦,开始进入正题环节. 不管是学习或是开发中,我们会有这样一个问题,如果在一个页面中 引入了多个 ...
- jQuery 跨域访问问题解决方法
浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js ...
- Openssl 安装及其编译项目时库丢失问题解决方法
1.安装对应库 1.Linux平台 1.方式一 sudo apt-get install openssl sudo apt-get install libssl-dev 2.方式二 wget http ...
- 前端学习(1031):jquery多库共存
- pycharm安装库出现问题解决方法(狗头)
1.多数情况都是版本冲突,下载特定版本 2.关了梯子试试
- 50 jQuery拷贝对象与多库共存
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery拷贝对象 如果想要把某个对象拷贝(合并)给另外一个对象使用,此时使用$.e ...
- jQuery学习笔记系列(三)——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery ...
- jq跨域代理_jQuery 跨域访问问题解决方法
jQuery 跨域访问问题解决方法 更新时间:2009年12月02日 01:25:19 作者: 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时 ...
- 多库共存 包装集的问题 点击按钮创建一个p 几个属性介绍 jQuery的插件
多库共存 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
最新文章
- D3D中简单的截图方法 (转)
- 分区硬盘Lvm 折腾小记
- linux创建的kvm无法运行,使用virt-manager运行虚拟机的方法(创建第一个虚拟机)...
- python3.6.2安装教程-CentOS 7.2下安装Python 3.6.2
- PaddlePaddle开源平台的应用
- 算法竞赛中的时间复杂度选择——以最大连续和问题为例
- java抽取注释_JAVA 注解教程(五)注解的提取
- laravel重定向自定义显示提示消息
- [转]Insert, Update, and Delete Destination table with SSIS
- 第四周笔记 c++ Boolan
- haproxy配置文件管理脚本
- 苹果Mac 下 Parallels Desktop “无法连接到 Parallels 服务”如何解决?
- 语音识别技术基础知识
- 微分几何笔记(8) —— 切向量,切空间
- 虎虎生威—新年版本(鼠标超人、烟花、浮动会闪的星星以及闪避值拉满的老虎)
- 网络安全测试工程师职能
- 【设计模式】-状态模式->APP抽奖活动(源码与类图解析)
- 整数转成RGB颜色值
- Verilog:【7】超详细WaveDrom教程,时序图绘制利器,看这一篇就够了。
- Hibernate(9)_双向n对n