原创不够,译文来凑。
跟上篇一样是编译,不准备逐字翻。比如,我会把“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 时就完成了,只不过拿到这里来说。
发表回复