设计模式-职责链模式

概念

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

演示

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

设计原则验证

  • 发起者于各个处理者进行隔离
  • 符合开放封闭原则
相关推荐
TimelessHaze25 分钟前
拆解字节面试题:async/await 到底是什么?底层实现 + 最佳实践全解析
前端·javascript·trae
bug爱好者1 小时前
Vue3 基于Element Plus 的el-input,封装一个数字输入框组件
前端·javascript
乔公子搬砖2 小时前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定
没烦恼3013 小时前
登录表单提交:按钮点击事件 vs form submit事件,该如何选择?
javascript
MasterNeverDown4 小时前
ASP.NET Core 中的构建者模式
设计模式·建造者模式
掘金安东尼5 小时前
Rspack 推出 Rslint:一个用 Go 编写的 TypeScript-First Linter
前端·javascript·github
蓝胖子的小叮当5 小时前
JavaScript基础(十四)字符串方法总结
前端·javascript
jiayi6 小时前
从 0 到 1 带你打造一个工业级 TypeScript 状态机
前端·设计模式·状态机
weixin_541299947 小时前
VSCode: 从插件安装到配置,如何实现 Ctrl+S 保存时,完全按照 .eslintrc.js 中的 ESLint 规则自动格式化代码
javascript·ide·vscode
yw00yw7 小时前
常见的设计模式
开发语言·javascript·设计模式