精通React/Vue系列之实现一个全局提示(Message)组件

本文是笔者写组件设计的第十一篇文章, 今天带大家实现一个同样比较特殊的组件——全局提示(Message)组件。
我们看到的组件效果可能是这样的：

由于全局提示组件的设计原理和笔者上一篇写的精通React/Vue系列之手把手带你实现一个功能强大的通知提醒框(Notification)是类似的，区别主要是布局和配置参数，所以说细节和实现原理部分就不在这篇文章介绍了，本文主要介绍设计思路和设计的方法。

基础组件库主要按以下分类来划分：

• 通用型组件: 比如Button, Icon等.
• 布局型组件: 比如Grid, Layout布局等.
• 导航型组件: 比如面包屑Breadcrumb, 下拉菜单Dropdown, 菜单Menu等.
• 数据录入型组件: 比如form表单, Switch开关, Upload文件上传等.
• 数据展示型组件: 比如Avator头像, Table表格, List列表等.
• 反馈型组件: 比如Progress进度条, Drawer抽屉, Modal对话框等.
• 其他业务类型

熟悉以上分类法是设计任何组件系统的前提，不管你是从零到一开发前端团队的UI库，还是基于已有组件库二次开发业务组件，以上分类法则同样适用。

本文将会使用React来开发该组件，也会使用到Javascript中常用的一些设计模式，比如单例模式，但是不管你使用什么框架来实现，原理都是通用的，如果感兴趣的朋友可以用vue也实现以一下。如果对设计模式不是很了解，可以参考笔者之前写的文章。

在开始组件设计之前希望大家对css3和js有一定的基础,并了解基本的react/vue语法.我们先来解构一下Message组件, 一个Message分为以下几个部分:

每一个区块都可以自定义配置, 也可以组合其他组件.我们还可以配置全局提示出现在顶部的偏移量，类似于antd的组件一样。并且我们都知道，antd或者element这种组件库，会自带一些主题状态，来提高用户的使用效率，比如会有success(成功状态)，warning(警告状态)，error(错误状态)，info(通知状态)等，那么我们自己实现的全局提示(Message)组件也因该具备这些功能。

以下是笔者使用React实现后的Message组件效果:

接下来我们来看看通知提醒框(Message)的具体设计思路。

按照之前笔者总结的组件设计原则,我们第一步是要确认需求. 通知提醒框(Message)组件一般会有如下需求点:

• 能控制Message自动关闭的时间
• 能配置Message渲染节点的输出位置
• 能自定义关闭图标
• 可以手动选择全局提示类型
• 能自定义全局提示的偏移量
• 能设置全局提示的信息文本
• 能自定义全局提示的Icon
• 全局提示点击时提供回调函数
• 全局提示关闭时提供回调函数
• 能手动销毁通知框

需求收集好之后,作为一个有追求的程序员, 会得出如下线框图:

具体的设计细节可以参考我的上一篇Notification组件设计的文章。

组件的核心部分我们还是采用React Notification的模式。

首先按照笔者的代码风格，一般会考虑组件设计的框架，然后再一步步往里面填充内容和逻辑。通过这种渐进式的设计思路，能让我们逻辑更严谨，更清晰。具体代码如下：

import Notification from 'rc-notification'
import './index.less'

const xMessage = (function() {
  let message = null
  
  const pop = (config) => {
    const {
      type, className,
      duration = 4.5,
      getContainer = () => document.body,
      icon, key, content, onClose, onClick,
      top, closable = true, closeIcon
    } = config
    message.notice({
      content: 

 

     
   
 

   { content }
 
      
,
      key, closable, getContainer,
      onClose() {
 onClose && onClose()
      },
      onClick() {
 onClick && onClick()
      },
      closeIcon, duration, style: { top }
    })
  }

  
  const config = (config) => {}
  const remove = (key) => {}
  const destroy = () => {}

  if(message) {
    return {
      config, pop, remove, destroy
    }
  }
  // 如果为创建实例，则创建默认实例
  Notification.newInstance({}, (notice) => message = notice)

  return {
    config, pop, remove, destroy
  }
})()

export default xMessage

const config = (config) => {
  const { duration, getContainer, closeIcon } = config

  Notification.newInstance({
    getContainer: getContainer,
    duration: duration || 4.5,
    closeIcon
  }, (notice) => message = notice)
}

const pop = (config) => {
    const {
      type,
      className,
      duration = 4.5,
      getContainer = () => document.body,
      icon,
      key,
      content,
      onClose,
      onClick,
      top,
      closable = true,
      closeIcon
    } = config
    message.notice({
      content: 

 {
   (icon || ['info', 'success', 'error', 'warning'].indexOf(type) > -1) &&
   

     {
icon ? icon : 
     }
   
 }
 

   { content }
 
      
,
      key,
      closable,
      getContainer,
      onClose() {
 onClose && onClose()
      },
      onClick() {
 onClick && onClick()
      },
      closeIcon,
      duration,
      style: { top }
    })
  }

xNotification.pop({type: 'success', content: '你的请求被审批通过啦！'})

// antd
Notification.info({//...})

const remove = (key) => {
    message.removeNotice(key)
  }

const destroy = () => {
  message.destroy()
}

 const iconType = {
    success: 'FaRegCheckCircle',
    warning: 'FaRegMeh',
    info: 'FaRegLightbulb',
    error: 'FaRegTimesCircle'
 }

{
  (icon || ['info', 'success', 'error', 'warning'].indexOf(type) > -1) &&
  

    {
      icon ? icon : 
    }
  
}

 {
     message.pop({
  type: 'error',
  content: '趣谈前端学习打卡'
     })
 }
    }>错误信息通知(error)

import { message } from '@alex_xu/xui'

message.config({ duration: 6 })

npm i @alex_xu/xui

// 导入xui
import { 
  Button, Skeleton, Empty, Progress,
  Message, Tag, Switch, Drawer, Badge, alert
} from '@alex_xu/xui'

// .babelrc
"plugins": [
  ["import", { "libraryName": "@alex_xu/xui", "style": true }]
]