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 函数集合
Jun 11 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
JavaScript字符串对象
Jan 14 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
深入探讨前端框架react
2015/12/09 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python定时器实例代码
2017/11/01 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
计算机操作自荐信
2013/12/07 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
销售开票员岗位职责
2015/04/15 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL