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利用初始化数据装配模版的实现代码
Nov 17 Javascript
JS跨域代码片段
Aug 30 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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 ADODB使用方法集锦
2008/03/25 PHP
php中去除所有js,html,css代码
2010/10/12 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
vue axios 二次封装的示例代码
2017/12/08 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
python进阶教程之循环对象
2014/08/30 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
幼儿园秋游感想
2014/03/12 职场文书
社区食品安全实施方案
2014/03/28 职场文书
请假条格式范文
2014/04/10 职场文书
网络技术专业求职信
2014/07/13 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
公司档案管理制度
2015/08/05 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书