设计弹性

尽管剪贴板 API 在当前浏览器中得到良好支持，但我们仍可能期望少数使用旧版浏览器的用户使用我们的应用程序。

我们还应期望人们时不时遇到访问我们应用程序的问题。例如，间歇性网络连接或 CDN 可用性可能会阻止我们部分或全部 JavaScript 加载。

将对旧浏览器的支持视为不值得努力，或将网络问题视为刷新后自行解决的暂时故障，很容易让人放弃。但通常，以一种对这些类型的问题具有优雅弹性的方式构建功能非常容易。

这种弹性方法通常称为渐进增强，即提供 Web 界面，以便在 HTML 和 CSS 中实现基本功能，并在此基础体验之上逐步添加分层升级，使用 CSS 和 JavaScript，在浏览器支持其底层技术时逐步进行。

﹟ 逐步增强 PIN 字段

让我们看看如何逐步增强我们的 PIN 字段，以便在浏览器不支持的情况下复制按钮不可见。这样，我们可以避免向某人显示不起作用的按钮。

我们首先在 CSS 中隐藏复制按钮。然后，我们将在 Stimulus 控制器中对剪贴板 API 的功能测试支持。如果支持 API，我们将向控制器元素添加一个类名以显示按钮。

我们首先向具有 data-controller 属性的 div 元素添加 data-clipboard-supported-class="clipboard--supported"

  <div data-controller="clipboard" data-clipboard-supported-class="clipboard--supported">

然后向按钮元素添加 class="clipboard-button"

  <button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>

然后向 public/main.css 添加以下样式

.clipboard-button {
  display: none;
}

.clipboard--supported .clipboard-button {
  display: initial;
}

首先，我们将 data-clipboard-supported-class 属性作为静态类添加到控制器中

  static classes = [ "supported" ]

这将使我们能够控制 HTML 中的特定 CSS 类，因此我们的控制器将更容易适应不同的 CSS 方法。可以通过 this.supportedClass 访问像这样添加的特定类。

现在，向控制器添加一个 connect() 方法，该方法将测试剪贴板 API 是否受支持，并向控制器的元素添加一个类名

  connect() {
    if ("clipboard" in navigator) {
      this.element.classList.add(this.supportedClass);
    }
  }

您可以在控制器的类正文中的任何位置放置此方法。

如果您愿意，请禁用浏览器中的 JavaScript，重新加载页面，并注意“复制”按钮不再可见。

我们逐步增强了 PIN 字段：其“复制”按钮的基线状态被隐藏，仅在我们 JavaScript 检测到对剪贴板 API 的支持时才可见。

在本章中，我们对剪贴板控制器进行了轻微修改，使其能够抵御旧浏览器和网络状况恶化。

接下来，我们将了解 Stimulus 控制器如何管理状态。