如何解决Jquery库及其他库之间的$命名冲突


Posted in Javascript onSeptember 15, 2013

首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生。比如说:$('#xmlas')和JQuery('#xmlas') 虽然在写法上不同,但在实际上却是完全等同的。

要想解决这个冲突,其实最简单的方法就是使用不同的名称来命名,或者让执行代码认为是不同的命名空间即可。

一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先导入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--后导入其他库 -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>

二、jQuery库在其他库之后导入,使用jQuery.noConflict()方法将变量$的控制权让渡给其他库,有以下几种方式:

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

代码二

<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

代码三

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

代码四

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
/*********************************************************************/
jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去
jQuery.noConflict();
});
</script>

除了上面的方法之外,我们还可以采用第二种方法来解决冲突的问题,那就是最笨但最有效的解决方法:用自定义的命名空间来避免冲突。
比如说需要的项目名称为xmlas,那么我们原来的代码:

$('contentArea').show()

就可以写成以下这种形式:

XMLAS('contentArea').show()

3.在jquery代码中,当遇到冲突的时候我们可以使用$符号,这需要我们在ready事件中添上以下代码:

jQuery(document).ready(function($) { 
//你在这里可以放心的使用$了 
});

当然,您也可以简写成下面的形式:

jQuery(function($){ 
//这里为使用$的代码 
});

由此,根据第一个方法来实现的完整代码如下:

//jquery库与其他库冲突的完整解决办法 
<script type="text/javascript" src="photolist.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$.noConflict(); 
jQuery(function($) { 
//使用了$的jquery代码 
}); 
//这里是你的其他js库代码 
</script>

 

当然,你也可以对上面的完整代码进行一步的简化,简化代码如下:

//简化后的代码 
$.noConflict()(function(){ 
//这里是你的带$的jquery代码 
}); 
//这里是其他库的代码
Javascript 相关文章推荐
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
异步动态加载js与css文件的js代码
Sep 15 #Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 #Javascript
js左侧三级菜单导航实例代码
Sep 13 #Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 #Javascript
jquery mobile事件多次绑定示例代码
Sep 13 #Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 #Javascript
javascript仿php的print_r函数输出json数据
Sep 13 #Javascript
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
PHP重定向的3种方式
2013/03/07 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
jquery实现简单的遮罩层
2016/01/08 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
python实现排序算法解析
2018/09/08 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
Python编写万花尺图案实例
2021/01/03 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
项目副经理岗位职责
2013/12/30 职场文书
自我鉴定怎么写
2014/01/12 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
小学班主任评语大全
2014/04/23 职场文书
田径运动会通讯稿
2014/09/13 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
通知的格式范文
2015/04/27 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
联谊活动总结范文
2015/05/09 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript