前端日刊(200317)

GoogleChrome Samples

这个仓库存放了 Chrome 浏览器新版本发布时，加入的新功能案例代码，由 Google Chrome 官方维护。案例代码非常适合初学使用，看看每个新引入的功能如何快速使用。

以 navigator.sendBeacon 接口为例，你可以在 googlechrome.github.io/samples/bea… 地址中看见它的简单介绍。

官方给出的案例代码如下：

if ('sendBeacon' in navigator) {
  window.addEventListener('pagehide', function() {
    navigator.sendBeacon(
      'https://putsreq.herokuapp.com/4GE2nVUuDoDGsNyKES2G',
      'Sent by a beacon!');
  }, false);
}

ECMAScript：Finished Proposals

TC39 委员会维护了一个 proposals 仓库，存放当前所有所有关于 ECMAScript 的提案。

在这个地址里，是所有已完成提案（达到 Stage 4 阶段），可以看到自 ES2016 以来到现在（ES2020）所有的新增功能。

下面列举了 ES2020 总包含新功能列表：

WebKit 中的自定义滚动条

下面是一个滚动条的元素组成：

分别对应下列的伪元素：

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-corner
::-webkit-resizer

一、仅使用下面的代码，会隐藏默认的滚动条

/* width 属性指定的是垂直滚动条的宽，height 属性指定的是水平滚动条的高。 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

效果：

二、我们为滚动条（scrollbar-thumb）添加样式，才能看见

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 8px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

效果：

三、为滚动条没有占据的空间（scrollbar-track-piece）设置样式

.scrollbar::-webkit-scrollbar-track-piece {
  background-color: #ddd;
}

效果：

四、设置按钮

.scrollbar::-webkit-scrollbar-button {
	background-color: blue;
}

效果：

四、定义边角

.scrollbar::-webkit-scrollbar-corner {
	background-color: green;
}

效果：

上述伪元素还支持伪类的设置，比如：指定的是哪个方向上的滚动条、还有哪个按钮。

:horizontal: applies to the pieces of the horizontal scroll.
:vertical: applies to the pieces of the vertical scroll.
:decrement: applies to the button and to the track pieces of the upper and left scroll.
:increment: applies to the button and to the track pieces of the lower and right scroll.
:start: it shows if the button and the track pieces go before the scrollbar.
:end: it shows if the button and the track pieces parts go after the scrollbar.
:double-button: it is used for detecting if a button goes next to another one at one of the scroll ends.
:single-button: it is used for detecting if a button goes alone at one of the scroll ends.
:no-button: it is applied to the track pieces to show if these run to the edge of the scrollbar, as when there are no buttons.
:corner-present: it is applied to all the scroll pieces and it shows if the corner of the scroll is present.
window-inactive: it is applied to all the scroll pieces and it shows if the scroll window is active.

五、下面我单独设置了水平滚动条以及（水平和垂直滚动条的）增长箭头的样式

.scrollbar::-webkit-scrollbar-thumb:horizontal {
	background-color: yellow;
}

.scrollbar::-webkit-scrollbar-button:horizontal:increment,
.scrollbar::-webkit-scrollbar-button:vertical:increment {
	background-color: red;
}

效果：

下面列出了完整样式（demo）：

.scrollbar::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 8px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

.scrollbar::-webkit-scrollbar-thumb:horizontal {
	background-color: yellow;
}

.scrollbar::-webkit-scrollbar-track-piece {
  background-color: #ddd;
}

.scrollbar::-webkit-scrollbar-button {
	background-color: blue;
}

.scrollbar::-webkit-scrollbar-corner {
	background-color: green;
}

.scrollbar::-webkit-scrollbar-button:horizontal:increment,
.scrollbar::-webkit-scrollbar-button:vertical:increment {
	background-color: red;
}

另外，再举一个在实际项目中使用的例子（Lulu UI 使用的自定义滚动条样式）：

.scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 8px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}
.scrollbar::-webkit-scrollbar-track-piece {
  background-color: #ddd;
}

使用 Intl.DateTimeFormat 格式化日期

对同一个日期“2020-02-05T16:30:41.392Z”，如何根据当前浏览器语言环境，显示不同的文字形式呢（如下）？

<!-- 意大利 -->
<time datetime="2020-02-05T16:30:41.392Z">Pubblicato il 05 Febbraio 2020</time>
<!-- 英语 -->
<time datetime="2020-02-05T16:30:41.392Z">Published on February 05, 2020</time>

可以使用 Intl.DateTimeFormat 这个接口。以下是使用此接口封装的方法：

// datetime.js
function ISOtoLongDate(isoString, locale = "en-US") {
  const options = { month: "long", day: "numeric", year: "numeric" };
  const date = new Date(isoString);
  const longDate = new Intl.DateTimeFormat(locale, options).format(date);
  return longDate;
}

使用（意大利语）：

const isoString = new Date().toISOString();
const italianDate = ISOtoLongDate(isoString, "it-IT"); // "15 marzo 2020"

扩展阅读：JavaScript Internationalization in 2020

（完）