设计模式-职责链模式

概念

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

演示

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的链式操作.

设计原则验证

  • 发起者于各个处理者进行隔离
  • 符合开放封闭原则
相关推荐
yuezhilangniao3 小时前
AI智能体全栈开发工程化规范 备忘 ~ fastAPI+Next.js
javascript·人工智能·fastapi
铅笔侠_小龙虾4 小时前
Flutter Demo
开发语言·javascript·flutter
2501_944525544 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter
wangdaoyin20104 小时前
若依vue2前后端分离集成flowable
开发语言·前端·javascript
天天进步20155 小时前
AI Agent 与流式处理:Motia 在生成式 AI 时代的后端范式
javascript
心柠5 小时前
vue3相关知识总结
前端·javascript·vue.js
常年游走在bug的边缘6 小时前
掌握JavaScript作用域:从函数作用域到块级作用域的演进与实践
开发语言·前端·javascript
极致♀雨6 小时前
vue2+elementUI table表格勾选行冻结/置顶
前端·javascript·vue.js·elementui
林shir6 小时前
3-15-前端Web实战(Vue工程化+ElementPlus)
前端·javascript·vue.js
换日线°8 小时前
前端炫酷展开效果
前端·javascript·vue