设计模式大冒险第一关：观察者模式

最近把之前学习过的这些设计模式又再次温习了一下，觉得还是有很多收获的。确实有了温故知新的感觉，所以准备在每个设计模式复习完之后都能够写一篇关于这个设计模式的文章，这样会让自己能够加深对这个设计模式的理解；也能够跟大家一起来探讨一下。

今天我们来一起学习一下观察者模式，刚开始我们不需要知道观察者模式的定义是什么，这些我们到后面再去了解。我想先带着大家从生活中的一个小事例开始。从生活中熟悉的事情入手，会让我们更快速的理解这个模式的用途。

生活中的小例子

相信大家都关注过一些公众号，那么对于一个公众号来说，如果有新的文章发布的话；那么所有关注这个公众号的用户都会收到更新的通知，如果一个用户没有关注或者关注后又取消了关注，那么这个用户就不会收到该公众号更新的通知。相信这个场景大家都很熟悉吧。那么如果我们把这个过程抽象出来，用代码来实现的话，你会怎么处理呢？不妨现在停下来思考一下。

通过上面的描述，我们知道这是一个一对多的关系。也就是一个公众号对应着许多关注这个公众号的用户。

那么对于这个公众号来说，它的内部需要有一个列表记录着关注这个公众号的用户，一旦公众号有了新的内容。那么对于公众号来说，它会遍历这个列表。然后给列表中的每一个用户发送一个内容跟新的通知。我们可以通过代码来表示这个过程：

// 用户
const user = {
   
	update() {
   
		console.log('公众号更新了新的内容');
	},
};

// 公众号
const officialAccount = {
   
    // 关注当前公众号的用户列表
	followList: [user],
    // 公众号更新时候调用的通知函数
	notify() {
   
		const len = this.followList.length;
		if (len > 0) {
   
		    // 通知已关注该公众号的每个用户，有内容更新
			for (let user of this.followList) {
   
				user.update();
			}
		}
	},
};

// 公众号有新内容更新
officialAccount.notify();

运行的结果如下：

公众号更新了新的内容

上面的代码能够简单的表示，当公众号的内容发生了更新的时候，去通知关注该公众号的用户的过程。但是这个实现是很简陋的，还缺少一些内容。我们接下来把这些缺少的过程补充完整。对于公众号来说，还需要可以添加新的关注的用户，移除不再关注的用户，获取关注公众号的用户总数等。我们来实现一下上面的过程：

// 公众号
const officialAccount = {
   
	// 关注当前公众号的用户列表
	followList: [],
	// 公众号更新时候调用的通知函数
	notify() {
   
		const len = this.followList.length;
		if (len > 0) {
   
			// 通知已关注该公众号的每个用户，有内容更新
			for (let user of this.followList) {
   
				user.update();
			}
		}
	}