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对象所有的属性和方法
- R语言数据清洗实战——高效list解析方案
- 左手用R右手Python系列——循环中的错误异常规避
- SpringBoot2.x开发案例之整合Quartz任务管理系统
- 给出一组非负整数,重新排序组成最大的数
- [机智的机器在学习] TensorFlow实现Kmeans聚类
- [机智的机器在学习] 利用TensorFlow实现多元线性回归分类器
- [数据结构和算法]《算法导论》动态规划笔记(1)
- [数据结构和算法]《算法导论》动态规划笔记(2)
- [算法与数据结构] 《算法导论》堆排序笔记
- [数据结构与算法] 链表的其他类型
- [数据结构与算法] 链接表总结
- [数据结构与算法] 线性表总结
- [数据结构与算法] Python实现二分查找
- [机智的机器在学习] 机器学习中的归一化和正则化问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Laravel框架实现的rbac权限管理操作示例
- Laravel框架实现的批量删除功能示例
- PyTorch中model.zero_grad()和optimizer.zero_grad()用法
- 利用PyTorch实现VGG16教程
- PHP添加文字水印或图片水印的水印类完整源代码与使用示例
- Python 分布式缓存之Reids数据类型操作详解
- Pycharm打开已有项目配置python环境的方法
- python cv2.resize函数high和width注意事项说明
- pytorch SENet实现案例
- python如何安装下载后的模块
- Python爬虫如何应对Cloudflare邮箱加密
- 如何使用Python处理HDF格式数据及可视化问题
- tp5框架使用composer实现日志记录功能示例
- python 图像插值 最近邻、双线性、双三次实例
- tp5(thinkPHP5)框架实现多数据库查询的方法