Typescript 观察者模式（Observer）

标签： 前端 设计模式 观察者模式 typescript observer

---

请仔细阅读下面代码，理解其中的设计理念。

观察者模式

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

实际场景

• 一个抽象模型有两个方面，其中一个方面依赖于另一个方面。将这些方面封装在独立的对象中使它们可以各自独立地改变和复用。
• 一个对象的改变将导致其他一个或多个对象也发生改变，而不知道具体有多少对象将发生改变，可以降低对象之间的耦合度。
• 一个对象必须通知其他对象，而并不知道这些对象是谁。
• 需要在系统中创建一个触发链，A对象的行为将影响B对象，B对象的行为将影响C对象……，可以使用观察者模式创建一种链式触发机制。

观察者模式的结构

• Client: 客户端
• Subject: 通知者
• Observer: 观察者

观察者模式的例子

这里我们使用vue中的观察者模式作为例子(为了简洁，省略部分代码)
其中的数据走向如下图所示。

• vue中的变量会改造成observer对象，运用观察者模式来实现双向绑定等操作。
• observer在观察者模式中相当于client

/* observer.ts */
import { defineReactive } from './define-reactive';
import Dep from './dep';

function def(obj: Object, key: string, val: any) {
    Object.defineProperty(obj, key, {
        value: val,
        enumerable: false,
        writable: true,
        configurable: true
    })
}

/**
 * 重写设置__ob__对象
 * 增加观察者模式
 */
export default class Observer {
    value: any;
    dep: Dep;

    // 这里只演示值为对象情况
    constructor (value: Object) {
        this.value = value;
        this.dep = new Dep();
        def(value, '__ob__', this);
        this.walk(value)
    }

    walk (obj: Object) {
        const keys = Object.keys(obj);
        for (let i = 0; i < keys.length; i++) {
            defineReactive(obj, keys[i])
        }
    }
}

/* define-reactive.ts */
import Dep from './dep';

/**
 * 将可配置的对象设置成__ob__对象
 * get方法和set方法添加观察者模式
 */
export function defineReactive (obj: Object, key: string, val?: any,) {
    const dep = new Dep();

    // 只设置可配置的对象
    const property = Object.getOwnPropertyDescriptor(obj, key);
    if (property && property.configurable === false) {
        return
    }

    const getter = property && property.get;
    if (!getter && arguments.length === 2) {
        val = obj[key]
    }

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () {
            const value = getter ? getter.call(obj) : val;
            /**
             * 如果在某一个watcher的上下文调用到了这个对象
             * 那么这个watcher订阅这个对象改变的消息
             * 这个对象改变的时候watcher执行更新函数
             */
            if (Dep.target) {
                dep.depend();
            }
            return value
        },
        set: function reactiveSetter (newVal) {
            const value = getter ? getter.call(obj) : val;
            if (newVal === value || (newVal !== newVal && value !== value)) {
                return
            }
            val = newVal;
            // 对象改变，让发布者通知所有订阅者
            dep.notify()
        }
    })
}

• 通知者： Dep

import Watcher from './watcher';

let uid = 0;

/**
 * 每一个observer都会创建一个或多个dep
 * 每一个dep都是一个发布者
 * observer的值改变时通知对应的dep去发布消息给他的订阅者们
 */
export default class Dep {
    public static target: Watcher;
    private id: number;
    private subs: Array<Watcher>;

    constructor () {
        this.id = uid++;
        this.subs = [];
    }

    public addSub (sub: Watcher) {
        this.subs.push(sub)
    }

    public removeSub (sub: Watcher) {
        remove(this.subs, sub)
    }

    public depend () {
        if (Dep.target) {
            Dep.target.addDep(this)
        }
    }

    public notify () {
        const subs = this.subs.slice();
        for (let i = 0, l = subs.length; i < l; i++) {
            subs[i].update()
        }
    }
}

function remove(list, item) {
    const index = list.findIndex((ele) => ele === item);
    if (index !== -1) {
        list.splice(index, 1);
    }
}

• 观察者: watcher

import Dep from './dep';

/**
 * watcher是观察者，他会收到发布者dep的消息而执行更新。
 */
export default class Watcher {
    private env: any;
    private cb: Function;
    private value: any;

    constructor(env: any, value: any, cb: Function) {
        this.env = env;
        this.cb = cb;
        this.value = value;
    }

    get () {
        /**
         * 将dep的上下文设置成这个watcher
         * 为了让这个watcher里面引用的所有依赖改变时都通知到该watcher执行更新
         * 与observer.ts的get方法配合查看
         */
        Dep.target = this;
        let value;
        value = {}; // 获取最新的值
        return value
    }

    update () {
        this.run()
    }

    run () {
        const value = this.get();
        const oldValue = this.value;
        this.value = value;
        this.cb.call(this.env, value, oldValue);
    }

    addDep (dep: Dep) {
        dep.addSub(this)
    }
}

如果要更加详细的了解vue的数据处理机智，还是建议大家看源码。

观察者模式的利弊

利：

• 观察者和被观察者是抽象耦合的。
• 建立一套触发机制。

弊：

• 如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间。
• 如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。
• 观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而仅仅只是知道观察目标发生了变化。