在联网设备快速发展的格局中，响应式网页设计在Web开发中仍然至关重要。

不久前，“响应式网页设计”一词尚不存在。但是今天，我们大多数人不得不在某种程度上采用它。

据统计, 截至 2019 年，61% 的 Google 搜索访问来自移动设备。在 2020 年 9 月，Google 将改变其搜索算法，让其优先展示移动端友好的网站。

在这篇文章中，我将介绍以下内容：

• 响应式网页设计是什么
• 视口元标签及其作用
• 响应式网页设计中适应手机和平板电脑的有效技术
• 帮助模拟和监控手机和平板电脑用户体验的工具

响应式网页设计是什么？（RWD）

响应式 Web 设计是一种专注于一个网站用户环境的方法，而用户环境则取决于他们连接互联网的设备。

有很多设备特性有助于实现以用户为中心，例如：

• 网络连接
• 屏幕尺寸
• 交互类型（触屏、触控板）
• 图像分辨率

在响应式 Web 设计流行前，很多公司管理着一个完全独立的网站，用于接收基于用户代理标识的流量导向。

但在响应式 Web 设计中，服务器总是给所有设备发送相同的 HTML 代码，而 CSS 则用于改变页面在设备上的渲染。

无论采用上述哪种策略，为手机或平板电脑建站的第一步是确保浏览器知道意图。这就是视口元数据标签发挥作用的地方。

识别一个移动端网站的视口元数据标签

视口元数据标签指示浏览器如何调整页面以适应每种设备的宽度。

当视口元数据标签缺省，移动端浏览器将以默认桌面端设置来显示网页。 这导致了看似缩小的结果、非响应式的体验。

以下是一种标准实现：

<meta name="viewport" content="width=device-width,initial-scale=1" />

视口元数据标签示例

现在浏览器知道发生了什么，我们可以利用流行的技术来让我们的网站具备响应式能力。🙌

针对不同屏幕尺寸和方向的 CSS 媒体查询

如果你初试响应式 Web 设计，媒体查询是要学的首要 CSS 特性。媒体查询让你能根据视口宽度设置元素样式。一种流行的 CSS 策略是优先编写移动端样式，再在它们之上构建更复杂的桌面专用样式。

媒体查询是响应式 Web 设计的一个重要部分，通常用于处理网格布局、字体字号、外内边距在屏幕尺寸和方向下的差异。

下面是一个移动优先的样式常见用例示例，其中一列在较小的设备上宽度为 100%，但在较大的视口上宽度为 50%。

.column {
    width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}

移动优先 CSS 示例

以上代码是一个简单示例，但它实际在做的是非常有趣的。

1. 在考虑移动优先时，column 元素被设置一个 100% 的宽度；
2. 通过使用 min-width 媒体查询，我们专门为最小宽度 600px 的视口（视口宽于 600px）定义了规则。所以，宽于 600px 的视口，我们的 column 元素将有父级 50% 的宽度。

尽管媒体查询对于响应式 Web 设计至关重要，很多其它新的 CSS 特性也在浏览器中被广泛采用与支持。Flexbox 便是其中之一，在响应式 Web 设计中是重要的 CSS 特性。

什么是 Flexbox？

你可能好奇 —— “Flexbox 是干啥的？” 更好的问题是 —— “Flexbox 不能干啥？” 最简单的 CSS 垂直居中方法是啥？Flexbox。你怎样创建一个响应式网格布局？Flexbox。我们怎么实现世界和平？Flexbox。

Flexbox 布局（弹性盒子）模块提供了一种更有效的方式去布局、对齐和在容器项目间分配空间，即使它们的尺寸是动态的（因此就有了 “flex” 这个词）。

在以下示例中，我们结合如上所述的媒体查询来创建一个响应式网格。

<style>
  main {
    background: #d9d7d5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  div {
    background: #767775;
    flex-basis: 100%;
    height: 100px;
    margin-bottom: 0.5rem;
  }
  @media (min-width: 600px) {
    main {
      flex-wrap: nowrap;
    }
    div {
      flex-basis: 33%;
    }
  }
</style>
<main>
  <div></div>
  <div></div>
  <div></div>
</main>

CSS flexbox 示例

我们用这段代码完成了以下事情：

1. 在我们的 main 容器元素中用 display: flex 建立一个 flexbox 布局。
2. 先设置移动端样式。我们给 main 元素设置 flex-wrap: wrap，它允许子元素在我们的 flexbox 布局中换行，如下图 1 所示。我们在我们的 div 元素设置 flex-basis: 100% 来确保它们在 flexbox 布局中占满父级宽度的 100%（图 1）。
3. 再设置更大设备（如平板、桌面电脑）的样式。我们利用一条与我们上节示例类似的媒体查询来设置我们的容器 main 元素为 flex-wrap: nowrap。这样确保子元素不换行，并且它们在行类型的布局中维持一列。通过在媒体查询中设置 div 为 flex-basis: 33% —— 我们创建了一些为父级宽度 33% 的列。
4. 在这个例子中，魔法将在我们结合媒体查询和 flexbox 规则的更大设备中出现。因为我们定义了 display: flex，并且没在媒体查询中覆盖这条规则，我们就拥有了一个适配手机、平板电脑和桌面电脑的 flexbox 布局。媒体查询 flex-basis: 33% 和继承的 display: flex 规则将给我们一个可识别的 flexbox 布局（如图 2 所示）。在过去，为了实现这种列类型布局，我们需要做一些严肃的繁重工作并写一团乱糟糟的 CSS。

Flexbox 提供了一种很棒的方法去实现多变而流动的布局。在一些实例中，我们在纵向空间中可能没有太多的自由。我们可能需要给一个元素设一个固定高度。在这种情形下，我们有另一种可用的技术 —— 水平滚动。

基于 Overflow Scroll 的水平滚动

也许有一天，你有一些溢出视口的内容，并且没有优雅的处理方法。 瞧这边…… overflow scroll 能救你。🦸

这种技术的常见用处包括可滚动菜单和表格。以下是一个可滚动菜单的示例。

<style>
  menu {
    background: #d9d7d5;
    padding: 0.25rem;
    overflow-y: scroll;
    white-space: nowrap;
  }

  span {
    background: #767775;
    color: #ffffff;
    display: inline-block;
    margin: 0.25rem;
    padding: 0.5rem;
  }
</style>
<menu>
  <span>响应式 Web 设计</span>
  <span>RWD</span>
  <span>响应式菜单</span>
  <span>Overflow scroll 示例</span>
  <span>这是一大堆内容！</span>
  <span>是的</span>
  <span>我们</span>
  <span>有</span>
  <span>另一个</span>
  <span>项目</span>
</menu>

示例：水平滚动菜单

你是怎么做到的？让我们深入探讨一下。

• overflow-y: scroll 是这个食谱的关键成分。通过指定它的子元素将在水平坐标上以滚动行为溢出。
• 没那么快！尽管你可能认为 overflow-y 就够了，我们也需要告诉浏览器用 white-space: nowrap 不让子元素换行。🤷

现在我们掌握了一些响应式网页设计（RWD）布局技巧，让我们来看看那些因其视觉特性而具有挑战的元素——图片和视频。

响应式图片

通过使用现代图片标签属性，我们能适应各类设备和分辨率。以下是一个响应式图片的示例。

<style>
  img {
    max-width: 100%;
  }
</style>

<picture>
  <source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
  <source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
  <img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>

这在做很多事情。让我们来分解一下：

1. 通过设置 max-width: 100%，图片会根据其容器宽度来放大或缩小。
2. 通过结合使用 picture、source 和 img 标签，我们实际上只渲染一张图片，而且是只加载那张最适合用户设备的图片。
3. WebP 是一种现代图片格式，为 Web 图片提供优越的压缩性。利用 source，我们能为支持它的浏览器采用一张 WebP 图片，而另一个 source 标签则为不支持 WebP 的引用一张 PNG 版图片。
4. srcset 是用来告诉浏览器根据分辨率应该用哪张图片。
5. 我们利用 loading="lazy" 属性值对来启用原生懒加载。

响应式视频

响应式视频是另一个激发一大批文章和文档的主题。

一个建立响应式图片、视频、iframe 和其它元素的关键策略涉及使用 aspect-ratio。Aspect ratio 盒子不是一个新技术，而且对 Web 开发者来说是非常有用的工具。

关于如何实现“流动”宽度视频，这篇文章提供了一个扎实的范例。让我们看一下代码，再分解一下。

<style>
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }

  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="videoWrapper">
  <!-- 复制、粘贴自 YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

在这个例子中，我们有一个嵌入为 iframe 的 YouTube 视频和一个带有 videoWrapper 类的 div 容器。这段代码做了很多…… 让我们来深挖。

• 在容器元素上的 position: relative 允许子元素利用相对于它的绝对定位。
• height: 0 结合 padding-bottom: 56.25% 是这里的要点，它建立了一种动态行为，强制 16:9 的纵横比。
• 设置在 iframe 上的 position: absolute、top: 0 和 left: 0 创建了一种行为，让元素相对父元素绝对定位自己…… 将其固定在左上。
• 最后，长宽的 100% 让子元素 iframe 占它父元素的 100%。父元素 .videoWrapper 完全掌控这个 aspect ratio 布局的建立。

我知道…… 这很多。为了让视频和图片在手机和平板电脑上看起来舒服，我们还有更多可以做的。除此之外，我也鼓励对这些主题的独立研究。

好了，现在我们是响应式 Web 设计的大师了，我们如何测试我们做了什么？幸运的是，我们有很多工具去模拟和监控各种设备上的用户体验。

模拟和监控响应式网站的工具

有各种有用的工具去帮助我们创建响应式 Web 设计的网站。以下是我发现的两个特别有用的。

Chrome DevTools 移动端仿真

Chrome 的 DevTools 提供各类平板电脑和手机的移动端仿真。它也提供一个“responsive”选项，让你定义一个自定义视口尺寸。

用 Foo 监控移动端网站性能

Lighthouse 是一个开源工具，提供一种分析网站设备特定性能的方法。

Foo 在幕后使用 Lighthouse 来监控网站性能，并提供分析反馈。你可为桌面端和移动端设备同时设置监控，以获得有关你的网站响应性的持续反馈。

比如，一份 Lighthouse 报告将根据设备标注出未正确加载的图片。

结论

响应式 Web 设计将继续快速发展，但如果我们保持在当前趋势之上，我们能为我们的用户提供最佳体验。我希望这些工具和技术对您有所帮助！

不但我们网站的用户将受益于一个多功能的设计，同时搜索引擎也将提升我们网页的排名。

但在混乱中，有着 500 万人生活的阿富汗首都喀布尔，一代软件工程师正在重新将它定义为全球技术中心。

每周末，几十个进取的开发者都会在喀布尔附近的办公室一起写代码，并向他人分享他们的知识。

走进“编程周末 CodeWeekend” —— 一个改变喀布尔技术面貌的草根组织

超过 3000 位阿富汗的开发者、准开发者都参与到了编程周末。

编程周末每周都会在喀布尔举办编程活动。

截至目前，他们已举办超过 100 场活动。

编程周末吸纳了 freeCodeCamp 喀布尔学习小组，它现已成为非营利组织。它专注于帮助喀布尔人改善他们的编程技能，并建立他们的专业网络。

他们通过举办免费编程工作坊、提供交流机会、让技术更容易获得来实现这一点。

“我们有两种类型的活动。我们每周的活动教新人编程，而月度活动邀请在同一水平的软件工程师和其它专业技术人员，以便他们能分享知识，并提供一个交流机会。”—— “编程周末”组织者 Jawed Mansoor

“编程周末”社区竭尽全力尽可能具有包容性，它秉持硅谷技术大会的行为准则，鼓励如下行为：

• 使用热情和包容的语言
• 尊重不同的观点和经验
• 优雅地接受建设性批评
• 专注于对社区最好的事
• 对其他社区成员有同情心

“编程周末”分为街坊级的分会，每个分会都有负责人。分会负责人们与当地的公司和组织联络，以保障赞助和活动场地。

“我们不在活动上花费太多。我们需要一个场地和一些茶点，可能还要一个投影仪。每当想举办活动时，我们都会联系一个私营机构，以便他们为我们提供空间和互联网。我们期望至少有个小房间作为专用场地。”—— “编程周末”导师 Mustafa Ehsan

每期活动大概 3 小时。首先，老师以一个对主题的概括性介绍开场。然后，每个人开始做 freeCodeCamp.org 的课程。三四个导师会穿梭其间，帮助遇到困难或有问题的人。

“有些人每周都来，热情高涨。每当我们没办活动时，总有人来问我们为啥不办。他们真的很期待。”—— “编程周末”导师 Mustafa Ehsan

他们的志愿工作在产生作用，来自“编程周末”社区的人逐渐找到开发者工作。他们社区成员获得的很多工作涉及为阿富汗政府、本地/国际创业公司构建服务。

比如，他们的团队为人力资源部门和其它后台办公功能开发并维护 Web 应用，并且在此过程中，他们开始使用像 Vue.js 和 Laravel 这样令人兴奋的新工具。

“编程周末”和 freeCodeCamp 喀布尔社区背后的人们

Jamshid Hashimi 是“编程周末”创始人，他 13 岁时，在他长大的乡村创立了一个足球俱乐部。

在 Rumie 和 Alidrivers 等公司工作之前，他继续在土耳其的 Dokuz Eylul 大学学习。

他对技术和社区营造充满激情，在 2014 年创立了“编程周末 CodeWeekend”，这正是两者的完美融合。

Shaheen Naikpay 不是一个职业开发者，他有教育心理学背景，并作为一个军事工业的项目经理。

但 Shaheen 说他喜欢贡献社会，“编程周末”是其中很大的一块，他志愿作为“编程周末”的活动管理协调员。

有些活动是 Mustafa 的雇主 Netlinks 赞助的。Netlinks 的 CEO 积极鼓励 CodeWeekend 在公司大堂办活动。

Jawed Mansoor 在印度完成了他的计算机科学学位，并成为一名数据库工程师，在喀布尔帮助组织 CodeWeekend 活动。

Fazila Nazary 是一名经验丰富的数据库开发者和讲师，她是阿富汗另一座城市 Mazar-i Sharif 的 CodeWeekend 理事。

该组织还拥有很多常规活动的导师，包括 Mustafa Ehsan、Jalal Saidi、Sediq Khan、Mohammad Ali Abbasi 和 Akmal Arzhang。

若你正在阿富汗旅行，可以加入 CodeWeekend 的 Facebook 群组，参加他们的活动。

并且，你也可以向 freeCodeCamp.org 做免税捐款，来支持全球数以百万计正在学编程的人们。

我们可以一起创造更多免费的教育资源，支持 CodeWeekend 这样的社区，帮助他们持续影响当地社区人民的生活。

原文：Inside Afghanistan’s friendliest coding club，作者：Quincy Larson

虽然 WordPress、Discuz!X 等建站系统早已非常成熟，但在人们更看重 UI/UX 设计的今天，它们专用的模板引擎反而成了二次开发最大的障碍。只要是近两年做过  Web 前端开发的同学就知道，不能利用基于 Node.js 的现代化工具链的项目，开发起来有多蛋疼。

Web 前后端分离催生了 Web 前端岗位，也让  WordPress、Ghost  这些老牌 CMS 系统开放了  RESTful API。但有的开源项目做得更加激进 ——  Headless CMS，前台界面都省了，只有后端 API  和后台界面，普通用户看啥你们自己写~

这其中最为优秀的便是  Strapi，因为它的后台设计不局限于传统的博客、门户，而是：

1. 数据模型灵活可配置（可用 Git 管理 JSON 配置文件）
2. RESTful API 完全支持  CRUD（增删查改）和  RBAC（角色权限）
3. 自身是个标准的  Node.js 后端项目，并有留有二次开发接口
4. 包括  Swagger  Documentation 在内的插件生态

这使得它既像 BaaS 中的  LeanCloud，又像 Python 开发框架  Django，在简单易用的同时，又不束缚专业开发者。

本地开发

创建项目

以下命令会一键创建项目骨架、安装依赖包、启动开发模式：

npm init strapi-app ~/my-project --quickstart

开发模式启动

下次继续开发时，则执行以下命令：

cd ~/my-project
npm run develop

如果执行  npm start，启动的后台系统只能添加数据，不能修改数据结构，是线上生产模式。

创建代码库

在 GitHub 上创建代码库后，把生成的代码传上去：

git init
git remote add origin https://github.com/my-id/my-project.git
git add .
git commit -m "[add] Strapi framework"
git push

服务器部署

下面以 Linux (Ubuntu 18.04) 为例，简介线上部署。

安装容器环境

# 安装 Docker
curl -fsSL https://get.docker.com | sh
# 安装 Python pip
apt install python-pip
# 安装 Docker Compose
pip install docker-compose

初始化 Git

为了后面自动化部署的方便，需要生成好  SSH 密钥对：

# 生成 SSH Key
ssh-keygen -t rsa -b 4096 -C "my_email@example.com"

cd ~/.ssh
添加 SSH Key 私钥
ssh-add id_rsa
信任 SSH Key 公钥

并将上述公钥添加到  [https://github.com/my-id/my-project/settings/keys][16]  页面。

如此，便可无需用户名、密码，直接克隆代码库：

git clone git@github.com:my-id/my-project.git /var/www

部署配置文件

将以下两个文件放在代码库相应路径中，并提交：

Docker 服务编排

~/my-project/docker-compose.yml

version: '3'

以上配置的是最简单的  SQLite  数据库，小型网站完全足够。

GitHub Actions 持续部署

以下配置让我们无需每次更新 Strapi 配置、代码时，登录服务器手动部署新版本：

~/my-project/.github/workflows/main.yml~

name: Deploy Server
on:
  push:
    branches:
      - master
jobs:
  SSH:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master
      - name: Deploy
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: root
          key: ${{ secrets.SSH_KEY }}
          script: |
            cd /var/www
            git fetch --all
            git reset --hard
            git pull
            docker-compose down
            docker-compose up -d

【注意】在推送代码前，务必去  [https://github.com/my-id/my-project/settings/secrets][22]  页面创建好上述配置中的变量：

名称内容HOST服务器  IP 地址SSH_KEYssh-keygen  命令生成的私钥，通常存在  /.ssh/id_rsa

总结

经过前面的一顿折腾，开发者只需在本机浏览器中点点鼠标、轻敲键盘，就能实现网站数据结构的设计；推送代码到 GitHub，就能实现网站后台的更新。而运营专员访问的线上后台锁定了数据结构，他们只能在现有数据表中添加具体数据。这样一来，面对单纯的数据存取，后端 API 和后台 UI 都不用开发了~

欢迎访问我的更多文章。

很多开发者构建自定义表单元素，提供浏览器未内置的控件，或自定义超越内置表单控件的外观与体验。

然而，复制 HTML 内置表单控件的特性很难。想一下当你把一个 <input> 元素加进一个表单时，它自动获得的一些特性：

• 输入框自动加进表单的控件列表
• 输入框中的值自动与表单一起提交
• 输入框参与表单校验，你可以用 :valid 和 :invalid 伪类为输入框设置样式
• 表单重置、重加载时，或浏览器尝试自动填充表单项时，输入框都会被通知

自定义表单组件通常没有这些特性。开发者能用 JavaScript 解决一些限制，比如向一个表单添加一个隐藏的 <input> 以参与表单提交。但其它特性无法单单用 JavaScript 复制。

两个 Web 新特性让构建自定义表单控件更简单，解决了现有自定义控件的限制：

• formdata 时间让一个任意的 JavaScript 对象参与到表单提交中，所以你可以无需一个隐藏的 <input> 就能添加表单数据
• Form-associated Custom Elements API 让自定义元素表现得更像内置表单控件

这两个特性可用于创建效果更好的新型控件。

构建自定义表单组件是个高级话题。本文假定您对表单和表单控件有一定的了解。当构建一个自定义表单控件时，有很多因素要考虑，特别是确定你的控件是对所有用户无障碍的。学习更多表单知识，前往 MDN 表单指南。

基于事件的 API

formdata 事件是一个让任何 JavaScript 代码参与表单提交的底层 API。该机制是这样的：

1. 你添加一个 formdata 事件监听器到你想交互的表单
2. 当一个用户点击提交按钮，该表单触发一个 formdata 事件，它包含一个持有所有待提交数据的 FormData 对象
3. 每个 formdata 监听器都有机会在表单提交前添加或修改数据

这里是一个在 formdata 事件监听器中发送一个单值的例子：

const form = document.querySelector('form');
// FormData 事件在 <form> 提交时、传输前触发
// 该事件有个 formData 属性
form.addEventListener('formdata', ({ formData }) => {
  // https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
  formData.append('my-input', myInputValue);
});

用我们在 Glitch 的示例来尝试。务必在 Chrome 77 或更高版本上运行，以查看该 API 的运行情况：https://glitch.com/~nosy-scandalous-king。

表单关联的自定义元素

你可以把基于事件的 API 用于任何类型的组件，但它只允许你与提交过程交互。

标准化的表单控件除了提交外，还参与了表单生命周期的许多部分。表单关联的自定义元素旨在填补自定义控件和内置控件的鸿沟，并匹配了很多标准表单元素的特性：

• 当你把一个表单关联的自定义元素放进一个 <form>，它就像一个浏览器提供的控件，自动与该表单关联。
• 该元素可被一个 <label> 元素标记
• 该元素可设置一个与表单一起自动提交的值
• 该元素可设置一个标记，指示它是否取得有效输入。如果其中一个表单元素有无效输入，该表单则不能被提交。
• 该元素可提供一些用于表单生命周期多个部分的回调 —— 比如当该表单被禁用或重置到它的默认状态
• 该元素支持标准的 CSS 表单控件伪类，如 :disabled 和 :invalid

这么多功能！本文不会涉及所有内容，但将阐述把自定义元素与表单集成所需的基础知识。

本节假设你对自定义元素有基本的了解。有关自定义元素的介绍，参见 Web Fundamentals 上的《Custom Elements v1：可复用的 Web 组件》。

定义一个表单关联的自定义元素

把一个自定义元素转变成一个表单关联的自定义元素，需要几个额外步骤:

• 添加一个静态 formAssociated 属性到你的自定义元素类，这告诉浏览器把该元素看作一个表单控件
• 在该元素上调用 attachInternals() 方法，以访问表单控件的其它方法和属性，如 setFormValue() 和 setValidity()
• 添加表单控件支持的通用属性和方法，如 name、value 和 validity

来看看如何把这些项目融入一个基础的自定义元素定义：

// 表单关联的自定义元素必须是独立的自定义元素 ——
// 意味着它们必须继承自 HTMLElement，而非它的一个子类。
class MyCounter extends HTMLElement {
  // 把该元素标记为一个表单关联的自定义元素
  static formAssociated = true;

  constructor() {
    super();
    // 获得访问内部表单控件 API 的能力
    this.internals_ = this.attachInternals();
    // 该控件的内部值
    this.value_ = 0;
  }
  // 表单控件通常暴露一个“value”属性
  get value() {
    return this.value_;
  }
  set value(v) {
    this.value_ = v;
  }
  // 以下属性和方法并非必须，但浏览器级表单控件提供了它们。
  // 提供它们有助于确保与浏览器提供的控件保持一致。
  get form() {
    return this.internals_.form;
  }
  get name() {
    return this.getAttribute('name');
  }
  get type() {
    return this.localName;
  }
  get validity() {
    return this.internals_.validity;
  }
  get validationMessage() {
    return this.internals_.validationMessage;
  }
  get willValidate() {
    return this.internals_.willValidate;
  }

  checkValidity() {
    return this.internals_.checkValidity();
  }
  reportValidity() {
    return this.internals_.reportValidity();
  }
  // ...
}

customElements.define('my-counter', MyCounter);

一旦注册，你就可以在你使用浏览器表单控件的任何地方使用这个控件：

<form>
  <label>兔子的数量: <my-counter></my-counter></label>
  <button type="submit">提交</button>
</form>

设置一个值

attachInternals() 方法返回一个可访问表单控件 API 的 ElementInternals 对象。这些 API 中最基础的是 setFormValue() 方法，用来设置该控件的当前值。setFormValue() 方法可接受三种类型之一的值：

• 一个字符串值
• 一个 File 对象
• 一个 FormData 对象，你可以用一个 FormData 对象来传多值（例如一个信用卡输入控件可能会传一个卡号、过期日期和验证码）

设置一个简单值：

this.internals_.setFormValue(this.value_);

设置多值，你可以执行以下操作：

// 用该控件名作为提交数据的基础名
const n = this.getAttribute('name');
const entries = new FormData();

entries.append(n + '-first-name', this.firstName_);
entries.append(n + '-last-name', this.lastName_);
this.internals_.setFormValue(entries);

setFormValue() 方法接受一个可选的第二参数 state，用来存储该控件的内部状态。
详情参见本文「恢复表单状态」一节

输入校验

你的控件也可以通过调用内部对象上的 setValidity() 方法参与表单校验。

// 假设在内部值更新时调用此方法
onUpdateValue() {
    if (
        !this.matches(':disabled') &&
        this.hasAttribute('required') &&
        this.value_ < 0
    ) {
        this.internals_.setValidity(
            { customError: true }, 'Value cannot be negative.'
        );
    } else {
        this.internals_.setValidity({});
    }
    this.internals.setFormValue(this.value_);
}

你可以用 :valid 和 :invalid 伪类给一个表单关联的自定义元素设置样式，就像一个内置表单控件一样。

尽管你可以设置一个校验消息，但 Chrome 目前不能显示表单关联自定义元素的校验消息。

生命周期回调

Form-associated Custom Elements API 包含一组额外的生命周期回调，以绑定到表单生命周期。

这些回调是可选的：仅在你的元素需要在生命周期的某一刻做某事时才实现一个回调。

void formAssociatedCallback(form)

当浏览器将一个表单元素关联到该元素时调用，或从一个表单元素解除关联该元素时。

void formDisabledCallback(disabled)

该元素的 disabled 状态改变后，无论是因为该元素的 disabled 属性被添加或移除；还是因为该元素的一个祖先 <fieldset> 的 disabled 状态被改变。disabled 参数代表该元素的新禁用状态。例如，当该元素被禁用时，它可能要禁用它影子 DOM 中的元素。

void formResetCallback()

该表单被重置后调用。该元素应该将其自身重置回某种默认状态。对于 <input /> 元素，这通常涉及设置 value 属性以匹配标签中设置的 value 属性（或在复选框的案例中，设置 checked 对象属性以匹配 checked 标签属性）。

void formStateRestoreCallback(state, mode)

在两种情形之一被调用：

• 当浏览器恢复该元素状态时（例如，一次导航后，或当浏览器重启时），在此情形下 mode 参数是 "restore"
• 当浏览器的输入助手特性（诸如表单自动填充）设置一个值时，在此情形下 mode 参数是 "autocomplete"

第一个参数的类型则取决于 setFormValue() 方法被怎样调用。详情参见本文「恢复表单状态」一节。

恢复表单状态

在某些情形下 —— 如当导航返回一个页面时，或重启浏览器时，浏览器可能尝试恢复该表单到用户保留的状态。

对于一个表单关联的自定义元素，被恢复的状态来自你传到 setFormValue() 方法的值。就像早前示例中展示的那样，你可以用一个单值参数或两个参数调用该方法：

this.internals_.setFormValue(value, state);

此处的 value 代表该控件的可提交参数。此处的可选 state 参数是一个该控件状态的 内部 表示，可包含不发送到服务器的数据。该 state 参数具有与 value 参数相同的类型 —— 它可以是一个字符串、File 或 FormData 对象。

state 参数在你无法只基于值去恢复一个控件状态时很有用。例如，假设你创建了一个多模的颜色选择器：一个调色板或 RGB 色轮。可提交的 值 会是规范形式的选中颜色，如 "#7fff00"。但恢复该控件到一个特定状态，你也需要知道它之前处在哪种模式，所以 状态 可能形如 "palette/#7fff00"。

this.internals_.setFormValue(this.value_, this.mode_ + '/' + this.value_);

你的代码可能需要基于存储的状态值来恢复自身状态。

formStateRestoreCallback(state, mode) {
    if (mode == 'restore') {
        // 预期一个形如 'controlMode/value' 的状态参数
        [controlMode, value]= state.split('/');
        this.mode_ = controlMode;
        this.value_ = value;
    }
    // Chrome 目前不处理表单关联自定义元素的自动填充。
    // 在自动填充案例中，你可能需要处理一个原始值。
}

在一个更简单的控件案例中（例如一个数字输入框），值可能足够该控件恢复之前的状态。当调用 setFormValue() 时，若你忽略 state ，值会被直接传给 formStateRestoreCallback()。

formStateRestoreCallback(state, mode) {
    // Simple case, restore the saved value
    this.value_ = state;
}

一个实际的例子

这个示例整合了表单关联自定义元素的很多特性。务必在 Chrome 77 或更高版本运行它，以查看 API 的运行情况。

特性检测

你可以用特性检测去确定 formdata 事件和表单关联的自定义元素是可用的。目前每个特性都没有补丁发布。针对这两种情况，你可以回退到添加一个隐藏的表单元素来把该控件值传给表单。很多更高级的表单关联自定义元素特性将可能很难或无法打补丁。

if ('FormDataEvent' in window) {
  // 支持 formdata 事件
}
if (
  'ElementInternals' in window &&
  'setFormValue' in window.ElementInternals.prototype
) {
  // 支持表单关联的自定义元素
}

译注：原文发表一季度后，社区开发者发布了一个 ElementInternals polyfill，而 Web Components 标准团队官方 polyfill 也在计划实现本文所述特性。

结论

formdata 事件和表单关联自定义元素为创建自定义表单控件提供了新工具。

formdata 事件没有给你任何新能力，但它给你一个接口，让你无须一个隐藏的 <input /> 元素，即可添加表单数据到提交流程。

Form-associated Custom Elements API 通过一组新能力让自定义表单控件像内置表单控件一样工作。

译者后记

Custom Elements v1 标准刚发布时，自定义表单元素的构建可以通过扩展原生标签特性来实现：

<template>
  <div contenteditable="true"></div>
</template>

<script>
  const { content } = document.currentScript.previousElementSibling;

  class MyInput extends HTMLInputElement {
    constructor() {
      super().attachShadow({ mode: 'open' }).append(content.cloneNode(true));
    }
  }
  customElements.define('my-input', MyInput, { extends: 'input' });
</script>

<input is="my-input" />

虽然基于 ES 6 class 继承语法可以重写表单元素的各种属性、方法，在外部代码操作 DOM 时执行自定义逻辑，但用户直接与浏览器交互不会调用这些重写的接口。因此我们的自定义元素只能单纯地依赖内置表单元素的能力，而无法介入表单的工作流程。

于是，浏览器进一步暴露自己的内部机制，便有了 Element Internals API。它除了包含本文所述 Form-associated Custom Element API 的很多接口，还涉及另一项新标准 —— AOM（可访问性/无障碍化对象模型），让开发者更轻松地构造更好用的组件。

同时，译者自研的 Web Components 组件框架 WebCell 在原文的帮助下率先支持新标准，使前文那段最长的示例代码变得非常简单：

import { component, mixinForm } from 'web-cell';

@component({
  tagName: 'my-counter'
})
export class MyCounter extends mixinForm() {}

最后，欢迎大家持续关注译者对 Web 组件相关标准的后续译文和开源项目更新~

本文译自 More capable form controls。访问译者的更多文章。

TypeScript 是适用于任何规模应用的 JavaScript

其中奥妙，且看我一个边干边学的 JS 码农娓娓道来~

安装简单

因为 TypeScript 官方支持 ECMAScript 最新标准和进入 Stage 3 的提案，绝大多数项目的代码可以直接编译，polyfill 和运行时工具函数全内置，不像 Babel 那样需要自己找运行时补丁库或提案编译插件。

TypeScript

npm install typescript -D

Babel

npm install @babel/core @babel/preset-env @babel/cli -D
npm install @babel/polyfill

import '@babel/polyfill';

配置方便

TypeScript

TypeScript 默认不需要配置，在写 .ts(x) 文件的过程中，TS 编译器会在缺少配置的地方提示你需要添加什么配置，此时在项目根目录新建一个 tsconfig.json 文件，支持 TS 语言服务协议的代码编辑器还能提示配置文件的选项，全程按指导操作即可，官方文档都很少需要看~

Babel

Babel 虽然编译标准语法只需一个 preset 包，但更多的常用提案语法、框架语法糖就需要一大堆插件了，而且所有配置选项都没有代码提示，必须各种查文档，有时文档也不甚详细，容易踩坑……

{
  "presets": ["@babel/preset-env"]
}

类型可选

TypeScript 的核心卖点是类型系统，这让很多从 JavaScript、PHP、Python 等脚本语言入门编程的程序员非常畏惧，认为是非常大的学习成本。

但 TS 的类型系统与 C/C++、Java、C# 等传统强类型语言从设计理念上非常不同 ——

TS 代码不需要处处声明类型，而只需程序员在编译器推导无效的少许地方标注类型

而 TS 类型推导的基础数据则是 JS、DOM、Node.js 等标准/技术中的 API 类型定义，编译器循着语法结构的上下文，自然能推导出大多数变/常量的类型，以便帮程序员检查潜在错误、显示代码提示。

开发轻松

Node.js 运行时

虽然 Node.js 创始人又另起炉灶搞了第一个全功能 TypeScript 运行时环境 Deno，但并不意味着 Node.js 不能方便地运行 TS 代码，因为我们有 ts-node ——

// 全局安装运行时
npm install ts-node -g
// 执行一个 TS 脚本
ts-node index.ts

Parcel 零配置打包

如果你用 Parcel 这种零配置打包器开发 Web 前端项目，你甚至完全不用安装包括 TypeScript、LESS、SCSS 在内的任何常见预编译语言的编译器。在项目首次启动时，Parcel 会自动帮你安装好项目依赖的所有代码文件类型对应的编译器！你只需在启动项目时装好 Parcel，然后就按 HTML、CSS、JS 原生语法写逻辑、引用外置资源即可 ——

npm install parcel-bundler -D

总结：TS，真香！

我的 JavaScript 生涯从 ES 3 入门，后来用 ES 5 结合 JSDoc 开发小框架，再到 ES 6+ 配合 ESDoc 开发 WebCell v1，最终用 TS + TSDoc 重写出 WebCell v2。在充分利用 JavaScript 这门“无所不能”的语言强大灵活性的同时，更简洁的 ECMAScript 新语法和更规范的 TypeScript 类型系统，为开源库和日常项目开发带来突飞猛进的效率提升 —— TS，真香！

彩蛋

再分享一个 TypeScript JSX 类型推导的新玩法：

CommanderJSX —— 用 JSX 声明命令行参数，并支持回调传参类型推导

欢迎访问我的更多文章。

说起填志愿，回想起我高考时正值汶川大地震。那时我们获取可靠、有效、全面的志愿参考信息，基本只能通过学校发的一本大部头参考书，里面汇集了全国招生的院校、专业和往年录取数据。但这样一本像过去每个城市的电话黄页一样的书，反复查阅它的“低效”痛苦就不用多说了。

进入大学 IT 技术社团之后，就一直想用自己学到的编程技术，来为学弟学妹解决我当年那般的痛苦。但彼时，我国政府部门信息公开政策的保守和技术的落后，让我们很难获得好用的数据，商业平台又有巨大的封闭壁垒，遂作罢……

直到前一阵子，FCC 一位城市社区组织者在群里分享了黄希彤老师的填教授公益项目，看到他把多年收集的公开数据用统计学方法进一步处理，免费为广大考生做参考，内心十分激动！于是想尽自己现在的专长所能，帮黄老师优化一下前端界面，让广大的考生和家长用起来更方便。

同时黄老师也欣然接受了我一直以来的开源直播方式，于是便有了 FCC 中文社区 B 站直播间长期栏目《水歌酱的开源日常》的这期特别节目。

大家可以在下方观看视频。也欢迎大家关注 FCC B 站账号以接收日常节目的开播提醒。

使用入门

基本操作

1. 选择考生所在省份、分科后，再填入高考成绩，点击查询按钮即可查询到根据往年录取情况有可能考上的学校和专业
2. 可以下拉选择不同的上线概率后重新查询，来筛选相对保险（高概率、保底）的专业和相对有挑战（低概率）的专业
3. 对于公布位次的省份，可以选择按照位次来查询筛选专业
4. 筛选后页面出现过滤按钮，可以输入感兴趣的学校和专业关键字在结果中进行进一步的筛选
5. 每年招生情况都会发生变化，因此考生在查询后可点击学校、专业名称的链接，进一步了解相关专业当年的招生信息

安装为 App

技术知识

为了满足黄老师提出的“除 CSS 样式外，简单业务不依赖任何库”要求，水歌本次对填教授 Web 前端代码的重构采用了最新版 BootStrap、DOM API、JavaScript 标准，刚学完 freeCodeCamp HTML、CSS、JS 基础课程的菜鸟也能快速上手~

以下是这些易学、易用的标准、通用技术的入门文档：

HTML 标签、属性

1. tabindex 全局属性
2. hidden 全局属性
3. iframe 标签的 name 属性
4. template 标签

CSS

1. :empty 伪类选择符

DOM API

1. CSS 选择器 API
2. document.forms
3. ParentNode 接口
4. ChildNode 接口
5. Element.prototype.classList
6. HTMLFormElement.prototype.elements

BOM API

1. fetch()
2. URL()

ECMAScript API、语法

1. Array.prototype.map()
2. Array.from()
3. ECMAScript 6 模板字符串
4. with 语句的利弊
5. async 函数

第三方开源库、云服务

1. BootStrap 4.5
2. API Polyfill 自动补丁服务
3. CodeSandbox 在线 Web 前端项目沙盒
4. Parcel 零配置打包器

参考文档

以上知识点在 FCC 成都社区之前的技术博文有介绍：

1. 《ECMAScript + DOM 骚操作》
2. 《JavaScript 效率工具》
3. 《如何用开源软件办一场技术大会？》

1. “独立”运行：在“系统正在运行的应用”列表中独立显示
2. 本地缓存：页面秒开、离线运行
3. 安装到主屏幕：桌面图标、启动首屏、全屏显示等，看起来和原生 App 别无二致

以上特性已经很香了，更甭说开放的 Web 还有更丰富的新标准来拓展 Web App 的疆域了~

那这么香的新标准怎么上手呢？会像小程序开发环境那样难用吗？我们老规矩 —— 抄起键盘就是一把梭！

应用元数据

一个渐进式 Web 应用首先要声明一下自己的基本信息：

index.html

<head>
  <link rel="manifest" href="index.webmanifest" />
  <!-- 老浏览器私有 meta 标签兼容 -->
  <script src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.15/pwacompat.min.js"></script>
</head>

index.webmanifest

{
  "name": "应用全名（启动页）",
  "short_name": "应用短名（桌面图标）",
  "start_url": "https://example.dev/",
  "description": "应用简介",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "lang": "zh-CN",
  "dir": "ltr",
  "theme_color": "rgba(0,0,0,0.5)",
  "background_color": "transparent",
  "icons": [
    {
      "src": "logo.png",
      "type": "image/png",
      "sizes": "144x144"
    }
  ]
}

后台服务

一个 PWA 能真正安装到用户系统中，还需要一个 Service Worker。但它的工作原理对初学者直接手写有些困难，亲爹 Google 已经做好了开发框架 Workbox，还配了 Workbox CLI，几行命令就能生成一个基本的 ServiceWorker，简直不要太贴心：

npm install workbox-cli --global

cd your_project/

npm run build  # 先执行你项目的构建脚本，生成生产环境目录

workbox wizard

跟着向导执行完上述命令，会生成一个名为 workbox-config.js 的配置文件，但须稍加修改：

module.exports = {
  globDirectory: 'dist/',
  globPatterns: ['**/*.{html,css,js,json,ico,gif,jpg,jpeg,png,webp}'],
  swDest: 'dist/sw.js',
  // 禁用 Google Cloud CDN
  importWorkboxFrom: 'disabled',
  // 启用 第三方 CDN
  importScripts: [
    'https://cdn.jsdelivr.net/npm/workbox-sw@4.3.1/build/workbox-sw.min.js'
  ],
  // 首次打开页面后尽快接管网络请求
  clientsClaim: true,
  cleanupOutdatedCaches: true
};

然后就可以一键生成 ServiceWorker 了：

workbox generateSW

最后在 index.html 里注册一下即可：

<head>
  <link rel="manifest" href="index.webmanifest" />
  <!-- 老浏览器私有 meta 标签兼容 -->
  <script src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.15/pwacompat.min.js"></script>
  <script>
    navigator.serviceWorker?.register('sw.js');
  </script>
</head>

工具链兼容性

Parcel

0 配置、一键化的 Parcel 原生支持 Web Manifest，不像 webpack 和 Rollup，还需要配置插件，只需将 package.json 中的构建脚本修改如下：

{
  "scripts": {
    "start": "workbox generateSW  &&  parcel source/index.html --open",
    "pack": "parcel build source/index.html --public-url .",
    "build": "rm -rf dist/  &&  npm run pack-dist  &&  workbox generateSW"
  }
}

每次构建运行 npm run build 即可生成可缓存整个 Web App 的 Service Worker 代码。

webpack

因为我不是 _webpack 配置工程师_，所以我查了好多技术博文才总结出一套最简单的 webpack PWA 配置：

npm install webpack-pwa-manifest workbox-webpack-plugin -D

安装好上述 webpack 插件才能开始配置，而且需要注意的是，webpack-pwa-manifest 这个第三方插件对 PWA Manifest 字段的支持不完整，如遇报错就删除相应字段。

// webpack.config.js
const { resolve } = require('path');

const PWA_Manifest = require('webpack-pwa-manifest'),
  Workbox = require('workbox-webpack-plugin');

const PWA_manifest = require('./src/manifest.json'),
  Workbox_config = require('./workbox.config');

for (const icon of PWA_manifest.icons) icon.src = resolve('src', icon.src);

module.exports = {
  plugins: [
    new PWA_Manifest(PWA_manifest),
    new WorkboxPlugin.GenerateSW(Workbox_config)
  ]
};

对比之后大家会发现，Parcel 这种面向资源的打包器自动根据各种语言的标准资源路径语法查找依赖项，用应用开发者“想当然”的思路搜集各种资源文件，既不需要遵守尚未成为标准的“约定”，也不需要研究复杂的“配置”，全凭“肌肉记忆”撸代码，轻快舒爽~

应用更新

PWA 核心技术 Service Worker 的强大之处在于，它运行在 HTTP 协议与 Web 页面之间，可拦截、缓存它所在 URL scope 下的所有 HTTP 请求。但 Service Worker 只会在它管理的所有页面都关闭后才会更新服务器端的新版本，若它缓存了 HTML 文件，用户刷新时拿到的依然是缓存的旧版本，HTML 引用的其它所有外置资源的 URL 也不会改变。

所以，我们需要一个安全又用户友好的更新逻辑，遂改 JS 入口模块如下：

import { serviceWorkerUpdate } from 'web-utility';

const { serviceWorker } = window.navigator;

serviceWorker
  ?.register('sw.js')
  .then(serviceWorkerUpdate)
  .then(worker => {
    if (window.confirm('检测到新版本，是否立即启用？'))
      // 触发 Workbox CLI 生成的 Service Worker 中监听的消息回调
      worker.postMessage({ type: 'SKIP_WAITING' });
  });

serviceWorker?.addEventListener('controllerchange', () =>
  window.location.reload()
);

好了，马上重新部署你的 Web 应用，在 Chrome、Opera、Edge、Firefox 上试试把它添加到桌面吧！

范例项目

1. WebCell 项目脚手架
2. WebCell 框架官网
3. 成都 Web 开发者大会官网

参考文档

• 《用 Workbox CLI 生成一个完整的 Service Worker》
• 《Service Worker 生命周期》
• 《谨慎处理 Service Worker 的更新》
• 《Service Worker 工作原理》

欢迎访问我的更多文章。

今天评注的文章题为《一批提升你工作效率的 JavaScript 工具方法》，文中的 60 个方法不够简洁、优雅，与最新 ECMAScript、DOM 标准有些差距，有些“复制粘贴老文章片段”的感觉。

接下来，我就按功能类别来对一些有必要优化的工具方法一一重构。

数据校验

完全基于正则表达式的检验规则其实可以不用封装成函数，全放在独立的模块中，导入后直接 /regexp/.test(data) 即可。

电邮地址

export const Email = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
// 原文：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/

「注解」

• \w 即为 [a-zA-Z0-9_]
• [] 表示一个字符范围，就是一个整体，无需 () 包围
• Gmail 等服务商还支持形如 name.filter@gmail.com 这样的用户别名邮箱
• (.[a-zA-Z0-9_-]{2,3}){1,2} 只适用于前些年常见的 .cn、.com.cn 一类根域名，近几年新增的 .name、.info、.club、.camp 等域名就失效了，形如 vip.xxmail.com 的多级域名也不适用

手机号码

其实以下只适用于中国大陆手机号，其它国家手机号似乎与固定电话号之间没有明显的区分。

export const Mobile = /^1[3-9]\d{9}$/;
// 原文：/^1[0-9]{10}$/

「注解」

• \d 即为 [0-9]
• 中国大陆手机号第二位目前没有 1、2

固话号码

中国大陆固定电话号码“区号 + 机号”始终为 11 位。

export const Phone = /^((0\d{2}-)?\d{8}|(0\d{3}-)?\d{7})$/;
// 原文：/^([0-9]{3,4}-)?[0-9]{7,8}$/

网址

export const URL = /^\w+:\/\/\S+$/;
// 原文：/^http[s]?:\/\/.*/

「注解」

• URL 协议不仅包括 http、https，还有 ftp（文件传输）、file（本机文件系统）、ed2k（电驴 2000）等各种各样的网络协议
• URL 主机名、路径可以是 Unicode 中各种可见字符，但遇到空白符就结束

日期格式

判断是否为合法的日期格式除了用正则之外，还可利用 Date 构造函数内部的算法：

export const isDate = raw => !isNaN(+new Date(raw))

对于无法解析为日期的数据，date.toString() 会返回“Invalid Date”，date.getTime() 对应的返回值则是 NaN。而算数运算符会调用对象的 valueOf() 方法，date.valueOf() 的返回值又与 date.getTime() 相同。

汉字

“汉字”在计算机领域的学名叫中日韩统一表意文字（俗称 CJK），在 2017 年 6 月发布的 Unicode 10 标准中，它有了代码级明确的指代：

export const HanZi = /\p{Unified_Ideograph}/u;

【详情参考】

最佳实践

• 学习：正则分析器 RegExr、Regex101
• 前端：HTML 5 表单校验 API
• 后端：基于装饰器的数据校验

数据转换

阿拉伯数字转中文

ECMA-402 标准（ECMAScript 国际化 API）把各语言之间的数据格式转换算法都封装好了，我们引入 polyfill 就可以直接用：

export const toChineseNumber = raw =>
    new Intl.NumberFormat('zh-Hans-u-nu-hanidec').format(raw)

数据类型

判断一个值的类型，用比较构造函数名或类名的方式兼容性比较差，因为线上环境通常是压缩后的代码，自定义的函数名、类名不再是原名，应用开发者一般也不会实现 Symbol.toStringTag getter 类成员，导致 Object.prototype.toString.call() 只会返回默认值 [object Object]。

JavaScript

综上，我们应该利用 JavaScript 原型继承，来统一判断“值的类型归属”：

export const isType = (value, constructor) =>
    Object(value) instanceof constructor;

「注解」

• Object 构造函数会返回所有基本值的包装对象

TypeScript

下面，我再给出一个 TypeScript 的实现，让类型推断更加准确：

export function isType(
    value: T, constructor: { new(...data: any[]): T }
): value is T {
    return Object(value) instanceof constructor;
}

import { isType } from './utility';

let test;

if (isType(test, Number)) console.log(test!.toFixed(2));

【在编辑器中体验 TS 类型提示】

浏览器检测

以下使用 globalThis 是为了兼容浏览器主线程、Web Worker、Node.js、Deno 等不同 JavaScript 运行时环境。

品牌

export const isBrowserVendor = (name, UA = globalThis.navigator?.userAgent || '') =>
    UA.toLowerCase().includes(name);

爬虫

export const isRobot = (UA = globalThis.navigator?.userAgent || '') =>
    /bot|spider|crawler/i.test(UA);

去除 HTML 标签

正则表达式

以下使用了 non-greedy（非贪婪模式）来提升性能，并规避正文中可能出现的示例代码没完全转译尖括号，导致删除错误。

export const removeHtmlTag = raw => raw.replace(/<[\s\S]+?>/g, '');

DOM API

下面再提供一种借助 DOM 引擎的实现：

const box = document.createElement('template');

export function removeHtmlTag(raw) {
    box.innerHTML = raw;

    return box.content.textContent;
}

URL 参数追加

URL()、URLSearchParams() 在浏览器主线程、Web Worker、Node.js 10+、Deno 均全局可用。

export function appendQuery(path, data, base = globalThis.location.href) {
    const URI = new URL(path, base);
    const { searchParams } = URI;

    for (const key in data) searchParams.append(key, data[key]);

    return URI + '';
}

W3C、ECMA 标准

还有一些可以用新标准（部分为提案）直接实现的特性，集中罗列如下：

• .trim()、.trimStart()、.trimEnd()（原文第 53 条）
• .includes()（原文第 42 条）
• Array.from()（原文第 48 条）
• 数组去重（原文第 44 条）
• 动态 import（原文第 27 条）
• element.classList（原文第 29 ~ 31 条）
• saveAs()（原文第 28 条）
• text-transform（原文第 54 条）

开源库

水歌把日常开发中积累的各种工具方法，用 TypeScript 写成一个 Web 开源工具库 —— https://web-cell.dev/web-utility/ ，欢迎大家使用、改进！~

欢迎访问我的更多文章。