Chrome 55 的新功能

在 YouTube 上观看

  • 借助 asyncawait,您可以像编写同步代码那样编写基于 Promise 的代码,而且还不会阻塞主线程。
  • 指针事件提供了一种统一的方式来处理所有输入事件。
  • 添加到主屏幕的网站会自动获得永久性存储权限。

还有许多其他功能。

我是 Pete LePage,下面介绍了 Chrome 55 中面向开发者的新变化!

指针事件

以前,指向网页上的对象很简单。您有鼠标,您移动鼠标,有时按按钮,就这样。但这在本例中不太适用。

触摸事件很不错,但为了支持触摸鼠标,您必须支持两种事件模型:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

现在,Chrome 通过分派 PointerEvents 事件,支持统一的输入处理方式:

elem.addEventListener('pointermove', pointerMoveEvent);

指针事件统一了浏览器的指针输入模型,将触摸、触控笔和鼠标整合到一组事件中。IE11、Edge、Chrome、Opera 均支持此功能,Firefox 部分支持

如需了解详情,请参阅指明前进方向

asyncawait

异步 JavaScript 可能比较难以推导。请参考以下函数及其所有“可爱”回调:

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

使用 promises 重写它有助于避免嵌套问题:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

但是,当存在长长的异步依赖链时,基于 Promise 的代码仍可能难以读取。

Chrome 现在支持 asyncawait JavaScript 关键字,允许您编写基于 Promise、可加以结构化并以同步代码形式读取的 JavaScript。

相反,我们的异步函数可以简化为:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Jake 有一篇很棒的文章:异步函数 - 让 Promise 变得友好,其中包含所有详细信息。

永久性存储

永久性存储源试用现已结束。您现在可以将网络存储标记为永久性存储,从而防止 Chrome 自动清除您网站的存储。

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

此外,互动度较高、已添加到主屏幕或已启用推送通知的网站会自动获得持久性权限。

请参阅 Chris Wilson 的永久性存储空间博文,了解完整详情以及如何为您的网站请求永久性存储空间。

CSS 自动断字

CSS 自动断字是 Chrome 最常被请求的布局功能之一,现在 Android 版和 Mac 版 Chrome 都支持此功能。

Web Share API

最后,现在可以更轻松地使用新的 Web Share API 调用原生分享功能,该 API 以来源试用版的形式提供。Paul(Web Intents 专家)Kinlan 在其导航栏分享帖子中提供了所有详细信息。

结束语

以上仅列出了 Chrome 55 中针对开发者的部分变更。

如果您想及时了解 Chrome 的最新动态并了解即将推出的功能,请务必订阅。此外,请务必查看 Chrome 开发者大会的视频,深入了解 Chrome 团队正在开发的一些出色功能。

我是 Pete LePage,Chrome 56 发布后,我会立即为您介绍 Chrome 中的新变化!