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

由于历史兼容性问题，有多种方式设置 document-ready 处理程序。以下所有方式都是等效的，并在 document-ready 时调用函数 fn ：

$(fn);
$().ready(fn);
$(document).ready(fn);
$("selector").ready(fn);

从jQuery 3.0开始，添加 document-ready 处理程序的推荐方式是第一个方法， $(fn) 。如事件部分所述， $(document).on("ready", fn) 事件形式具有略微不同的语义并在jQuery 3.0中被删除。

Data 更改：.data()名称包含中划线

从jQuery 3.0开始，所有 data 名称都以驼峰拼写方式（例如， clickCount ）存储在jQuery内部的数据对象中,而不是中划线形式（例如, click-count ）。将中划线名称转换为驼峰拼写法的方式，这与标准DOM在CSS和 data 属性中的javascript名称是一致的。

一般来说，当设置或获取指定数据项时，例如 .data("right-aligned") ，中划线形式在jQuery 3.0中仍然能够工作，但是如果取回data对象，它将具有驼峰拼写法的形式的 data 项（ rightAligned ）。3.0中的主要区别是当你在data对象上使用中划线形式的名称时，不要使用 .data() API 来获取或设置他们。

例如：

var $div = $("<div />");
$div.data("clickCount", 2);
$div.data("clickCount"); // 2
$div.data("click-count", 3);
$div.data("clickCount"); // 3
$div.data("click-count"); // 3
var allData = $div.data();
allData.clickCount; // 3
allData["click-count"]; // undefined
allData["click-count"] = 14;
$div.data("click-count"); // 3, 不是 14 ，但是在jQuery 2.x中，返回14
allData.clickCount; // 3
allData["click-count"]; // 14

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

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

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

Deferred 更改和功能：jQuery.Deferred 现在兼容 Promises/A+

Deferred已更新，兼容了 Promises/A+ 和 ES2015（也称为 ES6）Promise ，这个变化带来重大影响。

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

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

Resolution

.resolve ， .reject 和 .notify 现在设置 undefined 的上下文,而不是使用与它们相关联的Deferred对象的promise。要设置显式上下文，使用 .resolveWith ， .rejectWith 和 .notifyWith 。

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

Callback exit

对 .then() 方法进行了重大更改。尤其是，在 .then() 回调中抛出的任何异常现在都被捕获并转换为 rejection(拒绝) 值，并且从 rejection (拒绝)处理程序返回的任何 non-thenable 值都会变为 fulfillment 值。我们强烈建议您在 promise 链的末尾添加一个 .catch() 方法（3.0中新增），以避免出现难以调试的问题。您可能会遇到这种新行为,最可能的地方是使用由 jQuery.ajax() 生成的 Deferred，因为返回的 jQXHR 对象是 jQuery.Deferred 的超集。

在jQuery 1.x和2.x中，回调函数中的未捕获异常会停止代码执行。抛出的异常会冒泡直到它在 try/catch 中被捕获，或冒泡到 window 并通过 window.onerror 触发。

例如，考虑下面这个代码使用 Promises/A+ 新标准的行为：

$.ajax("/status")
.then(function(data) {
whoops();
// 控制台显示："jQuery.Deferred exception: whoops is not a function"
// 在这个函数中没有代码会继续执行
})
.catch(function(arg) {
// 此代码在上面的错误之后执行
// arg 是一个 Error 对象, "whoops is not a function"
});

将其与旧版本的Deferred方法进行比较：

$.ajax("/status")
.done(function(data) {
whoops();
// 控制台显示： "whoops is not a function"
// 在这个函数中没有代码会继续执行
})
.fail(function(arg) {
// 此代码不执行，因为异常未捕获
});

注意,当在一个Deferred和JavaScript异常发生时,jQuery会向控制台记录一条消息。这些消息采用 jQuery.Deferred exception: (error message) 形式。如果你不希望控制台输出任何这样的异常，请将 jQuery.Deferred.exceptionHook 设置为 undefined 。如果您需要通过这种方式进一步找到或者报告错误的帮助，请在开发期间使用 jquery-deferred-reporter 插件来获取堆栈跟踪。

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

Callback invocation

Promises / A +规范说, promises 总是使用单个值来解析,并且处理程序不在 this 上下文中调用，而jQuery Deferreds有时会将上下文和/或多个值传递给它们的处理程序。但在大多数情况下，第一个参数是这些值中最重要的。如果你将其他Promises/A+实现与jQuery混合使用，那么您只能在处理程序中接收到单个参数。为了保持现有代码的完全兼容性，建议只使用jQuery Deferred 并切换到较旧的 .done() 和 .fail() 方法，因为他们保留所有向后兼容的行为：

// 典型的 .then() 旧用法，不兼容Promises/A+
$.ajax("url").then(
// success
function( data, textStatus, jqXHR ) { /* code */ },
// error
function( jqXHR, textStatus, errorThrown ) { /* code */ }
);
// 这样重写，以便保持先前的行为
$.ajax("url")
// success
.done(function( data, textStatus, jqXHR ) { /* code */ })
// error
.fail(function( jqXHR, textStatus, errorThrown ) { /* code */ });

另一种符合Promises/A+规范的行为变更是，Deferred .then() 回调总是异步调用。以前，如果将 .then() 回调添加到已经 resolved 或 rejected 的 Deferred 上，该回调将立即并同步运行。

向下兼容性