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 相关文章推荐
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
js实现文字滚动效果
Mar 03 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
小程序实现列表展开收起效果
Jul 29 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调用三种数据库的方法(1)
2006/10/09 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
原生js实现日历效果
2020/03/02 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
分析python请求数据
2018/08/19 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python实现Restful API的例子
2019/08/31 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
python3排序的实例方法
2020/10/20 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
营销总经理的岗位职责
2013/12/15 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
先进基层党组织材料
2014/12/25 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书