金数据技术博客 · №6

Google IO for web platform

· silverWolf818 · frontend / platform / browser

一、 What's new for the web platform

直接上视频地址 What's new for the web platform，然后我简单的根据视频的内容总结了一下 HTML 、CSS 和 JavaScript 的新特性。

二、HTML 和 CSS 新特性

accent-color

这个属性可以修改例如原生的单选、多选、范围等组件的颜色。accent-color MDN

接下来我们来实际体验一下，代码如下：在线预览

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [color, setColor] = useState('#50E3C2');

  return (
    <div className="container">
      <div className="left">
        <div>
          <input type="radio" style={{ accentColor: color }} />
          <input type="radio" checked style={{ accentColor: color }} />
        </div>
        <div>
          <input type="checkbox" style={{ accentColor: color }} />
          <input type="checkbox" checked style={{ accentColor: color }} />
        </div>
        <div>
          <input
            className="range"
            type="range"
            style={{ accentColor: color }}
          />
        </div>
      </div>
      <div className="right">
        <input
          className="color"
          type="color"
          value={color}
          onChange={(event) => setColor(event.target.value)}
        />
      </div>
    </div>
  );
}

我们可以通过颜色选择器选择任意的颜色来修改原生组件的颜色了。如下图所示：

dialog

新版的 dialog 内置了一些可访问性和可用性的功能。dialog MDN

我们来实际体验一下，代码如下：在线预览

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <dialog id="dialog">
      <form method="dialog">
        <div>
          <label
            >name:
            <input type="text" name="name" />
          </label>
        </div>
        <div>
          <label
            >email:
            <input type="email" name="name" />
          </label>
        </div>
        <div>
          <button value="cancel">Cancel</button>
          <button id="confirm" value="default">Confirm</button>
        </div>
      </form>
    </dialog>
    <button id="open">Open dialog</button>
    <output />
    <script>
      const open = document.querySelector('#open');
      const dialog = document.querySelector('#dialog');
      const output = document.querySelector('output');
      open.addEventListener('click', () => {
        dialog.showModal();
      });

      dialog.addEventListener('close', function onClose() {
        output.value = dialog.returnValue + ' button clicked';
      });
    </script>
  </body>
</html>

新的 dialog 可以使用 Esc 来关闭弹窗，还可以通过 dialog 的返回值来感觉我们点击了什么按钮。

datetime-local

datetime-local 这个 API 存在很久了，这一次进行了补全和完善。datetime-local MDN

我们来实际体验一下，代码如下：在线预览

<form>
    <label for="party">输入日期和时间：</label>
    <input id="party" type="datetime-local" name="partydate">
</form>

我们可以直接输入或者通过点击呼出弹窗来修改日期。

除了这些基本功能我们还可以添加最大和最小值等功能，由于篇幅原因这里挖一个坑，以后会有一篇来介绍这个 API。

image lazy loading

记得在我刚入行那时还在使用 jquery image loading，现在已经得到浏览器的支持。iamge lazy loading MDN

那就来看看浏览器的体验如何，代码如下：在线预览

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <img
        src="https://picsum.photos/id/1/300/800"
        alt="pic"
        loading="lazy"
        width="300"
        height="800"
      />
    </div>
   ...............
    <div>
      <img
        src="https://picsum.photos/id/20/300/800"
        alt="pic"
        loading="lazy"
        width="300"
        height="800"
      />
    </div>
  </body>
</html>

这里我加载了 20 张图片，但是 chrome 开始只会加载 2 张图片，随着我们滚动的变化，图片就会继续加载。如图：

这里也只是简单介绍一下，后面会专门开一个坑来详细介绍。

aspect-ratio

如果是经常开发移动网站的同学应该多少会接触这个属性，aspect-ratio 属性可以设置容器的横纵比。aspect-ratio MDN

实际应用一下这个属性，代码如下：在线预览

<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .bg {
        padding: 20px;
        color: #fff;
        aspect-ratio: 16/9;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="bg">div width aspect-ratio: 16 / 9</div>
  </body>
</html>

使用 aspect-ratio 属性就能创建一个纵横比的容器，在移动端有背景自适应的项目很实用，如图所示：

三、JavaScript 新特性

Structured cloning

这个 API 是给我留下印象最深刻的 API - 深拷贝 structuredClone MDN

直接上手体验一下，代码如下：

const original = { name: 'jsj' };
const clone = structuredClone(original);
console.log(clone === original); // false

更多详细内容可以查看官方文档，这里不做过多介绍。

createImageBitmap

看了这次大会才知道还有这么一个 API（个人水平有待提高 😭），如果是经常处理图片的同学应该不会陌生，他会生成一个 ImageBitmap 格式的数据。createImageBitmap。

这个 API 具体能干嘛呢，以前我们预览图片会使用 URL.createObjectURL，现在也可以使用 createImageBitmap 来实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片本地预览示例</title>
</head>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)"/>
<canvas id="image"/>
<script>
  const loadFile = async function async(event) {
    const canvas = document.querySelector('#pic');
    ctx = canvas.getContext('2d');
    const blobToImage = await createImageBitmap(event.target.files[0])
    image.drawImage(blobToImage, 0, 0);
  }
</script>
</body>
</html>

相比使用 URL.createObjectURL 会方便许多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片本地预览示例</title>
</head>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)"/>
<img id="preview"/>
<script>
    const loadFile = function (event) {
        const image = document.querySelector('#preview')
        const url = URL.createObjectURL(event.target.files[0])
        image.src = url
        image.onload = function () {
            URL.revokeObjectURL(url)
        }
    }
</script>
</body>
</html>

这里我把 2 种 API 的实现方法都放在这里。

at

数组新增了一个 at 方法，接收一个整数值并返回该索引的项目，允许正数和负数。Array.prototype.at()

现在就可以很方便的返回最后一项，代码如下：

const cart = ['apple', 'banana', 'pear'];

cart.at(-1)

// const last = cart[cart.length - 1]
// const last = cart.slice(-1)[0]

相比数组和 slice 方法更加快捷方便。

四、其他

以上只是简单的介绍一个 HMTL、CSS 和 Javascript 的一些新的特性，还有其他新的特性和功能由于篇幅的限制这里就不展开说明，简单列举一些挖个坑以后填 😄

最后视频地址 - What's new for the web platform