快速解决jQuery与其他库冲突的方法介绍


Posted in Javascript onJanuary 02, 2014

通常,当在同一个页面上使用jQuery和其他库时,全局名称$的定义是最大的争论和冲突的焦点。众所周知,jQuery使用$作为jQuery名称的别名,并将其用于jQuery公开的每一个功能,但是其他库,最著名的就是Prototype,也使用$名称。

1. jQuery提供了$.noConflict()实用函数用来放弃对$标识符的占用,以便其他库使用它。

该函数的语法如下:
$.noConflict(jqueryToo)

将标识符$的控制权归还给其他库,允许在页面上混合使用jQuery与其他库。一旦执行了该函数,必须使用jQuery标识符而不是$标识符来调用jQuery的功能,

你也可以放弃jQuery标识符(可选)

应该在包含了jQuery之后,但尚未包含冲突库之前调用这个方法。

尽管使用的是jQuery标识符,但因为$是jQuery的别名,所以在应用$.noConflict()之后所有jQuery的功能依然可用。我们可以定义更短的,但没有冲突的jQuery别名,例如

var  $j = jQuery ;

2. 另一个常见的习惯用法是创建一个作用域环境,在该环境中$标识符指向jQuery对象,在扩展jQuery的时候这是个常用技巧,特别是对于插件作者来说,他们不可能对于页面开发者是否已经调用$.noConflict()作出任何假设,当然也不能自行调用此函数以免破坏页面开发者的意愿,

这个习惯用法如下:
(function($) { }) (jQuery);
(function($) { })

这部分声明了一个函数并用圆括号括起来,由此生成一个表达式,这个表达式的结果是对一个匿名函数的引用,这个函数期望传入单个参数并将其命名为$,在函数主体中,可以通过$标识符来引用任何传递给这个函数的东西。因为参数声明优先于全局作用域中任何类似的命名标识符,所以任何在函数外定义的$值在函数内都会被传入的参数所代替。

(jQuery)

在匿名函数上执行函数调用,将jQuery对象作为参数传递

在函数外部不管$标识符是否已经在Prototype或其他库中定义,在函数体内它总是指向jQuery对象。

当使用这个技巧时,外部声明的$在函数体内是不可用的。

3. 第二种的用法的一个变体也经常用于声明就绪处理函数,从而形成了第三种语法,
jQuery( function($){
})

当编写可重用的组件并且这些组件可能会用于已经使用了$.noConflict()的页面时,最好对$的定义采取这种预防措施。

Javascript 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
CCPry JS类库 代码
Oct 30 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
JS重载实现方法分析
Dec 16 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
js/jQuery简单实现选项卡功能
Jan 02 #Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 #Javascript
js判断字符长度以及中英文数字等
Dec 31 #Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 #Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 #Javascript
js类式继承的具体实现方法
Dec 31 #Javascript
利用javascript判断文件是否存在
Dec 31 #Javascript
You might like
PHP中的cookie
2006/11/26 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
如何基于Python实现数字类型转换
2020/02/07 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
实习教师自我鉴定
2013/09/27 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
公立医院改革实施方案
2014/03/14 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
python实现会员信息管理系统(List)
2022/03/18 Python
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript