快速解决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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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 api函数实现数组的交换排序示例
2014/04/13 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python3的输入方式及多组输入方法
2018/10/17 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
python统计字符的个数代码实例
2020/02/07 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python 利用zmail库发送邮件
2020/09/11 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
违反学校规定检讨书
2014/01/18 职场文书
机修工工作职责
2014/02/21 职场文书
日化店促销方案
2014/03/26 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
读书笔记怎么写
2015/07/01 职场文书
珍爱生命主题班会
2015/08/13 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server