jQuery 3.0 升级指南(4)_H5之家 - 中国HTML5教程资源分享第一站

Deferred 的方法（如 .done() , .fail() , 和 .pipe() ）保留了以前的行为，因此不兼容 Promises/A+ 。如果需要同步 resolution，不希望将异常转换为 rejection 值，或者 rejection 回调返回转换为fulfillment值，或者想要抛出的错误冒泡到触发函数的外部，您可以使用这些方法，而不是 .then() 和 .catch() 。

更改和功能：jQuery.when()的参数

jQuery.when 现在能给解析 then 方法输入的任何参数，作为Promise兼容的“ thenable ”。这允许更大范围的输入，包括原生的ES6 Promises和Bluebird promises。

此外，现在可以更清楚的识别，多参数调用 jQuery.when 和单参数或无参数调用之间的区别。多参数调用的行为类似于 Promise.all ，将 fulfillment 值聚合到 fulfillment 数组中（具有jQuery特有的增强功能，也集合 fulfillment 上下文和支持多值的fulfillments），或者拒收第一个rejection值。单参数和无参数调用的行为类似于 Promise.resolve ，返回一个Deferred，相同地解析为 thenable 或类似 Promise-like 输入，或满足其 non-Promise 输入（如适用）。从jQuery 3.0开始，这两个都返回一个新的Deferred（以前版本在使用单个Deferred输入调用时，不会创建新的Deferred）。

https://github.com/jquery/jquery/issues/2018

https://github.com/jquery/jquery/issues/2546

https://github.com/jquery/jquery/issues/3029

更改：jQuery.when() 的进度通知

从jQuery 3.0开始， jQuery.when() 方法不再传递进度通知从输入Deferred到输出Deferred。进度消息不是 Promises/A+ 规范的一部分，并且 jQuery.when() 中进度通知的行为之前就没有出现在jQuery API文档中。

https://github.com/jquery/jquery/issues/2710

尺寸大小更改： .width(), .height(), .css(“width”), 和 .css(“height”)能够返回非整数值

在3.0版之前，jQuery使用DOM的 offsetWidth 和 offsetHeight 属性来确定元素的尺寸大小(宽高)，并且这些属性总是返回整数。使用jQuery 3.0，我们通过DOM getBoundingClientRect API来获得更精确的值，并且这些值可以不是整数。如果你的代码总是期望尺寸大小(宽高)为整数，它可能需要调整处理返回值的精度。

https://github.com/jquery/jquery/issues/1724

更改： window上的.outerWidth() 或 .outerHeight() 包含滚动条的宽/高

调用 $(window).width() 返回“内容宽度”不包括任何滚动条（因为内容超过元素的高度而造成浏览器自动添加的滚动条）。这个不同于用于CSS媒体查询的宽度，其包括滚动条的宽度。为了提供等同于CSS媒体查询概念的宽度， $(window).outerWidth() 方法现在返回的宽度值包括滚动条宽度。这相当于DOM属性 window.innerWidth 。 .outerHeight() 同样适用。

https://github.com/jquery/jquery/issues/1729

Effects（效果）更改：.show(), .hide(), and .toggle() 方法不考虑更多的样式表更改

jQuery用来显示和隐藏元素的代码已被更新，更新后的代码只专注于内联样式，而不是计算样式，对于样式表的 display 值，应该尽可能增加以兼容响应式设计技巧（其中活动的样式表规则可以在设备改变方向（愚人码头注：横屏，竖屏）/窗口调整大小等时动态地改变）。因此，未关联元素不再被视为 hidden (隐藏)，除非它们有内联样式 display: none ,同样的，从jQuery 3.0开始， .toggle() 将不再区分关联和未关联元素。

此外，虽然 .show() 和类似的调用将继续强制迫使被样式表规则隐藏的元素可见，支持此功能会减慢所有显示/隐藏操作，并且不建议使用它。在这种情况下，确定设置哪个display（显示）值也已经被简化，当body级别规则按类型隐藏元素时，默认为“block”。

任何代码，希望隐藏的元素通过他们之前的计算 display（显示）样式来重新显示，或未关联的元素处理为隐藏，应予以审查。团队创建了一个与显示状态和显示/隐藏操作所有可能相关的表格 ,以便简化非空内联样式的设置。

功能：动画现在使用requestAnimationFrame

在支持requestAnimationFrame API的平台上，jQuery现在执行动画时使用这个API，对于老的浏览器（如IE9），它会使用之前的API。这将使得动画更流畅，更少的CPU处理时间并在移动设备上更加省电。

jQuery几年前尝试使用了requestAnimationFrame，但与现在的代码存在严重的兼容性问题，所以我们不得不重新实现它。我们认为，我们已经在浏览器标签页在视图中不可见的时候，通过暂停动画解决了大部分的问题。仍然，任何依赖于动画的代码总是实时运行

是一个不切实际的假设。

弃用： jQuery.fx.interval

现在 requestAnimationFrame 正在应用于动画，所以 jQuery.fx.interval 属性在大多数浏览器上被忽略。但是它仍然存在于jQuery 3.0中，并在一些浏览器（如IE9）中仍然需要使用，但将在未来的主要版本中会被删除。

弃用：附加 easing（缓动）函数参数

通过 .animate() 调用的 easing（缓动）函数传递单个参数，完成的百分比。一些较旧的代码假设它传递派生自百分比的额外参数。这些额外参数可能不会出现在未来的主版本更新中。

一个老的 easing（缓动）方法的例子：

$.easing.easeInOutSine = function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
};

同样的 easing（缓动）方法重写：

$.easing.easeInOutSine = function (x) {
return -0.5*(Math.cos(Math.PI*x) - 1);
};

https://github.com/jquery/api.jquery.com/issues/912

Event （事件）更改：.load(), .unload(), 和 .error() 被移除

这些方法是事件操作的快捷方式，但有几个API限制。事件 .load() 方法与ajax .load() 方法冲突。 .error() 方法不能与 window.onerror 一起使用，因为这种方式的DOM方法已经被定义。如果您需要通过这些名称绑定事件，请使用 .on() 方法，例如将 $("img").load(fn) 更改为 $(img).on("load", fn) 。

https://github.com/jquery/jquery/issues/2286

更改： .on(“ready”, fn) 被移除