JS设计模式之责任链模式

什么是“责任链模式”？

责任链模式定义：为请求创建了一个接收者对象的链。多个对象均有机会处理请求，从而解除发送者和接受者之间的耦合关系。这些对象连接成为“链式结构”，每个节点转发请求，直到有对象处理请求为止。

核心思想：请求者不必知道是谁哪个节点对象处理的请求。如果当前不符合终止条件，那么把请求转发给下一个节点处理。

主要解决：职责链上的处理者负责处理请求，客户只需要将请求发送到职责链上即可，无须关心请求的处理细节和请求的传递，所以职责链将请求的发送者和请求的处理者解耦了。

特点：而当需求具有“传递”的性质时（代码中其中一种体现就是：多个if、else if、else if、else嵌套），就可以考虑将每个分支拆分成一个节点对象，拼接成为责任链。

如何解决：拦截的类都实现统一接口。

# 优点与缺点

优点：

• 可以根据需求变动，任意向责任链中添加 / 删除节点对象
• 没有固定的“开始节点”，可以从任意节点开始

缺点：责任链最大的代价就是每个节点带来的多余消耗。当责任链过长，很多节点只有传递的作用，而不是真正地处理逻辑。

# 代码实现

为了方便演示，模拟常见的“日志打印”场景。模拟了 3 种级别的日志输出：

• LogHandler: 普通日志
• WarnHandler：警告日志
• ErrorHandler：错误日志

首先我们会构造“责任链”：LogHandler -> WarnHandler -> ErrorHandler。LogHandler作为链的开始节点。

如果是普通日志，那么就由 LogHandler 处理，停止传播；如果是 Warn 级别的日志，那么 LogHandler 就会自动向下传递，WarnHandler 接收到并且处理，停止传播；Error 级别日志同理

   class Handler {
            constructor() {
                  this.handler = null;
            }
            // 将下一个需要处理的操作缓存起来
            setNextHandler(handler) {
                this.next = handler;
            }
        }

        class LogHandler extends Handler {
            constructor() {
                super();
                this.name = 'log';
            }

            handle(type, msg) {
                if (type == this.name) {
                    console.log(`${type} ---------- ${msg}`);
                    return;
                }
                // 假如下一个处理操作存在就继续往下处理，走到这里表示当前并非终点
                this.next && this.next.handle(...arguments);
            }
        }

        class WarnHandler extends Handler {
            constructor() {
                super();
                this.name = 'warn';
            }

            handle(type, msg) {
                if (type == this.name) {
                    //假如传过来的类型与名字相同， 说明是当前操作处理
                    console.log(`${type} ---------- ${msg}`);
                    return;
                }
                // 假如下一个处理操作存在就继续往下处理，走到这里表示当前并非终点
                this.next && this.next.handle(...arguments);
            }
        }

        class ErrorHandler extends Handler {
            constructor() {
                super();
                this.name = 'error';
            }

            handle(type, msg) {
                if (type == this.name) {
                    console.log(`${type} ---------- ${msg}`);
                    return;
                }
                // 假如下一个处理操作存在就继续往下处理，走到这里表示当前并非终点
                this.next && this.next.handle(...arguments);
            }
        }

        const logHandler = new LogHandler();
        const warnHandler = new WarnHandler();
        const errorHandler = new ErrorHandler();

        //设置下一个处理的节点
        logHandler.setNextHandler(warnHandler);
        warnHandler.setNextHandler(errorHandler);

        // 开始依次处理满足条件的日志
        logHandler.handle('log', 'this is some logs!'); // log ---------- this is some logs!
        logHandler.handle('warn', 'this is some warnings!'); // warn ---------- this is some warnings!
        logHandler.handle('error', 'this is some errors!'); // error ---------- this is some errors!