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 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
vue3使用vue-count-to组件的实现
Dec 25 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
php 批量替换html标签的实例代码
2013/11/26 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
13个PHP函数超实用
2015/10/21 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Tensorflow 实现释放内存
2020/02/03 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
预备党员入党自我评价范文
2014/03/10 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
教师节慰问信
2015/02/15 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
浅谈Redis缓冲区机制
2022/06/05 Redis