需求收集好之后,作為一個(gè)有追求的程序員, 會(huì)得出如下線框圖：

對(duì)于react選手來說,如果沒用typescript,建議大家都用PropTypes, 它是react內(nèi)置的類型檢測工具,我們可以直接在項(xiàng)目中導(dǎo)入. vue有自帶的屬性檢測方式,這里就不一一介紹了。

首先我們先根據(jù)需求將組件框架寫好,這樣后面寫業(yè)務(wù)邏輯會(huì)更清晰：

import PropTypes from "prop-types"import "./index.less"/** * Modal Modal組件 * @param {afterClose} func Modal完全關(guān)閉后的回調(diào) * @param {bodyStyle} object Modal body的樣式 * @param {cancelText} string|ReactNode 取消按鈕文字 * @param {centered} bool 居中展示Modal * @param {closable} bool 是否展示右上角的關(guān)閉按鈕 * @param {closeIcon} ReactNode 自定義關(guān)閉圖標(biāo) * @param {destroyOnClose} bool 關(guān)閉時(shí)銷毀Modal里的子元素 * @param {footer} null|ReactNode 底部內(nèi)容，當(dāng)不需要底部默認(rèn)按鈕時(shí)，可以設(shè)置為footer={null} * @param {keyboard} bool 是否支持鍵盤的esc鍵退出 * @param {mask} bool 是否展示遮罩 * @param {maskclosable} bool 點(diǎn)擊蒙層是否允許關(guān)閉 * @param {maskStyle} object 遮罩樣式 * @param {okText} string|ReactNode 確認(rèn)按鈕的文本 * @param {title} string|ReactNode 標(biāo)題內(nèi)容 * @param {visible} bool Modal是否可見 * @param {width} string Modal寬度 * @param {onCancel} func 點(diǎn)擊遮罩或者取消按鈕，或者鍵盤esc按鍵時(shí)的回調(diào) * @param {onOk} func 點(diǎn)擊確定的回調(diào) */function Modal(props) {  const {    afterClose,    bodyStyle,    cancelText,    centered,    closable,    closeIcon,    destroyOnClose,    footer,    keyboard,    mask,    maskclosable,    maskStyle,    okText,    title,    visible,    width,    onCancel,    onOk  } = props  return 
    
      
      
      
      
      
      
    
    
  
}export default Modal

有了這個(gè)框架,我們來一步步往里面實(shí)現(xiàn)內(nèi)容吧。

基礎(chǔ)配置功能往往和業(yè)務(wù)邏輯無關(guān)， 僅僅用來控制元素的顯示隱藏等，由于其非常容易實(shí)現(xiàn)，所以我們先來實(shí)現(xiàn)以下這些屬性的功能：

這幾個(gè)功能在框架搭建好之后已經(jīng)部分實(shí)現(xiàn)了,是因?yàn)樗麄兌急容^簡單,不會(huì)牽扯到其他復(fù)雜邏輯。只需要對(duì)外暴露屬性并使用屬性即可。具體實(shí)現(xiàn)如下：

// ...function Modal(props) {  // ...  return 
    
      
        
          { title }        
      
      {        closable &&                  { closeIcon ||  }              }      
        { children }      
      {        footer === null ? null :          
            {              footer ? footer :                
                  { cancelText }                  { okText }                
            }          
      }    
    {      mask && 
    }  
}

通過以上實(shí)現(xiàn)，我們很容易控制一個(gè)modal組件具體顯示那些元素，以及那些元素是可關(guān)閉modal的，具體案例如下：

熟悉antd或者element的朋友都知道，visible用來控制modal的顯示和隱藏，我們這里也來實(shí)現(xiàn)同樣的功能，關(guān)于隱藏和顯示的動(dòng)畫，我們這里用transform：scale來實(shí)現(xiàn)。先來看看實(shí)現(xiàn)效果吧：

這里筆者使用了react hooks的useState這個(gè)API，來設(shè)置彈窗可見性的state，modal默認(rèn)不可見。具體邏輯如下：

let [isHidden, setHidden] = useState(!props.visible)const handleClose = () => {    setHidden(false)}

html結(jié)構(gòu)如下：

由以上代碼我們知道模態(tài)框的顯示隱藏是通過設(shè)置display：none/block來控制的，但是我們都知道display：none是不能執(zhí)行動(dòng)畫效果的，為了實(shí)現(xiàn)內(nèi)容彈窗的動(dòng)畫，我們這里采用了@keyframe動(dòng)畫，對(duì)于低版本瀏覽器也采用了很好的向下兼容。具體css代碼如下：

@keyframes xSpread {    0% {        opacity: 0;        transform: scale(0);    }    100% {        opacity: 1;        transform: scale(1);    }}

centered屬性的作用就是來控制彈窗內(nèi)容距離整個(gè)遮罩或者可視區(qū)域的位置的，值為true則居與遮罩或者可視區(qū)域的正中心。因?yàn)槲覀兡J(rèn)設(shè)置的modal內(nèi)容區(qū)域的位置是左右居中，頂部距離可視區(qū)域頂部100px，所以這里我們實(shí)現(xiàn)如下：

&.xCentered {    top: 50%;    transform: translateY(-50%);}

這個(gè)實(shí)現(xiàn)也非常簡單，就是通過屬性centered來動(dòng)態(tài)的設(shè)置類名即可。

這個(gè)功能意思是在彈窗關(guān)閉時(shí)是否清除子元素，我在：《精通react/vue組件設(shè)計(jì)》之配合React Portals實(shí)現(xiàn)一個(gè)功能強(qiáng)大的抽屜(Drawer)組件這篇文章中有詳細(xì)的介紹，大家感興趣可以研究以下，這里我指介紹實(shí)現(xiàn)過程。當(dāng)destroyOnClose為true時(shí)，我們銷毀子元素即可，通過維護(hù)一個(gè)state來實(shí)現(xiàn)組件的重新渲染。要想實(shí)現(xiàn)該功能，我們需要處理如下幾個(gè)事件：

// 關(guān)閉事件(關(guān)閉和確認(rèn)事件邏輯基本一致，這里就不單獨(dú)寫了)const handleClose = () => {    setHidden(true)    if(destroyOnClose) {      setDestroyChild(true)    }    document.body.style.overflow = "auto"    onCancel && onCancel()}// visivle/destroyOnClose更新時(shí)，重新渲染子組件useEffect(() => {    if(visible) {      if(destroyOnClose) {        setDestroyChild(true)      }    }  }, [visible, destroyOnClose])

這樣我們就實(shí)現(xiàn)了彈窗關(guān)閉時(shí)銷毀組件的功能。

為了更好的用戶體檢，筆者的Modal組件支持鍵盤事件，我們都知道鍵盤的ESC對(duì)應(yīng)的事件碼為27，那么我們就能根據(jù)這個(gè)原理來實(shí)現(xiàn)鍵盤按鍵ESC時(shí)關(guān)閉模態(tài)框：

useEffect(() => {    document.onkeydown = function (event) {      let e = event || window.event || arguments.callee.caller.arguments[0]      if (e && e.keyCode === 27) {        handleClose()      }    }  }, [])

因?yàn)槭录O(jiān)聽只需要執(zhí)行一次，所以u(píng)seEffect的依賴設(shè)置為空數(shù)組即可。雖然這樣已經(jīng)基本實(shí)現(xiàn)了鍵盤關(guān)閉的功能，但是這樣的代碼明顯不夠優(yōu)雅，所以我們來完善以下，我們可以將鍵盤關(guān)閉的方法抽離出來，然后在useEffect的第一個(gè)回調(diào)函數(shù)中返回另一個(gè)函數(shù)（該函數(shù)里是組件卸載前的鉤子），當(dāng)組件卸載時(shí)我們將事件監(jiān)聽移除，這樣可以提高一些性能，對(duì)內(nèi)存優(yōu)化也有幫助：

const closeModal = function (event) {    let e = event || window.event || arguments.callee.caller.arguments[0]    if (e && e.keyCode === 27) {      handleClose()    }  } useEffect(() => {    document.addEventListener("keydown", closeModal, false)    return () => {      document.removeEventListener("keydown", closeModal, false)    }  }, [])

通過這種方式，代碼和功能實(shí)現(xiàn)上是不是會(huì)更優(yōu)雅呢？

afterClose的作用主要是在模態(tài)框關(guān)閉之后執(zhí)行某個(gè)回調(diào)函數(shù)。我們使用class組件很好實(shí)現(xiàn)這個(gè)功能，因?yàn)閟etState可以傳兩個(gè)參數(shù)，一個(gè)是更新state的回調(diào)，另一個(gè)是state更新之后的回調(diào)，我們只需要把a(bǔ)fterClose放到更新后的回調(diào)即可，也就是第二個(gè)參數(shù)回調(diào)里。但是我們modal組件目前是用react hooks和函數(shù)式組件寫的，那么怎么實(shí)現(xiàn)狀態(tài)更新后的回調(diào)呢？筆者這里提供一個(gè)實(shí)現(xiàn)思路，利用閉包來實(shí)現(xiàn),核心代碼如下：

// 函數(shù)組件外部let hiddenCount = 0;//  函數(shù)組件內(nèi)部useEffect(() => {    if(isHidden && hiddenCount) {      hiddenCount = 0      afterClose && afterClose()    }    hiddenCount = 1  }, [isHidden])

我們知道useEffect不僅僅可以實(shí)現(xiàn)監(jiān)聽掛載組件的鉤子，也同樣能監(jiān)聽state更新，我們利用這一點(diǎn)來實(shí)現(xiàn)該功能，值得注意的是我們要在執(zhí)行afterClose前重置hiddenCount，避免其他使用modal組件的函數(shù)的影響。

import PropTypes from "prop-types"http:// ...Modal.propTypes = {  afterClose: PropTypes.func,  bodyStyle: PropTypes.object,  cancelText: PropTypes.oneOfType([    PropTypes.string,    PropTypes.element  ]),  centered: PropTypes.bool,  closable: PropTypes.bool,  closeIcon: PropTypes.element,  destroyOnClose: PropTypes.bool,  footer: PropTypes.oneOfType([    PropTypes.element,    PropTypes.object  ]),  keyboard: PropTypes.bool,  mask: PropTypes.bool,  maskclosable: PropTypes.bool,  maskStyle: PropTypes.object,  okText: PropTypes.oneOfType([    PropTypes.string,    PropTypes.element  ]),  title: PropTypes.oneOfType([    PropTypes.string,    PropTypes.element  ]),  visible: PropTypes.bool,  width: PropTypes.string,  onCancel: PropTypes.func,  onOk: PropTypes.func}

關(guān)于prop-types的使用官網(wǎng)上有很詳細(xì)的案例,這里說一點(diǎn)就是oneOfType的用法, 它用來支持一個(gè)組件可能是多種類型中的一個(gè)。組件完整css代碼如下：

.xModalWrap {    position: fixed;    z-index: 999;    top: 0;    left: 0;    width: 100%;    bottom: 0;    overflow: hidden;    .xModalContent {        position: relative;        z-index: 1000;        margin-left: auto;        margin-right: auto;        position: relative;        top: 100px;        background-color: #fff;        background-clip: padding-box;        border-radius: 4px;        -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);        pointer-events: auto;        animation: xSpread .3s;        &.xCentered {            top: 50%;            transform: translateY(-50%);        }        .xModalHeader {            padding: 16px 24px;            color: rgba(0, 0, 0, 0.65);            background: #fff;            border-bottom: 1px solid #e8e8e8;            border-radius: 4px 4px 0 0;            .xModalTitle {                margin: 0;                color: rgba(0, 0, 0, 0.85);                font-weight: 500;                font-size: 16px;                line-height: 22px;                word-wrap: break-word;            }        }        .xModalCloseBtn {            position: absolute;            top: 0;            right: 0;            z-index: 10;            padding: 0;            width: 56px;            height: 56px;            color: rgba(0, 0, 0, 0.45);            font-size: 16px;            line-height: 56px;            text-align: center;            text-decoration: none;            background: transparent;            border: 0;            outline: 0;            cursor: pointer;        }        .xModalBody {            padding: 16px 24px;        }        .xModalFooter {            padding: 10px 16px;            text-align: right;            background: transparent;            border-top: 1px solid #e8e8e8;            border-radius: 0 0 4px 4px;            .xFooterBtn {                .xFooterBtnCancel, .xFooterBtnOk {                    margin-left: 6px;                    margin-right: 6px;                }            }        }    }    .xModalMask {        position: fixed;        z-index: 999;        top: 0;        left: 0;        width: 100%;        height: 100%;        overflow: hidden;        background-color: rgba(0,0,0, .5);    }}@keyframes xSpread {    0% {        opacity: 0;        // 之所以要再加translateY(-50%)，是為了防止動(dòng)畫抖動(dòng)        transform: translateY(-50%) scale(0);    }    100% {        opacity: 1;        transform: translateY(-50%) scale(1);    }}

通過以上步驟, 一個(gè)健壯的的Modal組件就完成了.Modal組件算是組件庫中中等復(fù)雜的組件，如果不懂的可以在評(píng)論區(qū)提問,筆者看到后會(huì)第一時(shí)間解答。

我們可以通過如下方式使用它:

    
我是彈窗內(nèi)容
    
我是彈窗內(nèi)容
    
我是彈窗內(nèi)容
    
我是彈窗內(nèi)容

筆者已經(jīng)將實(shí)現(xiàn)過的組件發(fā)布到npm上了,大家如果感興趣可以直接用npm安裝后使用,方式如下:

npm i @alex_xu/xui// 導(dǎo)入xuiimport {  Button,  Skeleton,  Empty,  Progress,  Tag,  Switch,  Drawer,  Badge,  Alert} from "@alex_xu/xui"

該組件庫支持按需導(dǎo)入,我們只需要在項(xiàng)目里配置babel-plugin-import即可,具體配置如下：

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

npm庫截圖如下：

后續(xù)筆者將會(huì)繼續(xù)實(shí)現(xiàn)

等組件, 來復(fù)盤筆者多年的組件化之旅。

關(guān)鍵詞：