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对象所有的属性和方法
jQuery多库共存问题解决方法的更多相关文章
- jQuery多库共存处理
jQuery多库共存处理(来自慕课网) 多库共存换句话说可以叫无冲突处理. 总的来说会有2种情况会遇到: 1.$太火热,jQuery采用$作为命名空间,不免会与别的库框架或者插件相冲突. 2.jQue ...
- jQuery——多库共存
多库共存:jQuery占用了$ 和jQuery这两个变量.当在同一个页面中引用了jQuery这个js库,并且引用的其他库(或者其他版本的jQuery库)中也用到了$或者jQuery这两个变量,那么,要 ...
- jQuery 多库共存
多库共存 问题概述 jQuery使用$作为标识符,随着jQuery的流行,其他js的库也会用$作为标识符,这样就会引起冲突 需要一个解决方案 让jQuery和其他的JS ...
- jQuery 跨域访问问题解决方法（转）
转自:http://www.jb51.net/article/21213.htm 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记 ...
- jQuery多库共存处理$.noConflict()
如果我们需要同时使用jQuery和其他JavaScript库,我们可以使用 $.noConflict()把$的控制权交给其他库.旧引用的$ 被保存在jQuery的初始化; noConflict() 简 ...
- Cocos2d-x extensions库使用问题解决方法
需要在加入头文件#include "cocos-ext.h" 1>e:\cocos\cocos2d-x\cocos2d-x-3.10\extensions\gui\cccon ...
- jQuery与其他JS库共存
* 事件 * jQuery与其他JS库共存 * 调用jQuery.noConflict()方法 * 表示jQuery将"$"符号的使用权交出 * 通过两种方式将"$&qu ...
- jquery 之事件 多库共存(noConflict)
/*jquery 之 简单事件jquery 与其它库共存,提供了 .noConflict() 方法,用法如下<script src="jquery 库"><scr ...
- 怎样让jQuery和其它js库共存
怎样让jQuery和其它js库共存 有时候需要同时使用jQuery和其它javascript,比如在joomla中默认的是motools,但很多人还是希 望能够使用jQuery,如果直接调用的话,由于 ...
随机推荐
- 为iOS项目添加Daily Build
很多人在说到Daily Build的时候总是喜欢背书.背书就背书吧,总比混迹软件行业连书都没看过的强.很久以前遇到一个奇葩.每次到代码提交测的通知就着急忙慌的催促组员赶紧干活,开始严重加班,晚饭都不吃 ...
- HDU1233 还是畅通工程 2017-04-12 19:49 64人阅读 评论(0) 收藏
还是畅通工程 Time Limit : 4000/2000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submis ...
- Hdu3549 Flow Problem 2017-02-11 16:24 58人阅读 评论(0) 收藏
Flow Problem Problem Description Network flow is a well-known difficult problem for ACMers. Given a ...
- 深海划水队项目---七天冲刺day1
团队会议: 团队成员的任务认领安排: 张兆敏:登录界面,游戏界面(包含游戏区.控制区.显示信息区). 乐滔:方块的形状.移动(向左或者向右)旋转(顺时针或者逆时针),方块的下落(包含硬着陆和软着陆), ...
- CGLIB实现动态代理
JDK动态代理和CGLIB字节码生成的区别? * JDK动态代理只能对实现了接口的类生成代理,而不能针对类 * CGLIB是针对类实现代理,主要是对指定的类生成一个子类,覆盖其中的方法 因为是继承 ...
- kubernetes 滚动更新发布及回滚
基本命令 记录历史 --record kubectl apply -f **** --record 查看当前状态 kubectl rollout status deployment/demo -w ...
- 使用Toolbar + DrawerLayou实现菜单侧滑，改变toolbar左上角图标
侧边栏具体实现可以参照http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html getSupportActio ...
- 自己从0开始学习Unity的笔记 VI （C#的for循环练习）
最近学到了for循环,我觉得其实看情况吧,和while挺像的,不过适合于累加或者累减这类的,for循环要更好用一点 for循环首先格式是 ; i < length; i++) { } 意思很简单 ...
- .NET Core调用WCF的最佳实践
现在.NET Core貌似很火,与其他.NET开发者交流不说上几句.NET Core都感觉自己落伍了一样.但是冷静背后我们要也看到.NET Core目前还有太多不足,别的不多说,与自家的服务框架WCF ...
- 在Windows子系统（WSL）中配置开机启动服务
在WSL中跑了一些测试服务 比如 mysql nginx等,但关机后每次都要手动开启甚是吃力,本想着用rc.local来编辑开机启动 ,无奈不支持啊!先看看非WSL环境中是怎么实现的. 在 Ubunt ...