jQuery解决$符号命名冲突


Posted in Javascript onJune 18, 2016

前些天朋友让我帮他解决一个页面中jquery特效的兼容性问题,觉得这是一个很容易忽略也很重要的一点,特在此记录一下。

朋友给的页面中用到了三个特效,其中两个特效可以显示,第三个没有效果。通过查看引用的js文件,我发现页面中不光引入了jquery.js,还引入了一个名为prototype.js的文件。 这个prototype.js之前未曾听说过,特意在百度上搜了一下,原来它也是一个js类库,功能和jquery差不多,而且很强大。

通过一点点的排查,我发现那两个可以显示的特效引用的是jquery,而不显示的那个特效引用的是这个prototype.js。 稍一分析,终于找到了出错的关键:jquery中的$和prototype.js中的$冲突了,两个类库中都是通过$符号来调用,然而如果直接这样写的话就会不知道这个$是属于谁的,该调用哪个类库中的方法来实现特效的显示。

既然找到了问题的根结所在,那这个问题也就好解决了。

方法一:在jquery中,有这样一段代码:

// Expose jQuery to the global object

window.jQuery = window.$ = jQuery;

也就是说,我们可以通过jQuery来代替jquery.js中的$符号进行调用,前提必须声明一下:

jQuery = $;

那,新的问题又出现了。页面中有那么多地方用到了$,我不仅要区分到底哪些$是属于jquery的,还要将这些$替换成jQuery这个单词,更严重的是,如果该页面中要增加新的jquery特效,我还要时刻的提醒自己,调用$的时候要用jQuery来代替,稍一疏忽,不仅出不来想要的效果,而且修改起来也是一个大工作量的任务。看来,这种方法是行不通的。

难道就没有一个一劳永逸的方法可以将这个$的"归属权"给明确的区分出来吗?办法当然是有的!

方法二:使用jquery语句块来实现:

首先,来看一下jquery语句块的格式:

(function($){ 
 ..... 
 $('#msg').show();//此时在这个语句块中使用的都是jquery.js中定义的$. 

})(JQuery)

这样,我们在调用jquery中的$实现特效显示时,只要把这段代码写在这个语句块中,$符号该怎么调用还怎么调用。而prototype.js中的$写在语句块外,$符号也是该怎么调用怎么调用,两者根本不会产生什么影响了。

以上就是本文的全部内容,希望这个方法也能给遇到相同问题的其他人带来帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
JQuery 常用操作代码
Mar 14 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
prototype.js常用函数详解
Jun 18 #Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 #Javascript
Javascript中prototype的使用详解
Jun 18 #Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 #Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 #Javascript
JavaScript的this关键字的理解
Jun 18 #Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 #Javascript
You might like
组合算法的PHP解答方法
2012/02/04 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
js格式化时间的方法
2015/12/18 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
vuex实现简易计数器
2016/10/27 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python实现月食效果实例代码
2019/06/18 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
应届护士求职信范文
2014/01/26 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
员工安全生产承诺书
2014/05/22 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL