8、设计模式行为型之观察者模式

设计模式行为型之观察者模式

 

观察者模式就是定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

 
生活中存在着许多这样的例子，智能设备的发展让学校和家长之间的联系变得更加紧密了。同学们最熟悉的就是一个名叫“家长群”的沟通方式，它让家长可以随时的知道自己孩子在学校的情况。

实际上，“家长群”就是一种观察者模式在生活中的应用。当老师在群里发布通知的时候，家长们都能得到通知并进行对应的行为。这不就是一种一对多的依赖关系嘛。

 
那么在如果在代码中实现呢？下面我们就用代码来实现“家长群”功能。

1、首先我们需要实现一个班主任的发布者：

/**
 * 定义发布者 - 班主任
 */
class Teacher {
    constructor () {
        this.patriarchs = []; // 家长（观察者）, patriarch: 家长
    }
    addPatriarch(patriarch) {
        this.patriarchs.push(patriarch);
    }
    removePatriarch(patriarch) {
        this.patriarchs.forEach((item, i) => {
            if (item.name === patriarch.name) {
                this.patriarchs.splice(i, 1);
            }
        })
    }
    notify() {
        this.patriarchs.forEach((patriarch) => {
            console.log(`通知给${patriarch.name}了！`)
            patriarch.action();
        })
    }
}

在上面的代码中，我们有添加和删除观察者以及通知的功能。

2、其次让我们实现一下观察者，也就是家长一方：

/**
 * 观察者 - 家长
 */
class Patriarch {
    constructor(name) {
        this.name = name;
    }

    action() {
        console.log(`${this.name}收到老师的通知了！`)
    }
}

目前我们已经实现了发布者和观察者，那么现在就让我们试试这段代码是否能实现我们的功能吧：

// 1.创建发布者
const teacher = new Teacher();
// 2.并添加观察者
teacher.addPatriarch(new Patriarch("小花家长"));
teacher.addPatriarch(new Patriarch("张三家长"));
teacher.addPatriarch(new Patriarch("小明家长"));
// 3.执行通知发布
teacher.notify();

打印结果如下：

通知给小花家长了！
小花家长收到老师的通知了！
通知给张三家长了！
张三家长收到老师的通知了！
通知给小明家长了！
小明家长收到老师的通知了！

可以看到，我们成功的班主任发布通知时顺利的通知到了所有的家长！

 

相信到了这里，大家对观察者模式也有了一定的了解。

vue 这一门框架相信大家或多或少的都听过，而在 vue 中核心的数据双向绑定原理也正是利用了观察者这样一种模式。更加具体的原理我们不再这里详述，有兴趣的小伙伴可以给我留言，后期会根据大家的需要出一些相关的内容。

 

观察者模式是一个非常重要的模式，在我们实际的应用开发过程中很多地方都有它的身影。但是重要不等于难理解。相信大家一定能从本节中有所收获。