设计模式-职责链模式

概念

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

演示

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

设计原则验证

  • 发起者于各个处理者进行隔离
  • 符合开放封闭原则
相关推荐
冰暮流星3 分钟前
javascript之date对象
开发语言·javascript·ecmascript
橘子星4 分钟前
别光看教程!手把手拆解 React Todo 项目,一文吃透 5 个核心概念
前端·javascript
蜡台18 分钟前
使用 uni-popup 实现数据选择器Data-Picker
前端·javascript·html·uniapp·uni-popup·data-picker
blns_yxl22 分钟前
Promise封装Fetch + 重试机制(HTML+JS)
前端·javascript·html
无巧不成书021832 分钟前
Vue+Vue-CLI全平台零基础搭建教程
前端·javascript·vue.js·vue·前端开发·vue-cli·前端环境搭建
寒水馨1 小时前
Windows下载、安装electron-v43.2.0(附安装包electron-v43.2.0-win32-x64.zip)
javascript·windows·typescript·electron·跨平台·桌面应用·chromium
用户938515635071 小时前
从零构建 React Todo 应用:组件化设计与数据流深度解析
前端·javascript
mONESY1 小时前
从 DeepSeek WebGPU 输入框,吃透 React+TS 四大核心开发实践
javascript·后端