Stimulus:浏览器不支持复制或者弱网条件下，怎么办?

上一篇文章介绍了Stimulus：连接HTML和Javascript的桥梁，实现复制到粘贴板的按钮

尽管粘贴板API在当前主流浏览器中都有被很好支持的，但是还有一小部分的用户使用了旧的浏览器，我们也希望他们也可以正常使用我们的网页。

我们还应该预料到人们在访问我们的网页时偶尔会出问题。例如，在加载js时，可能会遇到间歇性的网络问题，或者CDN不可用导致加载失败。

我们来优化一下上一篇文章的复制按钮功能，当浏览器不支持时，隐藏这个复制按钮。这样就避免了显示了按钮但是没用这种情况。

我们先用写一个CSS来隐藏按钮。然后在controller中测试一下浏览器是否支持复制。如果浏览器支持的话，就给按钮添加一个class，使按钮显示出来。

我们找到包含data-controller属性的div，加上属性data-clipboard-supported-class=“clipboard—supported”：

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

然后给button添加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="clipboard--supported"，Stimulus会把supported当作class逻辑名，在controller中声明一下classes包含supported，就可以访问this.supportedClass得到"clipboard--supported"这个值。

static classes = [ "supported" ]

这个让我们可以控制HTML中的CSS类，我们的controller就变得可以更加适应各种不同CSS。添加的指定class可以通过this.supportedClass访问。

现在在controller中添加connect()方法，如果用户拥有权限修改粘贴板的话，给controller所连接的元素上增加一个class：

connect() {
    navigator.permissions.query({ name: "clipboard-write" }).then((result) => {
        if (result.state === "granted") {
            this.element.classList.add(this.supportedClass);
        }
    });
}

经过优化后，一开始复制按钮默认是隐藏的，当检测到用户可以使用复制功能，就会将按钮显示出来。

在本文中，我们对剪贴板controller进行了轻微的修改，使其能够应对旧的浏览器和弱网络环境。

Stimulus 状态管理，幻灯片显示