前端实习分享第二弹(责任链模式)

责任链模式

  责任链模式是一种行为设计模式,它允许你将请求沿着处理者链进行传递。每个处理者都有机会处理请求,或者将其传递给链上的下一个处理者。

   比如,体检。其实责任链模式可以看作是一个体检流程,每一个体检项目(比如视力检查、血液检查、心电图等)都可以看作是一个处理者。每个处理者都会完成自己的任务(就是给你进行检验),然后将“请求”(也就是进行体检的人,你自己)传递给下一个处理者(也就是下一个体检项目)。这样,整个体检流程就像一条链一样,一环扣一环,直到所有的体检项目都完成为止。

  下面是一个简单的责任链模式的例子(简易的日志记录系统):

  1.首先我们在ts文件中定义接口和处理者

// ts
interface ILogger {
    setNext(logger: ILogger): ILogger;
    log(message: string, level: number): void;
}

// 实现接口
class Logger implements ILogger {
    private next: ILogger | null = null;

    constructor(private level: number) { }

    setNext(logger: ILogger): ILogger {
        this.next = logger;
        return logger;
    }

    log(message: string, level: number): void {
        // this.level是实例化时传的参数
        if (level <= this.level) {
            console.log(`Level ${this.level}: ${message}`);
        }
        if (this.next) {
            this.next.log(message, level);
        }
    }
}

  2.当我点击记录日志的按钮时,将我输入的日志信息发送给第一个处理者

<!-- html -->
<input id="messageInput" type="text" placeholder="输入日志消息">
<select id="levelSelect">
  <option value="1">信息</option>
  <option value="2">警告</option>
  <option value="3">错误</option>
</select>
<button id="logButton">记录日志</button>
// ts
const infoLogger = new Logger(1);
const warningLogger = new Logger(2);
const errorLogger = new Logger(3);

infoLogger.setNext(warningLogger).setNext(errorLogger);

document.getElementById('logButton')?.addEventListener('click', () => {
    const messageInput = document.getElementById('messageInput') as HTMLInputElement;
    const levelSelect = document.getElementById('levelSelect') as HTMLSelectElement;
    const message = messageInput.value;
    const level = parseInt(levelSelect.value);
    infoLogger.log(message, level);
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值