快速解决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 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
js arguments对象应用介绍
Nov 28 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
canvas实现贪食蛇的实践
Feb 15 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
adodb与adodb_lite之比较
2006/12/31 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php上传文件常见问题总结
2015/02/03 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
python Cartopy的基础使用详解
2020/11/01 Python
python爬取抖音视频的实例分析
2021/01/19 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
先进德育工作者事迹材料
2014/01/24 职场文书
团日活动总结书
2014/05/08 职场文书
机械专业求职信范文
2014/07/15 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android