手仿antd–message消息

$bullet$ 需求分析

$approx$ 消息的内容、显示时常是可自定义的

$approx$ 需要内置一些常用图标

$bullet$ 基本实现

$star$ 定义Message类，考虑到调用方式除了message.funcName之外还会有传递配置项的需求，将success、info等作为静态方法暴露

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

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

$star$ alert函数如下

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

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

$ominus$ 创建timer遍历，它是setTimeout的返回值，将在message卸载时被调用

$ominus$ 如果不传时常，则默认1s后消息弹窗被关闭

$ominus$ 由于message将作为函数而非组件被使用，故考虑react-dom提供的render函数以加载layout组件，它的参数二是一个回调函数，相当于class组件的componentDidMount生命周期

$ominus$ 在render回调中我们将执行对已弹出消息动画的创建与”回收”

$cdot$ 辅助函数_calculateDistance用来计算当前要生成的消息弹窗应该在动画结束后停在哪个位置，而name属性则又会作为animate动画的函数名

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

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

框红二的位置，则在动画结束后通知准备销毁

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

$star$ 使用

Python修改Excel