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 相关文章推荐
setInterval计时器不准的问题解决方法
May 08 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
vue实现路由切换改变title功能
May 28 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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公用函数列表[正则]
2007/02/22 PHP
加强版phplib的DB类
2008/03/31 PHP
PHP运行模式的深入理解
2013/06/03 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python3标准库总结
2019/02/19 Python
关于python多重赋值的小问题
2019/04/17 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
PyQt5实现画布小程序
2020/05/30 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
求职教师自荐书
2014/06/19 职场文书
多媒体教室标语
2014/06/26 职场文书
校长师德表现自我评价
2015/03/04 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
Python 阶乘详解
2021/10/05 Python
Spring Boot实现文件上传下载
2022/08/14 Java/Android