快速解决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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
JS 表单验证大全
Nov 23 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
JavaScript 面向对象基础简单示例
Oct 02 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采集相关教程之一 CURL函数库
2010/02/15 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
php curl选项列表(超详细)
2013/07/01 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php微信支付之APP支付方法
2015/03/04 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
初中女生自我鉴定
2013/12/19 职场文书
高二政治教学反思
2014/02/01 职场文书
村干部培训班主持词
2014/03/28 职场文书
初中英语课后反思
2014/04/25 职场文书
浅析Django接口版本控制
2021/06/26 Python
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS