需求分析
消息的内容、显示时常是可自定义的
需要内置一些常用图标
基本实现
定义Message类,考虑到调用方式除了message.funcName之外还会有传递配置项的需求,将success、info等作为静态方法暴露

由于success、info等函数的接受参数以及内部实现几乎是一样的,故生命一个公共函数alert,并通过bind方式将不同的函数类型传入

消息的模板是固定的,只需要替换icon图标、content内容即可,故考虑将这一部分提取成单独组件layout并作为props接收这些可变值

alert函数如下

通过观察ant和element,我发现他们都是在消息调用时向body中动态添加了div,我这里通过辅助函数_getMsgBox函数做这件事

辅助函数_iconName则根据用户调用的不同方法名获取不同的图标类型和主题,这将传递给layout组件中的icon组件使用

创建timer遍历,它是setTimeout的返回值,将在message卸载时被调用
如果不传时常,则默认1s后消息弹窗被关闭
由于message将作为函数而非组件被使用,故考虑react-dom提供的render函数以加载layout组件,它的参数二是一个回调函数,相当于class组件的componentDidMount生命周期
在render回调中我们将执行对已弹出消息动画的创建与”回收”
辅助函数_calculateDistance用来计算当前要生成的消息弹窗应该在动画结束后停在哪个位置,而name属性则又会作为animate动画的函数名

辅助函数_createAnimate用来创建动画,其实就是动态向页面的head标签内添加一个style标签

在框红一的位置,将生成动态的animate动画

框红二的位置,则在动画结束后通知准备销毁
在动画执行结束后收到反馈时将调用react-dom提供unmountComponentAtNode方法对组件进行卸载,但是该方法只会卸载知道dom节点内的子节点,对于节点本事需要手动销毁,我这里定义了辅助函数_unmountMsgDiv

使用

