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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 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和.net中des加解密的实现方法
2013/02/27 PHP
PHP的引用详解
2015/02/22 PHP
ThinkPHP安装和设置
2015/07/27 PHP
php HTML无刷新提交表单
2016/04/05 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jQuery过滤选择器详解
2015/01/13 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
vue-for循环嵌套操作示例
2019/01/28 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
python读取Android permission文件
2013/11/01 Python
Python入门篇之条件、循环
2014/10/17 Python
python八大排序算法速度实例对比
2017/12/06 Python
python复制文件到指定目录的实例
2018/04/27 Python
django输出html内容的实例
2018/05/27 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
经典c++面试题四
2015/05/14 面试题
电焊工工作岗位职责
2014/02/06 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
入门学习Go的基本语法
2021/07/07 Golang