快速解决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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
Mac下安装vue
Apr 11 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
extjs render 用法介绍
2013/09/11 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
python类和函数中使用静态变量的方法
2015/05/09 Python
Ubuntu下安装PyV8
2016/03/13 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
django删除表重建的实现方法
2019/08/28 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
葬礼司仪主持词
2014/03/31 职场文书
服装设计师求职信
2014/06/04 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
标准单位租车协议书
2014/09/23 职场文书
个人租房协议书
2014/11/28 职场文书
海底两万里读书笔记
2015/06/26 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python