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优化尝试小结
Feb 06 Javascript
js propertychange和oninput事件
Sep 28 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
0基础学习前端开发的一些建议
Jul 14 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
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python八大排序算法速度实例对比
2017/12/06 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
python实现扫雷游戏
2020/03/03 Python
PyQt5实现画布小程序
2020/05/30 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python容器类型公共方法总结
2020/08/19 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
计算机本科生自荐信
2013/10/15 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
班级年度安全计划书
2014/05/01 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
如何写新闻稿
2015/07/18 职场文书
600字作文之感受大自然
2019/11/27 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python