jQuery 3.0的新主要版本jQuery 3.0终于发布了。 自2014年10月以来,Web开发人员社区一直在等待这一重要步骤,当时jQuery团队一直在开发新的主要版本,直到现在,即最终版本发布 (2016年6月)。
该发行说明承诺使用一个精简和快速的 jQuery,并牢记向后兼容 。 在本文中,我们将介绍jQuery 3.0的一些新功能,以概述其如何改变JavaScript格局。
从哪儿开始
如果您想下载jQuery 3.0进行实验,请直接转到下载页面 。 值得一看的是《 升级指南》或源代码 。
如果要测试现有项目如何使用jQuery 3.0,可以尝试使用jQuery Migrate插件来识别代码中的兼容性问题。 您还可以查看未来的里程碑 。
本文不涉及jQuery 3.0的所有新功能,而仅涉及更有趣的功能:更好的代码质量,集成的ECMAScript 6新功能 ,用于动画的新API,用于转义字符串的新方法,增加的SVG支持,改进的异步性回调,与响应站点更好的兼容性以及更高的安全性。
1.旧的IE解决方法已删除
新的主要版本的主要目标之一是使其速度更快,更时尚 ,因此删除了与IE9相关的旧黑客和变通办法。 这意味着,如果您想要或需要支持IE6-8,则必须继续使用最新的1.12
版本,因为即使2.x
系列也不完全支持较旧的Internet Explorer(IE9-)。 在文档中查看有关浏览器支持的注释。
![jQuery浏览器支持](https://i-blog.csdnimg.cn/blog_migrate/4817176e6160a4455102c298d8b7bce4.png)
请注意,jQuery 3中还有许多不推荐使用的功能 。《升级指南》的一个很大缺点是,截止2016年6月的不推荐使用的功能尚未分组,因此,如果您对它们感兴趣,则需要查看一下使用浏览器的搜索工具( Ctrl + F )进行搜索。
![jQuery 3不推荐使用的功能](https://i-blog.csdnimg.cn/blog_migrate/b727003a82b6c3dcf3d88158b9298929.png)
2.
由于jQuery 3支持的大多数浏览器都支持严格模式 ,因此在构建新的主要发行版时已牢记此指令。
尽管jQuery 3是在严格模式下编写的,但重要的是要知道您的代码不需要在严格模式下运行 ,因此,如果要迁移到jQuery 3,则无需重写现有的jQuery代码。严格模式JavaScript 可以愉快地共存 。
有一个例外:由于严格的模式, 某些版本的ASP.NET 与jQuery 3不兼容 。 如果您涉及ASP.NET,则可以在docs中查看其详细信息。
3.
jQuery 3支持ECMAScript 6中引入的for…of语句,这是一种新型的for
循环。 它提供了一种更直接的方法来遍历可迭代对象 ,例如Arrays , Maps和Sets 。
在jQuery中, for...of
循环可以替换以前的$.each(...)
语法,并使遍历jQuery集合的元素更容易。
![For ... of jQuery 3中的循环](https://i-blog.csdnimg.cn/blog_migrate/0d3ee05c18fe1d3272c637bab352d438.png)
请注意, for...of
循环仅在支持ECMAScript 6的环境中或者在使用JavaScript编译器(例如Babel) 时才起作用 。
4.
jQuery 3使用requestAnimationFrame()API来执行动画,从而使动画运行更流畅,更快 。 新API仅在支持它的浏览器中使用; 对于较旧的浏览器(即IE9),jQuery使用其先前的API作为回退方法来显示动画。
![requestAnimationFrame浏览器支持](https://i-blog.csdnimg.cn/blog_migrate/77e7baa66e0a2292533361d7417ad55c.png)
5.
新的jQuery.escapeSelector()
方法允许您转义表示CSS中其他含义的字符串或字符,以便能够在jQuery选择器中使用它 ; 没有逃脱JavaScript解释器就无法正确理解它。
文档通过以下示例帮助我们更好地理解此方法:
“ 例如,如果页面上的某个元素的ID为“ abc.def” ,则无法使用$( "#abc.def" )
进行选择,因为选择器被解析为“一个ID为'abc'的元素,一类“ def” 。 但是,可以使用$( "#" + $.escapeSelector( "abc.def" ) )
来选择它。”
我不确定这种情况的发生频率,但是如果您遇到这样的问题,现在您可以通过一种简单的方法快速解决该问题。
6.
不幸的是,jQuery 3仍不完全支持SVG ,但是操纵CSS类名的jQuery方法.addClass()
例如.addClass()
和.hasClass()
现在也可以用于定位SVG文档 。 这意味着您可以在可缩放矢量图形中使用jQuery修改(添加,删除,切换)或查找类,然后使用CSS设置类的样式。
7.
JavaScript承诺 –用于异步计算的对象–已在ECMAScript 6中标准化; 它们的行为和功能在Promises / A +标准中指定。
在jQuery 3中,使Deferred objects
与新的Promises / A +标准兼容。 延迟是可链接的对象 ,可用来创建回调队列 。
新功能改变了异步回调函数的执行方式 。 承诺允许开发人员编写逻辑上更接近于同步代码的异步代码。
请参阅《升级指南》中的代码示例 ,或者查看有关JavaScript Promises基础的Scotch.io教程 。
8.
$.when()
方法提供了一种执行回调函数的方法 。 从1.5版开始,它就是jQuery的一部分。 这是一种灵活的方法; 它也可以使用零参数,并且也可以接受一个或多个对象作为参数。
jQuery 3更改了$.when()
参数包含$.then()
方法时如何解释的方式 ,您可以使用该方法将其他回调作为参数传递给$.when()
方法。
![jQuery.when(方法)](https://i-blog.csdnimg.cn/blog_migrate/c692a454fcdcb8d332054b8f05dfbc60.png)
在jQuery 3中,如果将带有then()
方法的输入参数添加到$.when()
,则该参数将被解释为Promise兼容的“ thenable” 。
这意味着$.when
方法将能够接受更广泛的输入范围 ,例如本机ES6 Promises和Bluebird Promises ,这使得编写更复杂的异步回调成为可能。
9.
为了增加与响应式设计的兼容性,与显示和隐藏元素相关的代码已在jQuery 3中进行了更新。
从现在起, .show()
.hide()
和.toggle()
方法,将重点放在内联样式 ,而不是计算样式,这样,他们会更好地尊重样式的变化 。
新代码尽可能地尊重样式表的display
值,这意味着CSS规则可以根据设备重定向和窗口大小调整等事件动态变化 。
该文档断言,最重要的结果将是:
如果您想更好地理解新的show / hide逻辑的结果,下面是有关Github的有趣讨论 。
jQuery开发人员还发布了一个Google Docs表 ,其中介绍了新行为在不同用例中的工作方式 。
10.
jQuery 3通过要求开发人员在$.ajax()
和$.get()
方法的选项中指定dataType: "script"
,为跨站点脚本(XSS)攻击增加了一个额外的安全层 。
换句话说,如果要执行跨域脚本请求,则必须在这些方法的设置中声明它 。
![XSS定义](https://i-blog.csdnimg.cn/blog_migrate/d263d53d361065c361bf0c2997d61634.png)
根据文档,当“远程站点传递非脚本内容但后来决定提供具有恶意意图的脚本 ”时,新要求很有用。 更改不会影响$.getScript()
方法,因为它显式设置了dataType: "script"
选项。