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系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
js模拟F11页面全屏显示
Sep 17 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
php判断目录存在的简单方法
2019/09/26 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python实现事件驱动
2018/11/21 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python批量修改ssh密码的实现
2019/08/08 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
医学毕业生自荐信
2013/10/11 职场文书
统计系教授推荐信
2014/02/28 职场文书
对教师的评语
2014/04/28 职场文书
企业文化宣传标语
2014/06/09 职场文书
教师个人读书活动总结
2014/07/08 职场文书
2016情人节宣传语
2015/07/14 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
总结高并发下Nginx性能如何优化
2021/11/01 Servers