状态策略模式的优势分析

在项目中用策略模式优雅地处理权限控制这类问题,经常会遇到需要根据不同的状态或条件执行不同逻辑的场景。传统的 if-else 或 switch-case 语句虽然简单直接,但在复杂场景下就会导致代码臃肿、很难维护。我通过一个案例,描述怎样使用状态策略模式来优化这一类问题。

  1. 随着权限类型增加,条件判断也会越来越多
  2. 判断逻辑与执行逻辑高耦合,对应的逻辑分散在各处
  3. 代码可读性和可维护性差
scss 复制代码
function showPart1() {
    console.log(1);
}
function showPart2() {
    console.log(2);
}
function showPart3() { 
    console.log(3);
}
axios.get('xxx').then((res) => {
     if (res == 'boss') {
             showPart1();
             showPart2();
             showPart3();
     } else if(res == 'manner') {
            showPart1();
            showPart2();		 
     } else if(res == 'staff') {
            showPart3();
     }
}) 

在最初的代码实现中,通过 axios 请求获取用户身份后,使用了多层 if-else 判断来执行不同操作: 这里有3个方法,要展示我们的内容,然后我们去发起请求获取当前的一个权限,目前比如我们有3个角色,如果以后有4个,5个或者更多呢,那这个判断就会非常的多。 往下看用状态策略模式实现的方式:

scss 复制代码
function showControl() {
    this.status = '';
    this.power = {
      boss:function() {
            showPart1();
            showPart2();
            showPart3();		  
      },
      manner:function() {
            showPart1();
            showPart2();
      },
      staff:function() {
            showPart3();
      }
    }
 }
showControl.prototype.show = function() {
	 var self = this;
	 axios.get('xxx').then((res) => {
		 self.status = res;
		 self.power[ self.status ]();
	 })
 }
 new showControl().show();

showControl 方法里面要有一个状态,在一个就是策略对象,也就是不同的角色对应着不同的展示方式,最后就是把状态展示出来这一步骤了,show 的方法里面去请求当前的一个权限,改变当前的状态,在根据当前的一个状态从策略对象里拿出对应的策略去展示就好了,这样就完成了当前用户职责不同权限不同展示自己的操作和行为了。对比之前的代码 if-else 分支少了,代码的阅读性也更加优雅了很多,扩展性就很好,更多角色只需要扩展power里这个对象就可以了,这也是状态策略模式带来的一个优化。

相关推荐
sm_926787053 小时前
RFID 标签打印的技术实现要点与二次开发实践
java·大数据·前端·c++·编辑器
IMPYLH3 小时前
HTML 的 <video> 元素
前端·html
溪语流沙3 小时前
【每天一个CSS | Day19】流光文字与一笔写成的手写签名
前端·javascript·css
逐光者9334 小时前
STM32——SPI 屏 · Flash · 高速
java·前端·stm32
To_OC4 小时前
同样是让 AI 写全栈,为什么别人一句话就够了
前端·前端框架·next.js
CDwenhuohuo4 小时前
electron pc项目打包成桌面端
前端·javascript·electron
前端大斗师4 小时前
「大于 1000」把 1000 元那单也算进去了:我在 Vue3 订单页对了 10 句话
前端·人工智能·typescript·大模型·原力计划
Jmyd01235 小时前
用 Web VR 引擎搭建 3D 虚拟展厅:从素材上云到多端实时渲染的完整数据链路
前端·3d·vr·三维数字化
刘天远5 小时前
Agent成本核算实现:事件表、状态分布与Python归集
前端·数据库·人工智能·python
欣欣之王来了5 小时前
开发环境准备:Node.js、npm、VS Code安装配置
前端·学习·架构·项目·vue3教程