设计模式-职责链模式

概念

  • 一步操作可能分为多个职责角色来完成
  • 把这些角色都分开,然后用一个链串起来
  • 将发起者和各个处理者进行分离

演示

js 复制代码
// 请假审批,需要组长审批、经理审批、最后总监审批
class Action {
    constructor(name) {
        this.name = name
        this.nextAction = null
    }
    setNextAction(action) {
        this.nextAction = action
    }
    handle() {
        console.log(`${this.name} 审批`)
        if (this.nextAction != null) {
            this.nextAction.handle()
        }
    }
}

let a1 = new Action('组长')
let a2 = new Action('经理')
let a3 = new Action('总监')
a1.setNextAction(a2)
a2.setNextAction(a3)
a1.handle()

JS中的链式操作

  • 职责链模式和业务结合较多,JS中能联想到链式操作
  • jQuery的链式操作,Promise.then的链式操作.

设计原则验证

  • 发起者于各个处理者进行隔离
  • 符合开放封闭原则
相关推荐
fakerth11 分钟前
【OpenHarmony】设计模式模块详解
c++·单例模式·设计模式·openharmony
小福气_15 分钟前
自定义组件 vue3+elementPlus
前端·javascript·vue.js
程序员博博16 分钟前
这才是vibe coding正确的打开方式 - 手把手教你开发一个MCP服务
javascript·人工智能·后端
是谁眉眼31 分钟前
vue环境变量
前端·javascript·vue.js
鹏北海-RemHusband32 分钟前
Vue 组件解耦实践:用回调函数模式替代枚举类型传递
前端·javascript·vue.js
用户66006766853933 分钟前
斐波那契数列:从递归到缓存优化的极致拆解
前端·javascript·算法
NuLL33 分钟前
异步并行任务执行工具
javascript
海上彼尚36 分钟前
vite+vue3 ssg预渲染方案
前端·javascript·vue.js
NuLL40 分钟前
异步互斥锁
javascript
八荒启_交互动画1 小时前
【基础篇007】GeoGebra工具系列_多边形(Polygon)
前端·javascript