JQuery的$命名冲突详细解析


Posted in Javascript onDecember 28, 2013

在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。

第一种情况:jquery.js在prototype.js之后进行引入,如:
<script src="prototype.js" type="text/javascript"/>
<script src="jquery.js" type="text/javascript"/>

在这种情况下,我们在自己的js代码中如下写的话:

$('#msg').hide();

$永远代表的是jquery中定义的$符号,也可以写成JQuery('#msg').hide();如果想要使用prototype.js中定义的$,我们在后面再介绍。

第二种情况:jquery.js在prototype.js之前进行引入,如:
<script src="jquery.js" type="text/javascript"/>
<script src="prototype.js" type="text/javascript"/>

在这种情况下,我们在自己的js代码中如下写的话:

$('#msg').hide();

$此时代表的prototype.js中定义的$符号,如果我们想要调用jquery.js中的工厂选择函数功能的话,只能用全称写法JQuery('#msg').hide().

下面先介绍在第一种引入js库文件顺序的情况下,如何正确的使用不同的js库中定义的$符号。

一.使用JQuery.noConflict()
该方法的作用就是让Jquery放弃对$的所有权,将$的控制权交还给prototype.js,因为jquery.js是后引入的,所以最后拥有$控制权的是jquery。它的返回值是JQuery。当在代码中调用了该 方法以后,我们就不可以使用$来调用jquery的方法了,此时$就代表在prototype.js库中定义的$了。如下:

JQuery.noConflict();

//此处不可以再写成$('#msg').hide(),此时的$代表prototype.js中定义的$符号。
JQuey('#msg').hide();

自此以后$就代表prototype.js中定义的$,jquery.js中的$无法再使用,只能使用jquery.js中$的全称JQuery了。

二.自定义JQuery的别名
如果觉得第一种方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全称比较麻烦的话,我们还可以为JQuery重定义别名。如下:

var $j=JQuery.noConflict();
$j('#msg').hide();//此处$j就代表JQuery
自此以后$就代表prototype.js中定义的$,jquey.js中的$无法再使用,只能使用$j来作为jquey.js中JQuery的别名了。

三.使用语句块,在语句块中仍然使用jquery.js中定义的$,如下:
JQuery.noConflict();
JQuery(document).ready(function($){
$('#msg').hide();//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$.
});

或者使用如下语句块:

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

如果在第二种引入js库文件顺序的情况下,如何使用jquery.js中的$,我们还是可以使用上面介绍的语句块的方法,如:

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 
(function($){ 
..... 
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
})(JQuery) 
</script>

这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

(function($){})(jQuery)

1 首先(function(){})()这种写法 是创建了一个匿名的方法并立即执行(function(){})这个是匿名方法后面的括号就是立即调用了这个方法)。
这样做可以创建一个作用域以保证内部变量与外部变量不发生冲突,比如$ jQuery 等jquery内部定义的变量。

2 (function($){})(jQuery) 这个写法主要的作用还是保证jquery不与其他类库或变量有冲突 首先是要保证jQuery这个变量名与外部没有冲突(jquery内部$与jQuery是同一个东西 有两个名字的原因就是怕$与其他变量名有冲突二jQuery与其他变量冲突的几率非常小)并传入匿名对象,匿名对象给参数起名叫做$(其实和jquery内部是一样的) 然后你就可以自由的在(function($){})(jQuery)里写你的插件而不需要考虑与外界变量是否存在冲突

Javascript 相关文章推荐
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
js中call与apply的用法小结
Dec 28 #Javascript
SinaEditor使用方法详解
Dec 28 #Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 #Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 #Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 #Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 #Javascript
jquery改变tr背景色的示例代码
Dec 28 #Javascript
You might like
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python实现excel转sqlite的方法
2017/07/17 Python
浅谈Python peewee 使用经验
2017/10/20 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python 两种方法删除空文件夹
2020/09/29 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
小学教师管理制度
2014/01/18 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
升学宴主持词
2014/04/02 职场文书
幼儿园六一主持词
2015/06/30 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
python爬虫框架feapde的使用简介
2021/04/20 Python
python多次执行绘制条形图
2022/04/20 Python