快速解决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 巧妙去除数组中的重复项
Jan 25 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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 表单验证实现代码
2009/03/10 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python实现图像几何变换
2015/07/06 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
在python中安装basemap的教程
2018/09/20 Python
学习python分支结构
2019/05/17 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
关于母亲节的感言
2014/02/04 职场文书
学校督导评估方案
2014/06/10 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
反邪教观后感
2015/06/11 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
MySQL学习之基础命令实操总结
2022/03/19 MySQL
Python+Tkinter打造签名设计工具
2022/04/01 Python