新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

需要注意的是开发中一定要使用jQuery

背景


jQuery想必各样web程序猿都再熟稔不过了,不过现近些日子众多网址还动用了很古老的jQuery版本。其实只要开始的一段时代版本使用不当,也许会有DOMXSS漏洞,特别提出进步到jQuery 1.9.x或以上版本。近日小编就基本了那件业务,把公司里大家组肩负的品类jQuery版本从1.4.2升格到了jQuery 1.11.3。jQuery官方也为临近进级职业提供了jQuery Migrate插件。

言归正传。

坑从哪个地方来


jQuery 1.11.3是1.x不常的结尾叁个版本(作者更新:2015年一月8日,jQuery 1.12.0上线,jQuery 1.11.3不再是1.x时期最终二个版本了),由于自身的机构品种曾经有必然年头了,当时依旧选择的jQuery 1.4.2,本次晋级步伐迈获得底不小。开始的一段时代时候jQuery的无数写法,在新本子中一度被屏弃,亦或然有个别不正规的写法,当时版本仍是能够支撑,然而未来曾经不援救。更不佳的情景是,新本子还协助,不过意义已经和原先分化等了……这种气象连个错都不会报,要求深远到代码逻辑之中去看。

jQuery官方推荐了jQuery Migrate 库来消除jQuery进级难题。不过一直采纳这几个库究竟不是持久之计,开拓中国建工业总会集团议接纳jQuery Migrate的开垦版,能够在浏览器调整台上打字与印刷出来不相称的地点详细消息。必要注意的是开辟中肯定要运用jQuery Migrate的开垦版,因为压缩版的是不会在调整台给出警告的……把jQuery Migrate的库紧跟在jQuery库后边援引就可以:

<script src="<path>/<to>/jquery-1.11.3.js"></script>
<script src="<path>/<to>/jquery-migrate-1.2.1.js"></script> 

等晋级完成,分明没难点驾驭后,再将jQuery Migrate库去掉就足以了。根据个体经验,上面小编把坑分成 常见坑,少见坑两类来论述。

常见坑


1. 运用了被放任的jQuery.fn.live方法

jQuery Migrate库对此错误也在调控台有相应的警示:

JQMIGRATE: jQuery.fn.live() is deprecated
live方法原来的作用是设置事件代理,该格局在jQuery 1.7后头就不推荐使用了,取代之的是jQuery.fn.on函数。他们的接口分别是:

$(selector).live('click', function(){/* some code */});
$(selector).on('click', [selector,] function(){/* some code */}); 

乍一看,中括号里面包车型地铁参数能够省略掉,俩函数不是一模一样么?于是天真地把函数名live直接交换来on,半数以上时候,这么做好像一贯不引起别的极其。不过只要在你调用on函数的时候,前面包车型地铁$(selector)在日前的网页上有史以来不相配任何因素(该因素恐怕是背后的代码才加到DOM里的),那是不会绑定成功的。事实上,live函数将$(selector)代理到了document成分上,那几个成分是一定期存款在的,所以不会并发就像是处境。正确的交替方法应该是:

$(selector).live('click', function(){/* some code */}); 替换为
$(document).on('click', selector, function(){/* some code */}); 

2. 利用了被抛弃的jQuery.fn.die方法

jQuery Migrate对此错误的警示是:

JQMIGRATE: jQuery.fn.die() is deprecated

其一办法和眼下的live刚好反过来,撤销事件管理函数的绑定。新本子中应该选取off函数取代之,替换方式临近。

3. 施用了被甩掉的jQuery.fn.toggle函数

jQuery Migrate对此错误的警戒是:

JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

早先时代jQuery中名字叫toggle的函数有多个,三个是用于调节作而成分的展现和隐形,那一个用途的函数近期jQuery中还是存在;另二个便是地点提到的被取消的toggle函数,它用于绑定至少多个函数到同八个成分,点击该因素的时候五个函数交替着实行。那八个同名函数功用相距甚远,为了不引起误导,在jQuery 1.第88中学就不再建议接纳了。替换的格局是把八个函数合併成贰个函数的if-else四个区段,然后本身安装二个boolean变量,调整每趟点击时应有施行哪个区段就可以。

4. 施用了被撇下的jQuery.browser属性

jQuery Migrate对此错误的警戒是:

JQMIGRATE: jQuery.browser is deprecated

在前端开荒中我们常常要依据差异的浏览器版本做出分裂的拍卖,jQuery.browser本来是经过浏览器的userAgent字段来提取浏览器相关音信的。新本子中曾经将其扬弃,而是提出选取特征检查实验的不二等秘书诀去推断,并且给了三个Modernizr库作为推荐。然则,改成这几个库大概变动开支有一点点大,倘若你依然想沿用jQuery.browser的思路的话,能够自个儿去实现一下它。比如,决断是否IE浏览器,能够用

/msie/.test(navigator.userAgent.toLowerCase());

即本人手动获取userAgent字段,並且做贰个正则表达式匹配。别的浏览器思路类似,都以对navigator.userAgent做三个正则相称。

5. $(html)格式书写错误

在jQuery Migrate中,现身以下三种警示中的任何一种,都以属于这些错误:

JQMIGRATE: $(html) HTML strings must start with '<' character
JQMIGRATE: $(html) HTML text after last tag is ignored
JQMIGRATE: HTML string cannot start with a '#' character

其一荒唐依然蛮值得注意的,因为大家小说早先所说的jQuery低版本有XSS漏洞,其实正是和那个错误有关联。在javascript中大家日常会直接将一段html格式的字符串写在jQuery援引里面,比方$('<div></div>')。遵照新本子的jQuery供给,这段html格式的字符串必须是以左尖括号(小于号)初步,其余字符都不得以。以下二种写法,都以不当的:

$(" <div></div>"); //错误,字符串最起头有贰个空格,不是以小于号'<'初阶的
$("<div></div>test"); //不规范,html标签截止后后边还也许有剩余的"test",它会被忽略
$("#<div></div>); //错误,以井号开始並且前面而不是多个css选择器

那点在挥洒的时候注意一下就足以了,其实如故很轻易防止的。当中第三种错误其实就不光是警示了,jQuery会直接抛出贰个张冠李戴,甘休javascript代码的继续试行。一般意况以井号开始,比如$("#test"),其实就是一个常常的选取器,不过上面例子中前面又夹杂着html字符串,那会被jQuery判定为秘密的XSS攻击。

6. jQuery.fn.attr方法的荒谬接纳(那是个可怜易犯的一无所能!)

jQuery Migrate中,关于attr方法的告诫有以下那几个:

JQMIGRATE: jQuery.fn.attr('value', val) no longer sets properties
JQMIGRATE: jQuery.fn.attr('value') no longer gets properties
JQMIGRATE: jQuery.fn.attr('checked') may use property instead of attribute
JQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated

实行中自己发掘,开始时期写的代码里面,获取八个input输入表单的值时,是怎么获取的啊?$('input').attr('value');又是怎么设置的吗?$('input').attr('value', 'helloworld')。那在新本子中都是不得法的!准确的做法应该是

$('input').val(); //获取input表单现在所输入的值
$('input').val('helloworld'); //设置input表单输入的值

毕竟是获得依旧设置,只在乎调用val方法时有没有带着参数。

假设您想手动设置单选框(举个例子<input type="radio" >)被入选,应该怎么设置呢?老的代码里面也许寻访到如此 $('input').attr('checked', true)或许$('input').attr('checked', 'checked')。这个未来也都是不正确的!准确的做法应该是

$('input').prop('checked', true); //把单选框设为当选状态
$('input').prop('checked'); //获取单选框是或不是被入选了,重临true或false

那是从jQuery 1.6本子初叶应用的写法。假如设置disabled和selected属性,也是应用prop方法。那到底怎样时候利用attr方法吗?两个的区分是:prop设置的是某成分固有的属性,而attr设置的是写在html标签上的自定义属性。比如:

<input type="checkbox" checked="checked" haha="hello" >
var v1 = $('input').prop("checked"); //返回true/false,是否被选中,随状态改变而改变
var v2 = $('input').attr("checked"); //返回"checked",这是你设置在标签上的,不会变
var v3 = $('input').attr("haha"); //返回"hello",自定义属性
var v4 = $('input').prop("haha"); //返回undefined,根本没有这个固有属性 

地方提到的第几个谬误,jQuery.fn.attr(props, pass) is deprecated那几个警示在真实项目中一向不看到过,看了弹指间源码,触发该警告的jQuery写法比很少见,可忽略。

7. 向$.parseJSON传入了违规的参数

在jQuery Migrate中,该错误产生如下警告

JQMIGRATE: jQuery.parseJSON requires a valid JSON string

jQuery之所以改这一个接口,是为了和浏览器自带的JSON.parse接口对齐,从jQuery 1.9发端生效。那么些主题素材分布于AJAX接收服务端重返值的时候。服务端恐怕回到一个空字符串,那时候调用该接口会发出错误。必须向$.parseJSON传入合法的JSON字符串。革新方法如下:

var v1 = $.parseJSON(str); 替换为
var v1 = $.parseJSON( str ? str : "null" ); 
  1. 运用了被扬弃的'hover'事件字符串

在jQuery Migrate中该错误产生如下警告

JQMIGRATE: 'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'

在注册事件管理函数时,'hover'从前能够用作是'mouseenter mouseleave'五个事件的别名。近期已经将该别名去掉了,所以代码中请用'mouseenter mouseleave'替换之。

9. jQuery.fn.andSelf已经被轮换,不能够再使用

jQuery Migrate中是这么的告诫:

JQMIGRATE: jQuery.fn.andSelf() replaced by jQuery.fn.addBack()

四个函数功效是完全同样的,能够一直沟通。

以上,便是在jQuery晋级山西中国广播公司泛的题目,当然,本着改良的动感,大家仍然必要切磋一下不普及的标题是哪些体统的。供给提议的是:下边包车型地铁难点在本身的实际上项目中根本不曾汇合过,相当少见,但也无力回天担保一定不会现出在您的门类中,仅供感兴趣的程序猿们参谋吧。

少见坑


1. jQuery不匹配浏览器的神奇形式

那几个错误的接触格局特别轻巧,直接把html页面最上部的<!DOCTYPE html>标签删掉就可以了。浏览器奇异格局是为了合营老古董网页而设计的,详细的情况可参照他事他说加以考察那篇小说:链接。小编想今天的WEB技师应该不会傻到不写DOCTYPE,也非常少使用这种方式下的浏览器吧。

jQuery Migrate展示的百无一用警告如下:

2. AJAX全局事变必须绑定到document节点上

jQuery Migrate中的警告如下:

JQMIGRATE: AJAX events should be attached to document: ajaxStart

jQuery中AJAX全局事件包含如下接口ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, ajaxSuccess。因为那些事件选取的相当少,所以也归在少见坑个中。从jQuery 1.9伊始,这么些事件只好绑定到$(document)上。改良方法如下(摘自jQuery官方网站):

$("#status").ajaxStart(function(){ $(this).text("Ajax started"); }); 修改为
$(document).ajaxStart(function(){ $("#status").text("Ajax started"); }); 

3. IE6/7/8浏览器不帮忙修改input表单的type属性

在jQuery Migrate中是那样的警告:

JQMIGRATE: Can't change the 'type' of an input or button in IE 6/7/8

转移input的表单的type属性,你可以一向把文本框改成单选框,改成多选框等等。尽管本人认为那是一种并不算优雅的行事,然而众多浏览器都以永葆那样做的,除了IE6/7/8。提议在实质上中也是少用这几个成效为好。

4. 利用了被移除的$.clean, $.event.handle, $.attrFn, $.fn.data('events'), jQuery.event.trigger属性与方式

在jQuery Migrate中是如此的告诫:

JQMIGRATE: jQuery.clean() is deprecated
JQMIGRATE: jQuery.event.handle is undocumented and deprecated
JQMIGRATE: jQuery.attrFn is deprecated
JQMIGRATE: Use of jQuery.fn.data('events') is deprecated
JQMIGRATE: Global events are undocumented and deprecated

借使您在友好的代码中应用过那七个接口,这真的是留意探讨过jQuery源代码的贤良啊。因为这多少个接口平素没有出今后jQuery的法定文书档案中,并且有个别在三回九转版本中早就删除,可谓来无影去无踪。看源代码的话在最初版本有空子找到她们的存在,可是并不建议使用。提议利用另外办法达成相应的功效。什么?你不精通那多个函数是何许意义?那最好了,你将来也没有需要了然了……

5. 利用了不达时宜的$.sub()方法

jQuery Migrate中对本难题的警告如下:

JQMIGRATE: jQuery.sub() is deprecated

本条接口非常简单,不接受其余参数。它用来成立一个jQuery的别本。该办法在jQuery 1.7本子开端就早就不再采纳。

6. 运用了不达时宜的jQuery.fn.error方法

jQuery Migrate中对本难点的警告如下:

JQMIGRATE: jQuery.fn.error() is deprecated

在jQuery中,error也是和click同样的事件。注册该事件的管理函数,在此以前是$(selector).error(function(){}),未来已经被甩掉,能够选取$(selector).on('error', function(){})来代替。

示范代码


本文既然自称为“XX大全”,那就应当尽可能的宏观一些。为了搞理解这一个坑是怎么踩进去的,大家最终来写一段js代码,需求是用最少的代码,把jQuery Migration库中持有的坑都踩一遍……也便是让jQuery Migration库打字与印刷出来它能打字与印刷的有所代码。最后的代码如下所示(搜狐竟然未有艺术上传附属类小部件,只好贴代码了),非常轻易易懂。展开index.html文件,然后再按F12键展开调节台,你就足以看到壮观宏伟的决定台警告了^_^

<!-- filename : index.html --><!--<!DOCTYPE html>--> //keng0 怪异模式
<html>
<head>
<meta charset="utf-8" />
<title>jQuery升级踩坑大全</title>
<script type="text/javascript" src="http://www.xqwebs.com/uploads/allimg/190713/22114345X-0.jpg" ></script>
<script type="text/javascript" src="http://www.xqwebs.com/uploads/allimg/190713/2211435925-1.jpg" ></script>
</head>
<body>
<div class="test" id="a">a</div>
<input type="radio" id="b" value="b" />
<input type="radio" id="c" value="c" />
<div id="d" value="d">test</div>
<script type="text/javascript">
//开始踩坑
//使用被废弃分$.attrFn方法
var keng1 = $.attrFn || {};
//该函数在jQuery内部调用,真实项目中从未见过,可忽略,这里只是为了触发一下错误警告
var keng2 = $.attr($("#a"), "class", "xxx", true);
//IE6、7、8中不支持改变输入框的类型
var keng3 = $("input#b").attr("type", "text");
//在该使用prop的地方使用了attr
var keng4 = $("input#c").attr("checked", true);
//使用attr获取property的值,正确的是应该使用 .val()
var keng5 = $("div#d").attr("value");
//使用attr设置property的值,正确的是应该使用 .val('somevalue')
var keng6 = $("div#d").attr("value", "abcd");
//html字符串必须以'<'开头(下面这个是以空格开头)
var keng7 = $(" <div></div>");
//最后一个tag后面还有多余字符串
var keng8 = $("<div></div>abc");
//html字符串不可以以井号‘#'开头
try{
var keng9 = $("#<div></div>");
}catch(e){
console.error(e);
}
//$.parseJSON的参数必须是合法的JSON字符串
var keng10 = $.parseJSON(undefined);
//使用被废弃的$.browser
var keng11 = $.browser;
//使用被废弃的$.sub
var keng12 = $.sub();
$("#c").on("click", function(){});
var keng13 = $("#c").data("events");
//调用了已经不再使用的函数andSelf,该函数已经被addBack替代
var keng14 = $("#c").nextAll().andSelf();
//使用被废弃的$.clean方法
try{
var keng15 = $.clean();
}catch(e){
console.error(e);
}
//"hover"字符串注册事件已经被拆成"mouseenter"和"mouseleave"两个
var keng16 = $("#d").on("hover", function(){/*some code*/});
//jQuery.event.handle并没有收录到官方的API中,新版本已经被移除
var keng17 = function(){
$.event.handle.apply(this, arguments);
};
//全局AJAX事件处理必须绑定到document对象上
var keng18 = $("#c").ajaxStart(function(){});
//使用了被废弃的error方法
var keng19 = $("#c").error(function(){});
//使用了被废弃的toggle方法
var keng20 = $("#d").toggle(function(){/*some code*/}, function(){/*some code*/});
//使用了被废弃的live方法,应该使用on方法替代之
var keng21 = $("#a").live("click", function(){/*some code*/});
//使用了被废弃的die方法,应该使用off方法替代之
var keng22 = $("#a").die("click");
//使用了全局事件函数,目前全局事件只支持AJAX那几个,其他全局事件都不支持
var keng23 = $.event.trigger("click"); 
</script>
</body>
</html> 

你可能感兴趣的篇章:

  • 消除jquery版本争持的实惠办法
  • 使用jQuery判定IE浏览器版本的代码
  • 三个jQuery版本共存的拍卖方案
  • jquery1.9 下检验浏览器类型和本子的办法
  • 用jQuery完成检查实验浏览器及版本的本子代码
  • jQuery1.4.2与老版本json格式包容的减轻措施
  • 不等Jquery版本引发的标题消除
  • jQuery多少个本子和其余js库争论的消除方法
  • 基于jQuery1.9版本如何判定浏览器版本类型
  • 何以选用jQuery版本 1.x? 2.x? 3.x?

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:需要注意的是开发中一定要使用jQuery

您可能还会对下面的文章感兴趣: