如何解决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 相关文章推荐
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
说说Vuex的getters属性的具体用法
Apr 15 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
异步动态加载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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
React组件refs的使用详解
2018/02/09 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
基于Python实现简单学生管理系统
2020/07/24 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
风险评估实施方案
2014/03/09 职场文书
《大海那边》教学反思
2014/04/09 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang