jQuery 3 中的新增功能汇总介绍(2)

jQuery 3改变了Deferred 对象的行为,Promise 对象的前身,改善与 Promise/A+ 提案的兼容性。这个对象及其历史非常有意思,你可以读读官方文档,或者看看我的书 《jQuery 实战,第 3 版》,这本书也涵盖了 jQuery 3。

在 jQuery 1.x 和 2.x 中,传入 Deferred 中的回调函数中如果出现未捕获异常,会导致程序停止执行。而原生的 Promise 对象并非如此,它会抛出异常,并不断向上冒泡,直至到达 window.onerror(通常)。如果你没有定义一个函数来处理这个错误事件的话(通常我们都不会这么做),则会显示异常消息,程序终止执行。

jQuery 3 会遵循原生的 Promise 对象的模式。因此,抛出的异常将被视为一个失败状态(rejection),从而执行失败回调。完成之后,整个进程就继续执行,后续的成功回调将被执行。

为了让你更好地理解这个差异,让我们来看一个小例子。考虑下面的代码:

var deferred = $.Deferred(); deferred .then(function() { throw new Error('An error'); }) .then( function() { console.log('Success 1'); }, function() { console.log('Failure 1'); } ) .then( function() { console.log('Success 2'); }, function() { console.log('Failure 2'); } ); deferred.resolve();

在 jQuery 1.x 和 2.x 中,只执行第一个函数(抛出错误的函数)会被执行到。此外,由于我们没有为 window.onerror 定义任何事件处理函数,所以控制台将输出消息:“Uncaught Error: An error”,而且程序的执行将中止。

而在 jQuery 3 中,行为则完全不同的。你将在控制台中看到 “Failure 1” 和 “Success 2” 两条消息。异常将会被第一个失败回调处理,一旦被处理,则继续执行下面的成功函数。

SVG 文档

没有哪一个 jQuery 版本,包括 jQuery 3,正式支持 SVG 文档。不过事实上有很多方法是可以正常工作的,另外一些方法,比如操作类名的方法,已经在 jQuery 3 中进行了更新,因此也适用。因此,在未来的版本中,你应该可以放心使用诸如 addClass() 和 hasClass() 这样的方法来操作 SVG 文档了。

已废弃、已移除的方法和属性

除了前面说的改进,jQuery 也移除、废弃了一些特性。

废弃bind(),unbind(),delegate()和undelegate()

jQuery 以前引入的 on() 方法提供了统一的访问接口,取代  bind()、delegate() 以及 live() 方法。与此同时,jQuery 用 off() 方法来取代 unbind()、undelegated() 及 die() 方法。bind()、delegate()、unbind() 和 undelegate() 今后不建议使用,但是并没有采取进一步的行动。

jQuery 3 已经废弃这些方法,并计划在未来的版本(可能是 jQuery 4)中移除它们,要坚持在项目中使用 on() 和 off() 方法,这样你就不用担心未来版本的变更了。

移除 load(), unload() 和 error()方法

jQuery 3 彻底抛弃了已经废弃的 load()、unload() 和 error() 方法。这些方法在很早以前(从 jQuery 1.8 开始)就已经被标记为废弃了,但仍一直存在。如果你正在使用的插件仍然依赖这些方法,那么升级到 jQuery 3 的时候,代码就会出错。因此,在升级过程中要注意。

移除 context, support 和 selector

jQuery 3 彻底抛弃了已经废弃的 context、support 和 selector 属性。如前所述,如果项目中仍然使用着这些属性,或者某个插件仍在依赖这些属性,那么更新到 jQuery 3 时,代码就会出错。

Bugs 修复

jQuery 3 修复了以前版本中的一些重大 Bug。在下面的章节中,我将着重介绍其中两处,因为这两处会对你的编码产生重大影响

width() 和 height()的返回值不再四舍五入

jQuery 3 修复了 width()、height() 和其它相关方法中的一个 bug。这些方法的返回值将不再四舍五入取整到像素了,因为,这使得在某些情况下很难,对元素进行定位。

要理解这个问题,让我们假设你有一个具有100像素的宽度的容器元素,这个元素有宽度均为三分之一(即 33.333333%)的3个子元素:

<div> <div>My name</div> <div>is</div> <div>Aurelio De Rosa</div> </div>

在 jQuery 3 以前的版本中,如果你尝试通过以下代码来获取子元素的宽度……

$('.container div').width();

……那么你得到结果将是 33。原因在于 jQuery 会将 33.33333 这个值四舍五入取整。而在 jQuery 3 中,这个 Bug 已经得到修复,你的结果会更精确(比如会得到浮点数)。

wrapAll()

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzssgd.html