东莞品牌网站建设/陕西网络营销优化公司

前言

前面我们介绍完创建型模式和创建型模式，这篇介绍最后的行为型模式，也是【设计模式】专栏的最后一篇。

一、概述

行为型模式主要用于处理对象之间的交互和职责分配，以实现更灵活的行为和更好的协作。

二、常见的行为型模式

1、观察者模式（Observer Pattern）：

定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。

解释:可以把它想象成一个明星和粉丝的关系，明星（被观察对象）的一举一动（状态改变）都会被粉丝（观察者）关注到，当明星有新动态时，粉丝会收到消息。

代码示范以及解释

// 被观察对象类
class Subject {constructor() {this.observers = [];}// 添加观察者addObserver(observer) {this.observers.push(observer);}// 移除观察者removeObserver(observer) {const index = this.observers.indexOf(observer);if (index!== -1) {this.observers.splice(index, 1);}}// 通知所有观察者notify() {this.observers.forEach(observer => observer.update());}
}// 观察者类
class Observer {constructor(name) {this.name = name;}update() {console.log(`${this.name} has been notified.`);}
}// 使用示例
const subject = new Subject();
const observer1 = new Observer('Fan1');
const observer2 = new Observer('Fan2');subject.addObserver(observer1);
subject.addObserver(observer2);subject.notify(); 
// 输出:
// Fan1 has been notified.
// Fan2 has been notified.

被观察的对象Subject

构造函数 constructor：
初始化一个空数组 this.observers，用于存储所有注册的观察者。

addObserver 方法：
接收一个 observer 对象作为参数，将其添加到 this.observers 数组中。这就相当于有一个新的观察者开始关注这个被观察对象了。

removeObserver 方法：
接收一个 observer 对象作为参数，首先使用 indexOf 方法查找该观察者在 this.observers 数组中的索引。
如果索引不为 -1（说明该观察者存在于数组中），则使用 splice 方法将其从数组中移除，意味着这个观察者不再关注被观察对象了。

notify 方法：
遍历 this.observers 数组，对每个观察者调用其 update 方法。这样就可以通知所有注册的观察者，让它们执行相应的更新操作。

观察者Observer

构造函数 constructor：
接收一个 name 参数，用于标识这个观察者，将其存储在 this.name 中。

update 方法：
当被观察对象调用 notify 方法通知观察者时，这个 update 方法会被执行。它会打印出一条消息，表明该观察者已经收到了通知。

代码执行结果解释

首先创建一个 Subject 类的实例 subject，表示被观察对象。
接着创建两个 Observer 类的实例 observer1 和 observer2，分别命名为 'Fan1' 和 'Fan2'。
调用 subject.addObserver 方法将 observer1 和 observer2 添加到 subject 的观察者列表中。
最后调用 subject.notify() 方法，subject 会遍历其观察者列表，依次调用每个观察者的 update 方法，因此控制台会输出 'Fan1 has been notified.' 和 'Fan2 has been notified.'。

2、策略模式（Strategy Pattern）：

定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。策略模式让算法的变化独立于使用算法的客户。

解释：策略模式定义了一系列的算法，把它们一个个封装起来，并且使它们可相互替换。策略模式让算法的变化独立于使用算法的客户。这就好比你要去上班，有多种出行方式（策略）可供选择，如坐公交、打车、骑自行车等，你可以根据当天的实际情况（如时间、天气等）来动态地选择合适的出行方式，而上班这个行为本身不受具体出行方式的影响。

代码示范以及解释

// 定义不同的策略类
// 公交出行策略
class BusStrategy {travel() {console.log('Taking the bus to work.');}
}
//这是一个公交出行策略类，包含一个 travel 方法。
//当调用 travel 方法时，会在控制台打印出 Taking the bus to work.，表示选择乘坐公交去上班。// 打车出行策略
class TaxiStrategy {travel() {console.log('Taking a taxi to work.');}
}
//这是一个打车出行策略类，同样有一个 travel 方法。
//调用 travel 方法时，会在控制台打印出 Taking a taxi to work.，表示选择打车去上班。// 自行车出行策略
class BicycleStrategy {travel() {console.log('Riding a bicycle to work.');}
}
//这是一个自行车出行策略类，travel 方法会在控制台打印出 Riding a bicycle to work.，表示选择骑自行车去上班。// 环境类，负责使用策略
class Commute {constructor(strategy) {this.strategy = strategy;}setStrategy(strategy) {this.strategy = strategy;}goToWork() {this.strategy.travel();}
}
//构造函数 constructor：
//接收一个 strategy 参数，将传入的策略对象赋值给 this.strategy，表示初始化时使用该策略。
//setStrategy 方法：
//接收一个新的 strategy 参数，将 this.strategy 更新为新的策略对象，从而实现策略的动态切换。
//goToWork 方法：
//调用当前 this.strategy 对象的 travel 方法，执行具体的出行策略。// 使用示例
const busStrategy = new BusStrategy();
const commute = new Commute(busStrategy);
commute.goToWork(); // 输出: Taking the bus to work.const taxiStrategy = new TaxiStrategy();
commute.setStrategy(taxiStrategy);
commute.goToWork(); // 输出: Taking a taxi to work.

执行结果解释

首先创建一个 BusStrategy 类的实例 busStrategy，表示公交出行策略。
接着创建一个 Commute 类的实例 commute，并将 busStrategy 作为参数传入，意味着初始化时使用公交出行策略。
调用 commute.goToWork() 方法，会执行公交出行策略，控制台输出 Taking the bus to work.。
然后创建一个 TaxiStrategy 类的实例 taxiStrategy，表示打车出行策略。
调用 commute.setStrategy(taxiStrategy) 方法，将当前的出行策略切换为打车策略。
再次调用 commute.goToWork() 方法，会执行打车出行策略，控制台输出 Taking a taxi to work.。

3、发布-订阅模式（Publish - Subscribe Pattern）（重点！！）

发布 - 订阅模式和观察者模式类似，但它引入了一个中间者（消息代理），发布者（发布消息的对象）将消息发布到消息代理，订阅者（接收消息的对象）向消息代理订阅感兴趣的消息。这种模式实现了发布者和订阅者之间的解耦。

简单理解：就像一个报社和读者的关系，报社（发布者）负责发布报纸（消息），读者（订阅者）向报社订阅报纸，当有新报纸出版时，报社将报纸发送给订阅的读者。

代码示范以及解释

// 消息代理类
class EventEmitter {constructor() {this.events = {};}// 订阅事件on(eventName, callback) {if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);}// 发布事件emit(eventName, ...args) {if (this.events[eventName]) {this.events[eventName].forEach(callback => callback(...args));}}// 取消订阅事件off(eventName, callback) {if (this.events[eventName]) {const index = this.events[eventName].indexOf(callback);if (index!== -1) {this.events[eventName].splice(index, 1);}}}
}// 使用示例
const eventEmitter = new EventEmitter();// 订阅者的回调函数
const callback1 = (message) => {console.log(`Subscriber 1 received: ${message}`);
};const callback2 = (message) => {console.log(`Subscriber 2 received: ${message}`);
};// 订阅事件
eventEmitter.on('news', callback1);
eventEmitter.on('news', callback2);// 发布事件
eventEmitter.emit('news', 'A new article is published!'); 
// 输出:
// Subscriber 1 received: A new article is published!
// Subscriber 2 received: A new article is published!// 取消订阅
eventEmitter.off('news', callback1);
eventEmitter.emit('news', 'Another new article!'); 
// 输出:
// Subscriber 2 received: Another new article!

整体功能概述

EventEmitter 类充当消息代理，它允许用户订阅（on 方法）特定的事件，发布（emit 方法）事件，以及取消订阅（off 方法）事件。当事件被发布时，所有订阅该事件的回调函数都会被执行。

消息代理类 EventEmitter

构造函数 constructor：
初始化一个空对象 this.events，用于存储事件及其对应的回调函数数组。每个事件名作为对象的键，对应的值是一个数组，数组中存储着订阅该事件的所有回调函数。

on 方法：
接收两个参数：eventName 表示事件的名称，callback 是订阅该事件时要执行的回调函数。
首先检查 this.events 对象中是否已经存在该事件名。如果不存在，就为该事件名创建一个空数组。
然后将传入的 callback 函数添加到该事件对应的数组中。这意味着又有一个订阅者订阅了该事件。

emit 方法：
接收事件名 eventName 和任意数量的参数 ...args。
检查 this.events 对象中是否存在该事件名。如果存在，就遍历该事件对应的回调函数数组，依次调用每个回调函数，并将 ...args 作为参数传递给它们。这样就实现了事件的发布，通知所有订阅者执行相应的操作。

off 方法：
接收事件名 eventName 和要取消订阅的回调函数 callback。
检查 this.events 对象中是否存在该事件名。如果存在，使用 indexOf 方法查找该回调函数在事件对应的数组中的索引。
如果索引不为 -1（说明该回调函数存在于数组中），使用 splice 方法将其从数组中移除，从而实现取消订阅的功能。

执行结果解释

const eventEmitter = new EventEmitter();// 订阅者的回调函数
const callback1 = (message) => {console.log(`Subscriber 1 received: ${message}`);
};const callback2 = (message) => {console.log(`Subscriber 2 received: ${message}`);
};// 订阅事件
eventEmitter.on('news', callback1);
eventEmitter.on('news', callback2);// 发布事件
eventEmitter.emit('news', 'A new article is published!'); 
// 输出:
// Subscriber 1 received: A new article is published!
// Subscriber 2 received: A new article is published!// 取消订阅
eventEmitter.off('news', callback1);
eventEmitter.emit('news', 'Another new article!'); 
// 输出:
// Subscriber 2 received: Another new article!

创建一个 EventEmitter 类的实例 eventEmitter。
定义两个回调函数 callback1 和 callback2，分别表示两个订阅者在收到事件通知时要执行的操作。
调用 eventEmitter.on 方法，将 callback1 和 callback2 订阅到 'news' 事件上。
调用 eventEmitter.emit 方法发布 'news' 事件，并传递消息 'A new article is published!'。由于 callback1 和 callback2 都订阅了该事件，所以它们都会被执行，控制台会输出相应的消息。
调用 eventEmitter.off 方法取消 callback1 对 'news' 事件的订阅。
再次调用 eventEmitter.emit 方法发布 'news' 事件，并传递消息 'Another new article!'。此时只有 callback2 还订阅着该事件，所以只有 callback2 会被执行，控制台会输出相应的消息。