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

最近把以前学习过的这些设计模式又再次温习了一下，以为仍是有不少收获的。确实有了温故知新的感受，因此准备在每一个设计模式复习完以后都可以写一篇关于这个设计模式的文章，这样会让本身可以加深对这个设计模式的理解；也可以跟你们一块儿来探讨一下。

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

生活中的小例子

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

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

那么对于这个公众号来讲，它的内部须要有一个列表记录着关注这个公众号的用户，一旦公众号有了新的内容。那么对于公众号来讲，它会遍历这个列表。而后给列表中的每个用户发送一个内容跟新的通知。咱们能够经过代码来表示这个过程：

// 用户
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();
            }
        }
    },
    // 添加新的关注的用户
    add(user) {
        this.followList.push(user);
    },
    // 移除再也不关注的用户
    remove(user) {
        const idx = this.followList.indexOf(user);
        if (idx !== -1) {
            this.followList.splice(idx, 1);
        }
    },
    // 计算关注公众号的总的用户数
    count() {
        return this.followList.length;
    },
};

// 新建用户的类
class User {
    constructor(name) {
        this.name = name;
    }
    // 接收公众号内容更新的通知
    update() {
        console.log(`${this.name}接收到了公众号的内容更新`);
    }
}

// 建立两个新的用户
const zhangSan = new User('张三');
const liSi = new User('李四');

// 公众号添加关注的用户
officialAccount.add(zhangSan);
officialAccount.add(liSi);

// 公众号有新内容更新
officialAccount.notify();
console.log(`当前关注公众号的用户数量是：${officialAccount.count()}`);

// 张三再也不关注公众号
officialAccount.remove(zhangSan);

// 公众号有新内容更新
officialAccount.notify();
console.log(`当前关注公众号的用户数量是：${officialAccount.count()}`);

输出的结果以下：

张三接收到了公众号的内容更新
李四接收到了公众号的内容更新
当前关注公众号的用户数量是：2
李四接收到了公众号的内容更新
当前关注公众号的用户数量是：1

上面的代码完善了关注和取消关注的过程，而且能够获取当前公众号的关注人数。咱们还实现了一个用户类，可以让咱们快速建立须要添加到公众号关注列表的用户。固然你也能够把公众号的实现经过一个类来完成，这里就再也不展现实现的过程了。

经过上面这个简单的例子，你是否是有所感悟，有了一些新的收获？咱们上面实现的其实就是一个简单的观察者模式。接下来咱们来聊一聊观察者模式的定义，以及一些在实际开发中的用途。

观察者模式的定义

所谓的观察者模式指的是一种一对多的关系，咱们把其中的一叫作Subject（类比上文中的公众号），把其中的多叫作Observer（类比上文中关注公众号的用户），也就是观察者。由于多个Observer的变更依赖Subject的状态更新，因此Subject在内部维护了一个Observer的列表，一旦Subject的状态有更新，就会遍历这个列表，通知列表中每个Observer进行相应的更新。由于有了这个列表，Subject就能够对这个列表进行增删改查的操做。也就实现了Observer对Subject依赖的更新和解绑。

咱们来看一下观察者模式的UML图：

从上图咱们这能够看到，对于Subject来讲，它自身须要维护一个observerCollection，这个列表里面就是Observer的实例。而后在Subject内部实现了增长观察者，移除观察者，和通知观察者的方法。其中通知观察者的方式就是遍历observerCollection列表，依次调用列表中每个observer的update方法。

到这里为止，你如今已经对这个设计模式有了一些了解。那咱们学习这个设计模式有什么做用呢？首先若是咱们在开发中遇到这种相似上面的一对多的关系，而且多的状态更新依赖一的状态；那么咱们就可使用这种设计模式去解决这种问题。并且咱们也可使用这种模式解耦咱们的代码，让咱们的代码更好拓展与维护。

固然一些同窗会以为本身在平时的开发中好像没怎么使用过这种设计模式，那是由于咱们平时在开发中通常都会使用一些框架，好比Vue或者React等，这个设计模式已经被这些框架在内部实现好了。咱们能够直接使用，因此咱们对这个设计模式的感知会少一些。

实战：实现一个简单的TODO小应用

咱们可使用观察者模式实现一个小应用，这个应用很简单，就是可以让用户添加本身的待办，而且须要显示已添加的待办事项的数量。

了解了需求以后，咱们须要肯定那些是一，哪些是多。固然咱们知道整个TODO的状态就是咱们所说的一，那么对于待办列表的展现以及待办列表的计数就是咱们所说的多。理清了思路以后，实现这个小应用就变得很简单了。

能够点击👉这里提早体验一下这个简单的小应用。

首先咱们须要先实现观察者模式中的Subject和Observer类，代码以下所示。

Subject类：

// Subject
class Subject {
    constructor() {
        this.observerCollection = [];
    }
    // 添加观察者
    registerObserver(observer) {
        this.observerCollection.push(observer);
    }
    // 移除观察者
    unregisterObserver(observer) {
        const observerIndex = this.observerCollection.indexOf(observer);
        this.observerCollection.splice(observerIndex, 1);
    }
    // 通知观察者
    notifyObservers(subject) {
        const collection = this.observerCollection;
        const len = collection.length;
        if (len > 0) {
            for (let observer of collection) {
                observer.update(subject);
            }
        }
    }
}

Observer类：

// 观察者
class Observer {
    update() {}
}

那么接下来的代码就是关于上面待办的具体实现了，代码中也添加了相应的注释，咱们来看一下。

待办应用的逻辑部分：

// 表单的状态
class Todo extends Subject {
    constructor() {
        super();
        this.items = [];
    }
    // 添加todo
    addItem(item) {
        this.items.push(item);
        super.notifyObservers(this);
    }
}

// 列表渲染
class ListRender extends Observer {
    constructor(el) {
        super();
        this.el = document.getElementById(el);
    }
    // 更新列表
    update(todo) {
        super.update();
        const items = todo.items;
        this.el.innerHTML = items.map(text => `<li>${text}</li>`).join('');
    }
}

// 列表计数观察者
class CountObserver extends Observer {
    constructor(el) {
        super();
        this.el = document.getElementById(el);
    }
    // 更新计数
    update(todo) {
        this.el.innerText = `${todo.items.length}`;
    }
}

// 列表观察者
const listObserver = new ListRender('item-list');
// 计数观察者
const countObserver = new CountObserver('item-count');

const todo = new Todo();
// 添加列表观察者
todo.registerObserver(listObserver);
// 添加计数观察者
todo.registerObserver(countObserver);

// 获取todo按钮
const addBtn = document.getElementById('add-btn');
// 获取输入框的内容
const inputEle = document.getElementById('new-item');
addBtn.onclick = () => {
    const item = inputEle.value;
    // 判断添加的内容是否为空
    if (item) {
        todo.addItem(item);
        inputEle.value = '';
    }
};

从上面的代码咱们能够清楚地知道这个应用的每个部分，被观察的Subject就是咱们的todo对象，它的状态就是待办列表。它维护的观察者列表分别是展现待办列表的listObserver和展现待办数量的countObserver。一旦todo的列表新增长了一项待办，那么就会通知这两个观察者去作相应的内容更新。这样代码的逻辑就很直观明了。若是之后在状态变动的时候还要添加新的功能，咱们只须要再次添加一个相应的observer就能够了，维护起来也很方便。

固然上面的代码只实现了很基础的功能，尚未包含待办的完成和删除，以及对于未完成和已完成的待办的分类展现。并且列表的渲染每次都是从新渲染的，没有复用的逻辑。由于咱们本章的内容是跟你们一块儿来探讨一下观察者模式，因此上面的代码比较简陋，也只是为了说明观察者模式的用法。相信优秀的你可以在这个基础上，把这些功能都完善好，快去试试吧。

其实咱们学习这些设计模式，都是为了让代码的逻辑更加清晰明了，可以复用一些代码的逻辑，减小重复的工做，提高开发的效率。让整个应用更加容易维护和拓展。固然不能为了使用而使用，在使用以前，须要对当前的问题作一个全面的了解。到底需不须要使用某个设计模式是一个须要考虑清楚的问题。

好啦，关于观察者模式到这里就结束啦，你们若是有什么意见和建议能够在文章下面下面留言，咱们一块儿探讨一下。也能够在这里提出来，咱们更好地进行讨论。也欢迎你们关注个人公众号关山不难越，随时随地获取文章的更新。

参考连接：

• The Observer Pattern
• How to Use the Observable Pattern in JavaScript

文章封面图来源：unDraw