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 相关文章推荐
js 颜色选择器(兼容firefox)
Mar 05 Javascript
js 与或运算符 || && 妙用
Dec 09 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
jquery的live使用注意事项
Feb 18 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
python zip文件 压缩
2008/12/24 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
python 8种必备的gui库
2020/08/27 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
食品业务员岗位职责
2014/03/18 职场文书
财务内勤岗位职责
2014/04/17 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
教育教学工作反思
2016/02/24 职场文书
Python自动化实战之接口请求的实现
2022/05/30 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技