請仔細閱讀下面程式碼，理解其中的設計理念。

觀察者模式

觀察者模式: 觀察者模式是定義物件間的一種一對多的依賴關係，當一個物件的狀態發生改變時，所有依賴於它的物件都得到通知並被自動更新。

實際場景

• 一個抽象模型有兩個方面，其中一個方面依賴於另一個方面。將這些方面封裝在獨立的物件中使它們可以各自獨立地改變和複用。
• 一個物件的改變將導致其他一個或多個物件也發生改變，而不知道具體有多少物件將發生改變，可以降低物件之間的耦合度。
• 一個物件必須通知其他物件，而並不知道這些物件是誰。
• 需要在系統中建立一個觸發鏈，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的資料處理機智，還是建議大家看原始碼。

觀察者模式的利弊

利：

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

弊：

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