jQuery 3.0 beta 发布

创作不够，译文来凑。

跟上篇一样是编译，不准备逐字翻。比如，我会把“we”译成“jQuery官方团队”，或者“他们”。

初译版，待校正。这篇文章比较长，翻译难度也不小，如果有问题，欢迎提出，我尽量修改。

正文开始。

---

歪果仁也要双喜临门，于是 jQuery 官方团队选在 jQuery 面世10周年之际发布 3.0 beta。大家还记得上周发布的1.x和2.x小版本更新吧，他们日后会继续维护这俩分支，一段时间，当然只改bug。因为3.0才是未来嘛！

需要支持IE6-8的可怜虫请继续使用1.12分支上的最新版。

没有兼容版了

看过 alpha 发布公告的同学可能还记得，他们起初准备同时发布3.0和“3.0兼容版”，适配老浏览器。但是现在他们想通了。微软今年1月12日宣布放弃IE8910，jQuery 会保守一些，不过至少不打算支持IE8，所以就放弃所谓的兼容版，以后就只有一个版本了。

尽管大版本号发生变化，jQuery 团队仍然认为升级不会太麻烦。大变化是有，不过影响应该没有很大，而且他们还开发了3.0专用迁移插件，可以帮助我们找到代码中的兼容性问题。所以，请尽早使用新版本，并及时将体验反馈给他们，这样才能让jQuery 越来越好。

你可以直接通过CDN使用：

https://code.jquery.com/jquery-3.0.0-beta1.js

https://code.jquery.com/jquery-3.0.0-beta1.min.js

或者用NPM安装到本地

npm install jquery@3.0.0-beta1

重点变化

接下来就是需要关注的新功能、升级、以及 Bug 修正了。完整列表见于 Github。

.show() 和 .hide()

刚启动3.0的时候，他们尝试将这两个方法修改为“删除行内 display:none 样式”（.show()）和 “增加行内 display:none 样式”（.hide()）。这样可以极大的简化实现所需的代码，并且显著改善性能（计算量大幅下降了嘛）。但是，这给广大用户带来了不小的麻烦，因为移除 display:none 很多时候并不能让元素显示出来，比如有其它CSS将它置为隐藏。最终 jQuery 团队不得不承认没有办法完成期望中的简化。

于是他们放弃了这次尝试。不过，即便如此，他们还是想办法改善了隐藏大量元素时的性能。

.data() 的注意事项

为了兼容 HTML5 dataset 规范，jQuery 团队升级了 .data() 实现。如今所有的 key 都会从短线连接（a-bc-de）转换成驼峰式（aBcDe），数字不再转换。于是，“foo-bar”转换后和“fooBar”是一样的，但“foo-42”和“foo42”就不一样。当用户直接使用 .data() 取所有数据时，就需要注意这个区别，尤其不要再误用 .data('foo42') 取代 .data('foo-42')。

问题汇报处

jQuery.Deferred 现在兼容 Promises/A+

Promise 我用的比较少，看到的文档也不多，不太清楚里面的几个名词怎么翻译，所以我尽量用括号备注。

jQuery.Deferred 得到升级，兼容 Promises/A+ 和 ES2015 Promises，并且已经通过 Promises/A+ Compliance Test Suite 认证。这意味着 .then() 的使用机制发生了非常显著的变动：

• .then() 回调函数里抛出的异常，会成为失败（rejection）处理函数的参数。之前，异常会冒泡，中断函数执行，并永久性锁死上下级 Deferred 对象。

• 由 .then() 返回的 Deferred 对象，如果它的回调函数抛出异常，将会调用失败（rejection）处理函数，并作为参数传进去；如果返回其它不能继续 .then() 的对象，就会调用成功（fulfillment）处理函数，返回值也作为参数传进去。以前，失败处理函数返回任何值都会将其置为失败。

• 回调函数将固定为异步执行。以前它们在绑定或者解决时会被立即执行。

• 进度的回调函数不会再把它绑定的 Deferred 对象标记为完成。

以下代码演示当上级 Deferred 触发 rejected 时，下级调用失败回调函数之后的结果：

var parent = jQuery.Deferred();
var child = parent.then( null, function() {
  return "bar";
});
var callback = function( state ) {
  return function( value ) {
    console.log( state, value );
    throw new Error( "baz" );
  };
};
var grandchildren = [
  child.then( callback( "fulfilled" ), callback( "rejected" ) ),
  child.then( callback( "fulfilled" ), callback( "rejected" ) )
];
parent.reject( "foo" );
console.log( "parent resolved" );

在 jQuery 3.0 中，会先输出“parent resolved”，然后再执行回调函数；然后下级 Deferred 进入失败状态，执行函数，返回“bar”；“bar”被转化为三级 Deferred 的成功，于是输出“fulfilled bar”；接着，抛出错误“baz”，导致三级函数进入错误处理；最后，输出“rejected baz”。如果是之前的版本，下级 Deferred 会认为上级 Deferred 失败，进入错误处理，输出“rejected bar”；并且在未捕获的错误“baz”被抛出后，整个进程立刻被终止；此时，由于三级函数未处理完，“parent resolved”也不会输出。

捕获异常不仅对在浏览器里调试有帮助，在失败后的回调函数中处理它们，也使得代码更加直观合理。请谨记，这也意味着使用 Promise 模式的时候，要至少设置一个函数处理失败。不然的话，所有错误都会被忽略掉。

如果你还想使用以前的代码，可以用 .pipe() 函数替换 .then()。后者虽然已经被标记为不建议使用，但它接口一样，而且会暂时延续之前的逻辑。

我们还开发了辅助调试调试 Promises/A+ 的工具。如果你觉得有些错误好像没触发出来，可以试用之。

jQuery.when 函数也升级了，现在可以传入任何支持 .then() 的对象，包括原生 Promise 对象。

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

Deferreds 对象增加 .catch() 方法

Promise 对象增加 .catch()方法， 作为 .then(null, fn) 的别名，专门处理失败。

问题汇报处

移除 jQuery.ajax 的 Deferred 同名方法的特殊用法

jqXHR 是 Promise 对象，同时也有一些专有方法，比如 .abort()，用于取消请求。

现在，越来越多的开发者已经在异步中（如AJAX）使用 Promise 模式，如此一来，jQuery.ajax 返回的对象再包含特殊用法就不合时宜了。

success, error, complete（这些将被移除）
done, fail, always（这些应该会保留）

需要注意的是，那些继续存在的回调函数不会有任何变化，只有 Promise 的方法会受影响。

问题汇报处

错误不再被悄无声息地消失

有时候我们难免会想：“window 的偏移值（window.offset）是多少？”等你回过味儿来你会发现这个问题其实挺蠢的，window 怎么会有偏移呢？

过去，jQuery 面对这种情况，从来不会抛出错误，而是尽量返回有意义的值，比如刚才那个问题，就返回 { top: 0, left: 0 }。3.0之后，他们尝试不再什么乱七八糟的代码都兼容，而是直接抛出错误，让用户不要忽略这些问题。大家可以试用 beta 版，看看你的代码有没有“参数无效”之类的错误。

问题汇报处

.width()，.height()，.css('width')，.css('height')都将返回小数

之前，jQuery 取宽高的时候会返回四舍五入之后的整数值。有些浏览器可以返回次像素，比如 IE 和 Firefox，有些用户需要这些精细的数据来调整布局。jQuery 官方团队认为这项变化对大多数人没有影响，不过如果你受此困扰，也请告知他们。

问题汇报处

移除废弃的事件别名

jQuery 1.8之后弃用的 .load，.unload，.error 方法被正式移除。以后都请使用 .on() 注册事件侦听器。

问题汇报处

使用 requestAnimationFrame 改善动画效果

新版 jQuery 在支持 requestAnimationFrame 的平台上会自动使用它来改善性能。除去 IE9 和 低于4.4的Android，都可以藉此让动画效果更平滑，占用更少的CPU时间，降低移动设备的电力损耗。

其实 jQuery 团队几年前就曾尝试使用这项技术，但是当时遇到很严重的兼容性问题，以致于不得不放弃。如今他们采用新策略，当浏览器 tab 不显示时挂起动画，这样就可以规避大部分问题。不过这样一来，那些必须依赖动画全局实时播放的功能就无法实现了。

.unwrap( selector )

3.0之前，.unwrap() 方法不接受任何参数。如今，用户可以通过传入选择器来移除指定的外部容器。

问题汇报处

jQuery.fn.domManip 不能再使用了

1.12 和 2.2 版本把 jQuery.dir,jQuery.sibling，jQuery.buildFragment，jQuery.access，和 jQuery.swap 都修改为私有函数。现在，jQuery.fn.domManip 也一样。它们未来都只允许内部使用，不会被载入使用文档。官方团队认为这样做可以避免用户困惑。

https://github.com/jquery/jquery/pull/2182
https://github.com/jquery/jquery/issues/2224
https://github.com/jquery/jquery/issues/2225

jQuery 自定义选择器提速

拜 Paul Irish 在 Google 的工作所赐，新版 jQuery 可以躲过一些坑，比如前文提到的 :visible，通过减少冗余代码，获得了17倍的速度提升！

但用户仍需小心，即便经过优化，:visible 和 :hidden 选择器仍然会消耗大量的系统资源，因为它们需要浏览器检查元素是否显示在页面上。在最坏的情况下，有可能需要重新计算全部 CSS 样式和页面布局！当然也不是说不要用（不然还写它做甚），只是记得测试一下，看有没有因此导致性能问题。

这项工作他们 1.12/2.2 时就完成了，只不过拿到这里来说。

问题汇报处

---

原文：jQuery 3.0 Beta Released

---

我的博客：jQuery 3.0 beta 发布