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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
详解如何运行vue项目
Apr 15 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
php字符串函数学习之substr()
2015/03/27 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
浅谈React高阶组件
2018/03/28 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
初步探究Python程序的执行原理
2015/04/11 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Python代码太长换行的实现
2019/07/05 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
keras实现多种分类网络的方式
2020/06/11 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
生产车间班组长岗位职责
2014/01/06 职场文书
质量整改通知单
2015/04/21 职场文书
2015年科协工作总结
2015/05/19 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python