快速解决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 相关文章推荐
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
js实现微博发布小功能
Jan 12 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
JS实现打字游戏
Dec 17 Javascript
vue实现折线图 可按时间查询
Aug 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 验证码实例代码
2010/06/01 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
bootstrap表单示例代码分享
2017/05/18 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
详解Python:面向对象编程
2019/04/10 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
幼儿园数学教学反思
2014/02/02 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
PHP设计模式(观察者模式)
2021/07/07 PHP