jquery 3.0在日前发布了最终的全新版本。从2014年10月,jquery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的到来,终于在2016年6月他们迎来了这一个最终版。
通过,我们看到了一个保持着向后兼容的更轻便,更快速的jquery。在本文中,我们将介绍一些令人眼前一亮的jquery 3.0全新特性。
开始前的说明
如果你想要下载jquery 3.0进行亲自实验,可以通过进行下载。另外,和也值得你一看。
如果你想要测试一下你的项目如何在jquery 3.0中工作的,你可以尝试通过来识别代码的兼容性问题,你也可以查看。
1. 移除旧的ie工作区
新的最终版最主要的目标是更加快速,更加时尚,因此,那些支持早于ie9版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持ie6-8,你必须用回1.12版本,因为甚至是2.x版本都无法完整支持早于ie9的浏览器。
注意:在jquery 3中还弃用了一些其它的功能。截止到2016年6月,升级指南还没有提供一个对于弃用功能的分组整理。因此,你如果想要了解弃用功能,可以通过ctrl f键来进行搜索。
2. jquery 3.0运行在strict mode下
大多数支持jquery 3的浏览器都支持strict mode,而在本次更新中对此进行了规定。
虽然jquery 3是写在strict mode中的,但是你需要了解的是你的代码并不需要运行在strict mode中,因此如果你想要把以前的代码迁移到jquery 3,你不需要对已存在的jquery代码进行重写。strict和non-strict mode的javascript代码可以和谐共存。
这里有一些例外:某些版本的asp.net,因为strict mode的缘故,无法与jquery 3兼容,如果你的代码涉及到了asp.net,你可以查看。
3. 引进for...of循环
jquery 3支持语句,这是由中新引进的一种for循环语句。这提供了对,和这样的可迭代对象一种更直接的遍历方法。
在jquery中,for...of循环可以取代以前的语法,并且更容易通过jquery的元素进行循环。
注意:for...of只能在支持ecmascript 6的环境下或者使用babel这样的javascript编译器下工作。
4. 动画方面采用新的api
jquery 3使用requestanimationframe() api来执行动画,使动画运行得更加顺畅、快速。新的api只用于支持它的浏览器,对于那些更老的浏览器(如ie9)jquery使用先前的api来作为显示动画的后备方案。
requestanimationframe已经推出一段时间了,如果你对如何使用它以及什么时候使用它感兴趣,css tricks上有一篇很好的可供你阅读。
5. 对包含特殊含义的字符串提供转义的新方法
新的jquery.escapeselector()提供了对在css中存在特殊含义的字符串或字符进行转义的方法,该方法可使这些字符串或字符能够继续用于jquery选择器中,而无需对那些无法进行正确理解的javascript解释器进行转义。
这个可以让你更好的了解这个全新的方法:
举个例子,页面中某个id为“abc.def”的元素由于选择器将其解析为id为“abc”且包含一个名为“def”的类的对象,而无法被$( "#abc.def" )选定。但是它可以由 $( "#" $.escapeselector( "abc.def" ) )来进行选定。
我无法确定发生中情况的频率,但是假如你碰到过这种类似的情况,这无疑给了你一个解决该问题的简单方法。
6. 类操作方法支持svg
不幸的是,jquery 3现在还无法完整的支持svg,但是对于的jquery方法,如和现在可以将svg文档作为目标。这意味着你可以修改(添加、删除、切换)或者查找svg(可缩放矢量图形)下的jquery类,然后使用css的类样式。(相关阅读:)
7. 延迟对象现在与js promises兼容
,用于异步计算的对象,现在在ecmascript 6中已经被标准化;它们的运行状况和特性的详细说明参见标准。
在jquery 3中,已经与新的promises/a 标准相兼容,延迟对象已经成为让创建回调队列成为可能的可链对象(chainable objects)。
新的特性改变了异步回调函数执行过程,promises允许开发者编写在逻辑上与同步代码更接近的异步代码。
查看升级指南的,或者查看关于javascript promises基础的可以让你了解更多的信息。
8. jquery.when()对于多种参数的不同解读
提供了执行回调函数的一种方法,它成为了jquery 1.5之后的一部分。这个方法非常灵活,它适用于零参数,也适用于一个或者多个作为参数的对象。
jquery 3改变了当包含方法时对$.when()中参数的解读方法,你可以对$.when()进行额外的参数回调。
在jquery 3中,如果你在$.when()中的then()方法内增加一个输入参数,该参数将会被解释成一个可与promise兼容的。
这意味着 $.when方法能够接收更加宽广的输入范围,比如原生的和,这也使得编写更复杂的异步回调成为了可能。
9. 新的显示/隐藏逻辑
为了增加响应式设计的兼容性,与元素显示和隐藏的代码在jquery 3中进行了更新。
从现在开始,、和方法将会以内联样式为重点取代以前的计算样式,这种方式能够更尊重样式列表的改变。
新的代码尽可能的尊重样式列表中所呈现的数值,这意味着css规则可根据事件(如设备重新定位和窗口尺寸调整)进行动态改变。
这个说明文件申明了最重要的结果就是:
“作为结果,断开连接的元素除非指定了内联display: none,否则将不再认定为是隐藏的。因此,在jquery 3.0中,.toggle()不再对断开连接元素与已连接元素进行区分。”
如果你想要更好的了解关于全新的显示/隐藏逻辑,这个会对你有帮助。jquery开发者还发布了来展示在不同用例下新规则的运转。
10. 对于防止xss攻击的额外保护
jquery 3增加一个额外的安全层用户用于防备跨站点脚本(xss)攻击,它需要开发者指定和方法中的选项为datatype: "script"。
换言之,如果你想要执行跨站点的脚本请求,你必须在这些方法中作出这样的声明。
新的改变对于当“远程站点传递非脚本内容之后又提供有恶意脚本的服务内容”的情况是非常有效的。这个变化不会影响$.getscript()方法,因为它明确地设置了datatype: "script"选项。
本文翻译自,译者:慧都控件网-回忆和感动