複雜的權限按鈕控制優化

前言

原先的結構是不斷的寫if/else，而後經過先符合條件如何進行返回，代碼難以理解，而且大量的權限重複判斷。

重構前代碼

重構思路

• 主要借鑑權限字典，進行配置型，而不是代碼中分別寫入賦值，任何須要的位置均可以重複使用，與當前解耦
• 引入優先級屬性，不用經過if/else的優先執行理解邏輯
• 區分用戶權限與業務狀態，對於複雜的業務狀態能夠另外解耦獨立出函數，與當前使用解耦
• 操做對應的外界函數也按照屬性進行配置，不定死
• 經過使用過濾，一次性進行全部的過濾操做，省略沒必要要的一次次布爾型邏輯與和邏輯或的判斷
• 解耦渲染組件函數，能夠根據菜單的數量以及業務需求，自定義如何渲染操做部分

思惟導圖圖解

重構後代碼示例

/* * 判斷是否能回放，權限判斷複雜的都定義爲函數，另外須要判斷的其餘外界條件建議封裝爲一個對象 */
const canPlay = (lessonState)=>{return profile[519] && lessonState === 5}

/* * 按鈕操做字典，顯示按鈕的順序按照下面的順序排列 */
const optDict=[{
name:'編輯課時',
key:1,
fn:editFn,
priv:profile[519]
},{
name:'錄播回訪',
key:2,
fn:playFn,
priv:canPlay()
},{
name:'順延課程',
key:4,
fn:delayFn,
priv:profile[533]
}]

/* * 權限判斷的過濾方法 */
const optDictFiltered = (optDict)=> return optDict.filter(opt => opt.priv)

const render = (optMenu)=>{
    let OPERATION = null;
    if(optMenu.length === 0){
        return OPERATION
    }
    if(optMenu.length === 1){
        let menu = optMenu[0]
        OPERATION = <button onClick={menu.fn}>{menu.name}</button>
        return OPERATION
    } else {
    let menu = optMenu[0];
    optMenu.unshift();
    let extraMenu = (
    <Menu> optMenu.map(item=><Menu.item key={item.key} >{item.name}</Menu.item) </Menu> ); OPERATION = <dropdownbutton onClick={menu.fn} overlay={extraMenu}> {menu.name}</dropdownbutton> } return OPERATION } //最終使用 render(optDictFiltered(optDict)) 複製代碼

原文語雀連接

www.yuque.com/robinson/fe…