废话不多说直接上代码【可以通过注释进行理解】
定义 发布者 类,并设置一个空数组,用来存放 订阅者
// 定义发布者类
class Subject {
// 构造器
constructor() {
// 定义订阅者接受的容器
this.observers = [];
}
}
然后明确该 发布者类中的方法
- 添加订阅者
- 删除订阅者
- 发布更新
通过数组的 push 方法向 数组 中添加 订阅者
// 添加订阅
addObserves(observes) {
// 向订阅者容器内添加订阅者消息
this.observers.push(observes);
}
通过数组的 indexOf 方法 找到 对应的 订阅者 对其采用 splice 方法进行删除操作
// 取消订阅
removeObserves(observes) {
// 使用 indexOf 方法找到容器中指定的订阅者的索引值
let index = this.observers.indexOf(observes);
// 如果找到了
if (index != -1) {
this.observers.splice(index, 1); //将该订阅者从数组中删除掉
}
}
通过 forEach 遍历出每一个 订阅者 并调用 实例对象上的 update 方法 来实现 发布更新
// 发布更新消息
notify() {
// 循环遍历订阅者数组 取出每一项 进行 消息更新的发布
// 因为数组中的每一项都是 observes 实例化对象 所以拥有 update subscribeTo 两个方法
this.observers.forEach((observe) => {
observe.update();
});
}
定义 订阅者 类,并定义 update 更新操作
class Observes {
//更新操作
update() {
console.log("subject消息更新了");
}
}
其中比较核心的点就是 订阅者 发起 订阅 这个操作
// 订阅者要订阅那个 发布类
subscribeTo(subject) {
// 这里的 this 指得是 observes 实例对象
// 调用 subject 实例对象的 addObervers 方法 将 observes 实例化对象传递过去
subject.addObserves(this);
}
最后来实现 下面的 三个动作
- 订阅者 订阅 发布者
- 订阅者 取消订阅
- 发布者 开始更新消息
// 创建发布者实例对象
let subject = new Subject();
// 创建订阅者实例对象
let oberver = new Observes();
oberver.subscribeTo(subject); //订阅者 订阅 发布者
subject.removeObserves(oberver); //订阅者 取消订阅
subject.notify(); //发布者开始 更新消息
完整的代码如下:
// 定义发布者类
class Subject {
// 构造器
constructor() {
// 定义订阅者接受的容器
this.observers = [];
}
// 添加订阅
addObserves(observes) {
// 向订阅者容器内添加订阅者消息
this.observers.push(observes);
}
// 取消订阅
removeObserves(observes) {
// 使用 indexOf 方法找到容器中指定的订阅者的索引值
let index = this.observers.indexOf(observes);
// 如果找到了
if (index != -1) {
this.observers.splice(index, 1); //将该订阅者从数组中删除掉
}
}
// 发布更新消息
notify() {
// 循环遍历订阅者数组 取出每一项 进行 消息更新的发布
// 因为数组中的每一项都是 observes 实例化对象 所以拥有 update subscribeTo 两个方法
this.observers.forEach((observe) => {
observe.update();
});
}
}
class Observes {
update() {
console.log("subject消息更新了");
}
// 订阅者要订阅那个 发布类
subscribeTo(subject) {
// 这里的 this 指得是 observes 实例对象
// 调用 subject 实例对象的 addObervers 方法 将 observes 实例化对象传递过去
subject.addObserves(this);
}
}
// 创建发布者实例对象
let subject = new Subject();
// 创建订阅者实例对象
let oberver = new Observes();
oberver.subscribeTo(subject); //订阅者 订阅 发布者
subject.removeObserves(oberver); //订阅者 取消订阅
subject.notify(); //发布者开始 更新消息