jQuery 3.0:10个炫酷新功能

 

摘要:JQuery 3.0终于来了。自从2014年10月开始,web开发人员社区就一直在等待这次重大更新。2016年6月,在千呼万盼之中,它终于来到了我们面前。

 

 

JQuery 3.0终于来了。自从2014年10月开始,web开发人员社区就一直在等待这次重大更新。2016年6月,在千呼万盼之中,它终于来到了我们面前。

 

jQuery 3.0的版本说明中表示,这是一个更轻巧、速度更快的jQuery,而且保持着向后兼容的特性。在这篇文章中,我们将会窥探一下jQuery 3.0的一些新特性,了解一下它给JavaScript世界带来的变化。

 

何处下载

 

如果你想下载jQuery 3.0进行尝试,请直接前往下载页面。另外,它的升级指南和源代码也值得你去看一下。 

 

如果你想要测试项目在 jQuery 3.0中的工作方式,你可以通过 jQuery迁移插件来识别代码的兼容性。

 

这篇文章并没有覆盖jQuery 3.0的所有新功能,只介绍了那些有意思的内容:更好的代码质量、新ECMAScript 6的整合功能、新的动画API、用来转义字符串的新方法,更强的SVG支持、经过改进的Async Callback、对响应式网页更好的兼容以及更高的安全性。 

 

1、移除了旧的IE工作区

 

新版本最主要的目标之一,就是要变得更加快速和轻巧,因此此前版本中有关早于IE9浏览器的技术和工作区都被移除了。这意味着,如果你想要继续为IE6-8版本的浏览器提供支持,你就必须继续使用1.12版本,因为即使是2.X版本的jQuery也无法完整支持遭遇IE9版本的浏览器。你可以在jQuery 3.0的说明文档中查看浏览器的支持情况。

 

 

2、jQuery 3.0可以在Strict Mode中运行

 

jQuery 3所支持的大部分浏览器都支持strict mode,本次发布的新版本对这个规则进行了具体的规定。虽然jQuery 3是在strict mode中编写的,但是你需要知道,你所编写的代码不一定非要在strict mode中运行。因此,如果你想把以前的代码转移到jQuery 3中,你无需对代码进行重写。strict和non-strict模式的JavaScript可以彼此共存。 

 

只有一个例外:某些版本的ASP.NET,由于strict mode的原因,无法兼容jQuery 3。如果你的代码涉及到了ASP.NET,你可以在这里查看详情。 

 

3、引进For...of循环

 

jQuery 3现在支持For...of语句,这是ECMAScript 6新引进的一种for循环语句。它给Arrays、Maps和Sets等可迭代对象提供了一种更加简单直接的遍历方法。 

在jQuery中,For...of循环可以替代早前的$.each(…)语法,并且让jQuery的元素集合循环变得更容易。

 

 

注意:for...of只能在支持ECMAScript 6的环境下或者使用Babel这样的JavaScript编译器下工作。 

 

4、采用了新的动画API

 

jQuery 3使用了requestAnimationFranme() API来执行动画,让动画的播放更加顺畅、速度更快。新的动画只能用在对其支持的浏览器中;一些老版本的浏览器(例如IE9),jQuery会使用以前的API作为动画显示的后备方法。 

 

RequestAnimationFrame已经推出一段时间了,如果你对如何使用它,获知什么时候可以使用它感兴趣,CSS Tricks上有一篇很好的文章可供你阅读。

 

 

5、包含特殊含义的字符串迎来了新的转义方法

 

新的jQuery.escapeSelector()方法,可以让你对在CSS中具有其他含义的字符串或是字符以一种全新的方式进行转义,从而让其在jQuery选择器中继续可用,而无需对那些无法进行正确理解的JavaScript解释器进行转义。 

 

下面这个例子可以帮助我们更好的理解这种方式:

 

假设页面中有某个对象,其ID为abc.def,由于选择器将其解析为“拥有abc ID,且包含一个名为def的类的对象”,从而无法被$( "#abc.def" )所选定。然而,它可以由 $( "#" + $.escapeSelector( "abc.def" ) )来进行选定。 

 

我不确定类似的情况会多长时间发生一次,但是如果你的确遇到了这样的问题,你现在拥有了一个轻松的解决方式。 

 

6、类操作方法支持SVG

 

可惜的是,jQuery现在还无法完全支持SVG,但是jQuery但是对于操作CSS类名称的jQuery方法,如addClass()和.hasClass()现在可以将SVG文档作为目标。这意味着,你可以修改(添加、移除、切换),或是寻找SVG下的jQuery类,然后使用CSS的样式。 

 

7、延迟对象现在可以兼容JS Promises

 

JavaScript Promises是用于异步计算的对象,它在ECMAScript 6中已经完成了标准化;它们的行为和特性详细说明请参看 Promises/A+标准。 

 

在jQuery 3中,延迟对象可与新的Promises/A+标准兼容。延迟对象成为了可链对象,让创建回调队列成为可能。 

 

这个心特性改变了异步回调函数的执行方式。Promises让开发人员可以编写在逻辑上与同步代码更接近的异步代码。 

 

8、jQuery.when()对于多种参数的不同解读

 

$.when()方法为回调函数的执行提供了一种方法。从1.5版本中,它就一直是jQuery的一部分。它是一种灵活的方法;它还使用与零参数,也适用于一个或者多个作为参数的对象。 

 

jQuery 3改变了当包含$.when()方法时对$.when()中参数的解读方法,你可以对$.when()进行额外的参数回调。

 

 

在 jQuery 3中,如果你使用then()方法在$.when()中添加一个输入参数,这个参数将会被解释为一个可兼容Promise的“thenable”。

 

这意味着$.when可以接受更宽更的输入范围,例如原生ES6 Promises和Bluebierd Promises,这让编写更复杂的异步回调成为了可能。

 

9、新的显示/隐藏逻辑

 

为了加强与响应式设计的兼容性, jQuery 3.中与显示和隐藏元素有关的代码也获得了升级。从现在开始,.show()、.hide()和.toggle()方法将会专注于内联样式,以取代之前的计算样式,这种方法更加尊重样式列表的改变。 

 

这个新的代码可以在任何可能的时候尊重样式列表中所显示的数值,这意味着,CSS规则可以根据事件,例如设备重定位和窗口尺寸的调整,来进行动态改变。 

 

10、为防止XSS攻击提供额外的保护

 

jQuery 3针对XSS攻击添加了额外的保护层,它需要开发人员指定$.ajax()和$.get()方法中的选项为dataType: “sricpt”。 

 

换句话说,如果你想要执行跨站点的脚本请求,你必须在这些方法中做出这种说明。

 



文本显示,当“远程站点传递非脚本内容之后又提供有恶意脚本的服务内容”时,这种方法非常有效。这种改变不会影响$.getScript()方法,因为它明确地设置了dataType: “script"选项。

 


 

 

来源:SDK.cn

链接:https://www.sdk.cn/news/4101

原文:http://www.hongkiat.com/blog/jquery-3-new-features/

 

原文地址:https://www.cnblogs.com/iifranky7/p/5649570.html