设计模式第1篇｜责任链模式

布满荆棘的人生 2024-04-17 10:28 53阅读 0赞

![6ff8f57de1e24ebca5884eaf3d43fbb0.png][]

--------------------

> ? 作者简介：[程序员小豪][Link 1]，全栈工程师，热爱编程，曾就职于**蔚来、腾讯**，现就职于某互联网大厂，技术栈：Vue、React、Python、Java  
> ? 本文收录于小豪的[前端][Link 2]系列专栏，后续还会更新**前端入门以及前端面试**的一些相关文章，手把手带你从零学习前端到面试找工作，并如果有想进入前端领域工作的同学，这个[前端][Link 2]专栏会对你有所帮助，欢迎关注起来呀  
> ? 本人也会持续的去关注`AIGC以及鸿蒙`的一些动向并总结到博客中，大家感兴趣的可以关注一下我的[人工智能][Link 3]专栏  
> ? [云原生][Link 4]的入门学习系列，大家有兴趣的可以看一看

#### 目录 ####

*  引言
 *   *  实现使用责任链模式的代码
 *  优点
 *  其他应用场景
 *  结语

## 引言 ##

hello，大家好，我是程序员小豪，本期博客我们来学习一下责任链模式，大家在工作中应该都遇到过这样一种场景：出差申请，通常出差申请的要求都是比较严格的，因为现在部门都在控制预算，小豪所在的公司呢，出差申请需要经过三层审批，先经过组长审批，组长审批通过再到总监审批，总监审批通过再到部门经理审批，这一整个审批环节只有有一环没有通过都不会走到下一个环节的审批，像这种需要顺序执行，后一个环节的执行需要依赖前一个环节的结果状态的场景就很适合使用责任链模式。

![525dc600b19c4768ab2f8b2851d8e198.png][] \# 实现 \#\# 不用责任链模式的代码 这是我在网上看到有的同学是这样实现上面的场景的，整个代码的if else嵌套过多过深，整个代码变得比较复杂，虽然这段代码只有3个if else，但是实际业务场景会更复杂，如果有新人进入团队熟悉这段代码，阅读起来难度会比较高，也很难维护，很难拓展

### 实现使用责任链模式的代码 ###

接下来我将使用责任链模式来实现这一场景

class Task {
        
      constructor(name, status, weight, next) {
        
        this.taskName = name;
        this.taskStatus = status;
        this.taskWeight = weight;
        this.nextTask = next;
      }
      setNext(next) {
        
        return (this.nextTask = next);
      }
      handle(weight) {
        
        // 0-审批不通过 1-审批通过
        this.taskStatus = this.taskWeight < weight ? 1 : 0;
        if (!this.taskStatus) {
        
          console.log(`${
          this.taskName}不通过`);
          return;
        }
        console.log(`${
          this.taskName}通过`);
        if(this.nextTask) {
        
            this.nextTask.handle(weight);
        } else {
        
            console.log('全部审批通过?');
        }
        
      }
    }
    
    const tasks = [
      {
         name: "组长审批", status: -1, weight: 1 },
      {
         name: "总监审批", status: -1, weight: 3 },
      {
         name: "部门经理审批", status: -1, weight: 5 },
    ];
    
    let taskHeader
    let taskHandle
    
    for(let i = 0; i < tasks.length; i++) {
        
        let task = tasks[i]
        if(i === 0) {
        
            taskHeader = new Task(task.name, task.status, task.weight, null)
            taskHandle = taskHeader
        } else {
        
            taskHandle = taskHandle.setNext(new Task(task.name, task.status, task.weight, null))
        }
    }
    
    taskHeader.handle(10)
    
    // 输出
    // 组长审批通过
    // 总监审批通过
    // 部门经理审批通过
    // 全部审批通过?

上面我实现了一个task类，这个task类是审批流程的每一个单元环节的抽象类，我们可以使用每一个环节的数据实例化一个task对象，其中task对象的nextTask属性是用来串联当前环节任务与下一个环节任务，他会被赋值为下一个环节的task实例化对象，taskWeight属性是权重，这里用权重的对比模拟领导审批时判断是否要给你的出差申请通过的判断。

下面的tasks数组是审批流程每一个环节的数据，我们遍历这个数组，将每一个环节都实例化为一个task对象，并且用nextTask属性串联当前环节和下一个环节

taskHeader是第一个环节task对象，最后taskHeader执行handle方法，并传入出差申请权重10，handle方法回去对比当前环节任务权重与出差申请的权重来判断是否审批通过，如果不通过将直接return不往下个环节流转，如果通过，判断是否还有下一个环节，有下一个环节就执行下一个环节的handle方法，没有下一个环节说明全部审批通过。

## 优点 ##

通过上面两份代码的对比，我们可以总结出责任链模式的优点  
● 降低耦合度。它将请求的发送者和接收者解耦  
● 遵守单一职责原则，每一个环节只需要关心自己的逻辑  
● 可拓展性、可维护性高

## 其他应用场景 ##

● express的中间件  
● 事件处理机制：在浏览器中，事件处理机制就是一个典型的责任链模式的应用。当事件发生时，它会从目标元素开始沿着 DOM 树向上传播，每个元素都有机会处理该事件。如果某个元素无法处理事件，它会将事件传递给它的父级元素，直到找到能够处理事件的元素或者事件冒泡至根元素。  
● 多重表单校验

## 结语 ##

各位看官老爷们好，小豪已经建立了技术交流群，如果你很感兴趣，可以私信我加入我的社群。

?社群中不定时会有很多活动，例如学习资料分享、大厂面经分享、技术讨论、行业大佬创业杂谈等等。

?本人目前是在互联网大厂正式工作，也有过多个大厂的工作经历，加入社群也会有简历修改辅导，模拟面试，手把手项目实战教学，大厂工作内推机会以及大厂面试题解析分享等福利。

?社群方向很多，相关领域有Web全栈（前后端）、人工智能、AIGC、自媒体变现、前沿科技文章分享、论文精读等等。

?不管你是多新手的小白，都欢迎你加入社群中讨论、聊天、分享，加速助力你成为下一个技术大佬！也随时欢迎您跟我沟通，一起交流，一起成长。变现、进步、技术、资料、项目、你想要的这里都会有

?网络的风口只会越来越大，风浪越大，鱼越贵！欢迎您加入社群~一个人可以或许可以走的很快，但一群人将走的更远！

?想都是问题，做都是答案！行动起来吧！欢迎评论区or后台与我沟通交流，也欢迎您扫描下方二维码直接加入到我的交流社群！(微信：adcoderhao)

[6ff8f57de1e24ebca5884eaf3d43fbb0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/60ab7c54905d44e682482efae9357953.png
[Link 1]: https://blog.csdn.net/A_D_H_E_R_E
[Link 2]: https://blog.csdn.net/a_d_h_e_r_e/category_12357719.html
[Link 3]: https://blog.csdn.net/a_d_h_e_r_e/category_12402347.html
[Link 4]: https://blog.csdn.net/a_d_h_e_r_e/category_12369482.html
[525dc600b19c4768ab2f8b2851d8e198.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/25a87927840744a686d555f9e99354d5.png