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的數據處理機智，還是建議大家看源碼。

觀察者模式的利弊

利：

• 觀察者和被觀察者是抽象耦合的。
• 建立一套觸發機制。

弊：

• 如果一個被觀察者對象有很多的直接和間接的觀察者的話，將所有的觀察者都通知到會花費很多時間。
• 如果在觀察者和觀察目標之間有循環依賴的話，觀察目標會觸發它們之間進行循環調用，可能導致系統崩潰。
• 觀察者模式沒有相應的機制讓觀察者知道所觀察的目標對象是怎麼發生變化的，而僅僅只是知道觀察目標發生了變化。