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 addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
Jquery倒计时源码分享
May 16 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
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函数(ignore_user_abort)
2012/08/01 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
js实现内置计时器
2019/12/16 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
python实现可逆简单的加密算法
2019/03/22 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
Python日志处理模块logging用法解析
2020/05/19 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
如何利用find命令查找文件
2015/02/07 面试题
物业管理员岗位职责范文
2013/11/25 职场文书
电视购物广告词
2014/03/19 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
Oracle中DBLink的详细介绍
2022/04/29 Oracle
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python