「组件」设计一款Notice组件

前言

最近在使用Vue+TypeScript鼓捣自己的组件库，期间参考不少（抄:joy:） element ， iview 的源码。发现了一些常用的功能的背后，往往是复杂的实现。于是准备写一系列文章，介绍这些组件背后的原理。今天是第一篇，手把手带你实现Notice组件。

API设计

通常我们在使用iview或者element的Notice组件的时候，都是通过调用挂载到Vue原型链上的方法的形式。如下图所示。

我们的组件的调用方式，也参考类似的设计, 不同的是我们新添加了一个API setLen 。代码如下

这是因为楼主曾经接过一个需求，在做公司一款toC的时候，产品不希望屏幕上出现太多的通知框，而是希望一次最多只出现3个。所有楼主在设计组件的时候，将这个定制化的需求也添加了上去。

因为我们需要实现，屏幕上只显示指定数量的Notice通知框，所以我们使用两个数组，保存Notice的实例。queue队列用来存储全部的Notice实例，showQueue用来屏幕上显示的Notice实例。

$Notice，方法用来想queue添加了一个Notice的实例; processQueue方法则用来处理queue队列; remove方法删除特定的Notice; clear方法则用来清除全部的Notice。setLen用来设定同屏显示Notice的数量。len属性则是同屏的最大数量。

模版设计

模版设计没啥好说的，常规布局。其中Icon组件，是我之前写的图标组件。showClose，控制是否显示Icon图标。visible控制Notice的显隐。

方法设计

$Notice

使用 Vue.extend 方法构建NoticeConstructor，NoticeConstructor是Vue的子类。NoticeConstructor的实例，可以使用$mount方法生成DOM，然后手动或者指定$mount的参数，将DOM渲染到页面之中。

在$Notice方法的内部，使用uuid, 生成一个唯一id，这个唯一的标记，将会帮助我们查找队列中指定的notice对象。紧接着我们会对onClose方法进行一层包装。**onClose将会在每次关闭notice的时候调用，onClose在内部调用$Notice.remove方法，$Notice.remove方法会将指定的id所对应的notice对象移除出队列**。

接着我们将创建notice的实例，并将其push到queue队列中，接着调用$Notice.processQueue方法处理queue队列。

关于uuid这个方法，uuid这个方法生成的并不是真的唯一id，而是一个重复概率很低的id。重复概率大概是1ms内，1亿多分之1吧。这个是我在stackoverflow上找的方法，代码如下。

$Notice.processQueue

在processQueue方法中，我们首先判断showQueue队列是不是 满 的。如果不是，我们将会从queue队列的头部截取一个notice对象。使用$mount方法，生成DOM并append到body中。

因为notice在页面上的样式，是自上而下的，所以我们将会计算notice的相对顶部的偏移量，每一个notice对象的自身高度和15px的间距。

同时，我们会将notice的visible属性设置为true，这会触发我们的transition动画，并将这个notice对象push到showQueue队列中。

生命周期 mounted

接着我们将目光转移到Notice组件内部，我们将notice，append到DOM中后。我们会在mounted函数中起一个定时器，定时器将会等待指定的duration毫秒，duration是我们指定notice存在的时间，如果duration为0，notice将会永远存在。

duration毫秒之后，将会执行notice组件内部的close方法。

close

在close方法中，我们会为当前组件添加 transitionend ，事件。这个事件将会在css动画（ 离场动画 ）结束后触发。我们将visible设置为false这会触发，组件的离场动画。接着我们调用onClose方法，这会处理我们的队列。

$Notice.remove

之前我们对onClose进行了一层包装，调用onClose方法，会调用我们的$Notice.remove方法。

在$Notice.remove方法中，我们将会通过id找到需要移除的notice对象，将其移除出showQueue队列，接着循环剩下的showQueue队列，将它们style.top向上移动。最后我们继续调用$Notice.processQueue方法，从queue队列中，拉取新的notice对象，push到showQueue队列中。

destroy

当离场动画执行完毕后，transitionend回调会调用destroy方法。

destroy将会主动卸载我们的组件，并从DOM中移除我们的元素。notice对象的生命周期至此结束。

$Notice.clear & $Notice.setLen

clear和setLen相对而言比较简单，这里就不再赘述了。

后续

1. 「组件」设计一款Input组件
2. 「组件」设计一款Grid组件
3. 「组件」设计一款Button组件
4. 「组件」设计一款Collapse组件
5. 「组件」设计一款Icon组件
6. 「组件」设计一款Select组件
7. 「组件」设计一款Autocomplete组件

.....

本系列的文章，尽量做到短小精悍。Select，Table，DatePicker组件将会难点。

明天可能会更新一篇React Hook的学习文章。因为报名了周末晚上的公开课介绍Hook的原理。下周想重新阅读下preact的源码，学习学习preact中hook的实现原理。

参考

• iview源码
• element源码