快速解决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 相关文章推荐
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
JS运算符简单用法示例
Jan 19 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
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数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
python实现simhash算法实例
2014/04/25 Python
Django进阶之CSRF的解决
2018/08/01 Python
Django框架反向解析操作详解
2019/11/28 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python使用建议技巧分享(三)
2020/08/18 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
本科毕业生应聘求职信
2014/07/06 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
环卫工人节活动总结
2014/08/29 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
大学毕业生个人总结
2015/02/28 职场文书
现役军人家属慰问信
2015/03/24 职场文书
学校社团活动总结
2015/05/07 职场文书
如何撰写创业策划书
2019/06/27 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
python如何将mat文件转为png
2022/07/15 Python