内容简介:原先的结构是不断的写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)) 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Vue 指令实现按钮级别权限管理
- jfinal-admin 3.0 发布,权限控制精准到功能按钮
- 手把手教你搞定菜单权限设计,精确到按钮级别,建议收藏
- 按钮穿透点击实现方式
- 如何更好的控制按钮样式
- 通过按钮单击保存PhpSpreadSheet
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。