资讯专栏INFORMATION COLUMN

jQuery 3.0 beta 发布

LeanCloud / 445人阅读

摘要:回调函数将固定为异步执行。这些将被移除这些应该会保留需要注意的是,那些继续存在的回调函数不会有任何变化,只有的方法会受影响。

创作不够,译文来凑。

跟上篇一样是编译,不准备逐字翻。比如,我会把“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.siblingjQuery.buildFragmentjQuery.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 发布

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91592.html

相关文章

  • TiDB 3.0 Beta Release Notes

    摘要:年月日,发布版,对应的。相比版本,该版本对系统稳定性优化器统计信息以及执行引擎做了很多改进。新特性支持支持支持支持优化器重新支持聚合消除的优化规则优化子查询,将其转化为添加变量以支持新的优化器。 2019 年 1 月 19 日,TiDB 发布 3.0 Beta 版,对应 master branch 的 TiDB-Ansible。相比 2.1 版本,该版本对系统稳定性、优化器、统计信息以...

    goji 评论0 收藏0
  • 王下邀月熊_Chevalier的前端每周清单系列文章索引

    摘要:感谢王下邀月熊分享的前端每周清单,为方便大家阅读,特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清单系列,并以年月为单位进行分类,具体内容看这里前端每周清单年度总结与盘点。 感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具...

    2501207950 评论0 收藏0

发表评论

0条评论

LeanCloud

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<