聊一聊Toast

[sliwey-zz]

在实际项目中，Toast经常是不可或缺的一部分，一些用户的操作反馈，或者异步请求的loading，都可以通过Toast来展现。但是不同的项目中，Toast的展现形式往往是不一样的，如果每个项目都从零开始写，就会造成开发资源的浪费，所以一个通用的Toast组件就显得尤为重要。那么怎么来设计这个通用的Toast呢？

明确需求

Toast的基本需求比较简单：不会获取焦点、不可点击、显示一定时间之后自动消失、不会对用户造成太多干扰。不同之处往往体现在展现形式上：

• 展现位置不同（顶部、中部、底部）
• 展现内容不同（纯文字、纯icon、icon + 文字）

为了便于扩展，满足展现内容的个性化需求，还需要支持自定义展现内容，这样，展现位置和展现内容经两两组合之后，基本涵盖了目前常见的Toast展现形式。

然后，考虑一个场景：「操作成功之后弹出Toast，等待2s之后关闭当前页面或跳到下一个页面」

// 假设以下Toast的展现时间均为2s

// 最简单的实现 
// v1.0
Toast.success('操作成功');
setTimeout(() => {
    page.close();
}, 2000)

// 上面的方法有点繁琐，可以利用Toast本身的计时器
// 只需让Toast接收一个回调函数就行
// v2.0
Toast.success('操作成功', () => {
    page.close();
});

// 既然用回调解决，那么可以更进一步
// 让Toast返回Promise，结合async/await，看起来更直观一点
await Toast.success('操作成功');
page.close();

最后，还有一个问题：「同一页面上应不应该出现一个以上的Toast？」

私以为是不应该的，因为Toast起到的作用是弱提示，不应该展示过多的信息，而且Toast显示的时间一般来说都比较短，所以当一个页面上出现多个Toast的时候，用户往往会来不及看全所有信息，这会对用户造成一定程度上的干扰。

所以结合前面所说，我们可以列出Toast应该满足的一些需求：

• 全局唯一，后面展示的会替换掉前面展示的，即只展示最新的Toast
• 展示位置可以配置，可提供三个关键字来分别对应顶部、中部、底部
• 展示内容可以为纯文字、纯icon、icon + 文字，还需要支持自定义内容
• Toast需要返回Promise
• 需要提供的api：.show()、.success()、.fail()、.loading()、.hide()、.config()

需求实现

明确了需求之后，实现就比较简单了，具体实现跟框架无关，只要满足上述条件就行。

我基于React实现了一个，在线预览地址：https://sliwey.github.io/toast/

代码可以看这里：https://github.com/sliwey/toast/blob/master/src/components/toast/index.js

效果如下：

自定义效果如下：

最后

其实Toast在开发过程中是一个很小的点，但也算是比较高频的组件。设计这类组件的时候需要尽可能多地考虑使用场景，提取出共通的部分，并且保留对个性化需求的开放性。

本文只是抛砖，欢迎大家分享一些组件化方面的思考哈😄～～