前言


Web 前端发展至今, 每年都有海量的新东西出来, 不管是前沿的技术方向, 还是各大浏览器厂商新支持的特性, 又或是 ECMA 每年的新标准, 内容之多, 迭代速度之快, 每个人并不能完全了解所有的东西, 写这篇文章的动机就是我在学习的过程中, 发现很多有意思的, 或者从来没听说的特性, 一看才发现, 原来这玩意已经出来很多年了, 它就静静的躺在那里, 静静的等你发现, 这也是标题为什么的 [新] 要加引号的原因.

Media Session API


在家看斗鱼直播的时候, 发现地址栏旁边有一个音乐的 icon, 点击会有一个小卡片, 可以开启画中画, 暂停播放等
image.png

一查, 好家伙, 原来这是 Chorme 73 就支持的特性 Media Session, 可以实现像原生 APP 一样, 在播放音乐或视频时, 在地址栏有一个小卡片, 很精致

image.png

image.png

Visual Viewport

image.png

这个东西又是做什么的呢? 在实际业务开发中, mac 电脑的触摸板可以对浏览器视窗进行缩小放大, 如果页面上渲染的是 canvas 会模糊, 那么理所当然的 监听 window 的 resize 事件, 发现监听不大, 百般搜索, 发现了 Visual Viewport 这个东西, 可以对屏幕大小发生改变做监听, 同时还可以用做移动端的双指缩放

place-content

image.png

这是一个 Chorme 59 就支持的 css 的属性, 同时支持 Grid 和 Flex 布局, 我看 web.dev 的文章才知道的, 惭愧… 它可以干什么呢? 其实就是对 我们熟悉的 align-content  和 justify-content  两个属性简写. 比如垂直水平居中, 我们都是这样写

1
2
3
4
5
.center {
display: flex;
justify-content: center;
align-content: center;
}

可以简写成

1
2
3
4
.center {
display: flex;
place-content: center;
}

Vibration API

image.png
顾名思义, 震动的意思, 现在的手机, 一大卖点就是 线性马达, 哒哒哒哒, 还是嗡嗡嗡嗡, 你懂的. 调用 navigtor.vibrate()  即可触发震动, 我感觉可以把他加入用户交互中, 比如点击 确定, 取消 之类的按钮给用户一个反馈, 也不失为一种提高用户体验的点, 这里有一个 demo 可以用手机在线体验一下, 不过这类的 API 有个类似的设计思路, 就是必须有用户主动触发, 就像 Audio 的 自动播放一样, 在移动端基本上是禁止的.

EventListener once

image.png
我们监听一个事件, 比如点击, 通常会这样写

1
button.addEventListener('click', () => {});

如果只想让它监听一次呢? 在这前有很多奇奇怪怪的处理方式, 众所周知, addEventListener()  第三个参数很早就改成了一个对象, 其中有一个选项就是 once , 我们可以这样改写

1
button.addEventListener('click', () => {}, { once: true });

这样就优雅的实现了事件只触发一次, 这个知道的人不知道多不多, 现在都是三大框架, 屏蔽了底层, 估计也用不到这个东西吧.

AbortController

image.png
AbortController  用于终止网络请求, Chorme 66 开始支持, 使用方式类似于 axios 的 CancelToken , 比如想中断视频下载

代码来自 MDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const controller = new AbortController();
let signal = controller.signal;

const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function () {
controller.abort();
console.log('Download aborted');
});

function fetchVideo() {
//...
fetch(url, { signal })
.then(function (response) {
//...
})
.catch(function (e) {
reports.textContent = 'Download error: ' + e.message;
});
}

最后


当然, 我作为一个码农, 以上不过只是调用别人提供的 API 而已, 没啥好说的, 不过这些东西我觉得最大的价值在于: 它们不是一些奇淫技巧, 一些是 web 标准, 一些是虽然不稳定, 但是即将有可能成为标准, 不同于 “百家争鸣” 小程序都致力于出台自家的标准, 封闭生态, 这是我个人喜欢并希望的, 属于 web 的 API, 比较我是一个 Web 前端, 不是一个小程序前端, 不是 xx 前端.

参考链接