jQuery避免$符和其他JS库冲突的方法对比


Posted in Javascript onFebruary 20, 2014

jQuery中需要用到$符号,如果其他js库(例如大名鼎鼎的prototype)也定义了$符号,那么就会造成冲突,会影响到js代码的正常执行。jqeury提供了一些方案来避免这个问题,让我们来看看这几个方案有什么区别

方案1:
引入noConflict(),将$替换为其他符号

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 
$j("#btn1").click(function(){ 
alert("Text: " + $j("#test").text()); 
}); 
});

缺点:引入了这段代码后,不仅是当前的js文件,该html引用的所有js中,如果有用到jquery中的$,都得用$j来代替之前的$

方案2:
ready函数是jquery的入口函数,可以
将$(document).ready(function(){
替换成
jQuery( document ).ready(function( $){}
缺点:只对ready嵌套内的代码有效,对嵌套外的代码是无效的。如果你所有的逻辑,都在写ready函数中,那没问题。但我们一般都会在ready函数之外写一些子函数,然后ready函数再去调用这些函数。这个方案对这些函数是无效的,因此这套方案有局限性。

方案3(推荐,特别是开发js插件时):

给js内容包上一个函数

jQuery(function($){ 
//你的js代码放在这里(例如第二个方案提到的ready函数和子函数) 
//如果是js文件,其实就是在文件头部和尾部各加一行代码 
}

或者
(function($) { 
//你的js代码 
})(jQuery);

这个方法,没有上面两个方案的缺点,只会影响到被包在jQuery(function($){}中的代码。
不会影响到其他js代码,这一点很重要。试想一下,假如你写了一个js公共组件,该组件需要用到jquery,为了提高鲁棒性,需考虑$符号冲突问题。如果使用方案1,那么别人在使用时,还得遵守你的约定,把自己js代码中的$改成$,而如果使用方案3,既能避免$冲突对该组件的影响,又无需要求使用公共组件的人修改自己的代码。
Javascript 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 #Javascript
js确认删除对话框效果的示例代码
Feb 20 #Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 #Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 #Javascript
js左右弹性滚动对联广告代码分享
Feb 19 #Javascript
javascript异步编程的4种方法
Feb 19 #Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 #Javascript
You might like
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
SVM基本概念及Python实现代码
2017/12/27 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python打包成so文件过程解析
2019/09/28 Python
Python笔记之观察者模式
2019/11/20 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python使用列表的最佳方案
2020/08/12 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
为什么会有内存对齐
2016/10/10 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
教室标语大全
2014/06/21 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
小学教育见习报告
2014/10/31 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server