复杂的权限按钮控制优化

栏目: IOS · Android · 发布时间: 5年前

内容简介:原先的结构是不断的写if/else,然后通过先符合条件如何进行返回,代码难以理解,并且大量的权限重复判断。

原先的结构是不断的写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))
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

探索需求

探索需求

章柏幸、王媛媛、谢攀、杰拉尔德・温伯格、唐纳德・高斯 / 章柏幸、王媛媛、谢攀 / 清华大学出版社 / 2004-7-1 / 39.00元

本书将与您一起寻找"什么是客户真正想要的"这一问题的答案。 本书着眼于系统设计之前的需求过程,它是整个开发过程(如何设计人们想要的产品和系统)中最有挑战性的那部分。通过对一些需求分析中的常见误区和问题的分析和讨论,从和客户沟通开始,深入研究一些可能的需求,澄清用户和开发者期望值,最终给出了能够大幅度提高项目成功几率的一些建议方法。 本书由该领域内公认的两位作者合著,搜集了他们在大大小小......一起来看看 《探索需求》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具