如何解决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 相关文章推荐
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
Javascript中For In语句用法实例
May 14 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
JavaScript随机数的组合问题案例分析
May 16 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支付系统设计与典型案例分享
2016/08/02 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
jQuery的学习步骤
2011/02/23 Javascript
JavaScript 的继承
2011/10/01 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
JS继承用法实例分析
2015/02/05 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python实现点云投影到平面显示
2020/01/18 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
绿化先进工作者事迹材料
2014/01/30 职场文书
旷课检讨书3000字
2014/02/04 职场文书
税务会计岗位职责
2014/02/18 职场文书
学生上课说话检讨书
2014/10/25 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android