Observer和Mediator模式的區別

Observer觀察者模式

Observer觀察者模式和Pub/sub模式事實上都是同一套路。這種模式創建起了不一樣對象之間的依賴關係：

當一個對象觸發某個方法，或者發生變化時，其餘關注這個對象的對象們，也會響應這個對象的變化。

function setObserverBehavior (subjects) {
        if (!Array.isArray(subjects)) {
            if (subjects.length) {
                subjects = Array.from(subjects)
            } else {
                subjects = [subjects]
            }
        }
        
        subjects.forEach(function (subject) {
            subject.watchBy = function (target, type) {
                subject.addEventListener(type, function (evt) {
                    evt.sender = subject
                    evt.recevier = target
                    target.notice && target.notice(evt)
                })
            }
        })
    }
    
    setObserverBehavior(observer)
    // 定義subjectOne對observer的依賴
    observer.watchBy(subjectOne, 'scroll')
    // 定義subjectTwo對observer的依賴
    observer.watchBy(subjectTwo, 'scroll')
    
    // 當observer觸發scroll事件的時候,subjectOne會響應這個事件
    subjectOne.notice = function (evt) {
        const { sender, receiver } = evt
        // do something
    }
    
    // 當observer觸發scroll事件的時候,subjectTwo會響應這個事件
    subjectTwo.notice = function (evt) {
        const { sender, receiver } = evt
        // do something
    }

顯然，在須要創建依賴關係很少的幾個對象中，使用Observer模式能夠很好的將不一樣對象之間進行解耦：定義一個被觀察者的主體，而後添加觀察者對被觀察者的依賴關係。可是須要創建依賴關係的對象一旦多起來，那麼你們也能夠想象下，本身手動去維護這些依賴關係是多麼的蛋疼。

Mediator中介者模式

基本的套路就是：提供一箇中介對象Mediator，這個中介對象就是其餘全部對象之間的聯繫紐帶，其餘全部對象相互之間沒有沒有任何的依賴關係，事件的訂閱及發佈統一讓Mediator去操做。其餘全部的對象須要作的就是提供給Mediator須要發佈的事件，以及訂閱Mediator上能提供的事件。

舉個例子:

淘寶商鋪：賣家A在淘寶上開了一個Gopro相機店,b, c, d最近都有意願去買Gopro,可是以爲價格稍貴，所以暫時不打算入手，想等價格稍微便宜一點後再入手，因此這3我的經過淘寶先關注賣家A的相機店。等到賣家A的Gopro相機打折後，淘寶會向這3我的推送打折消息。

其中這3個買家之間是沒有任何依賴關係的，並不知道對方。當一個買家不打算買這家店的相機，取消關注後，對其餘2個買家沒有任何影響，惟一不一樣的是，賣家A的Gopro相機打折後，淘寶只會通知仍然關注賣家A的2個買家

在這個例子當中:

• 淘寶: Mediator

• 賣家A: 發佈者

• 買家B/C/D: 訂閱者

發佈者經過Mediator去發佈消息，Mediator再去通知其餘的訂閱者

簡單的實現:

class Mediator {
        constructor () {
            this.subscribers = {}
        }
        
        pubNotice (type, obj) {
            this.subscribers[type] = this.subscribers[type] || []
            this.subscribers[type].forEach(sub => {
                sub(obj)
            })
        }
        
        subNotice (type, target, fn) {
            this.subscribers[type] = this.subscribers[type] || []
            this.subscribers[type].push(fn)
        }
    }
    
    const sub1 = {
        sayHi(data) {
        console.log(`sub1 get the data ${data}`)
        }
    }

    const sub2 = {
        sayHi(data) {
            console.log(`sub2 get the data ${data}`)
        } 
    }

    const mediator = new Mediator()

    mediator.subNotice('sayHi', sub1, sub1.sayHi)
    mediator.subNotice('sayHi', sub2, sub2.sayHi)

    mediator.removeNotice('sayHi', sub2, sub2.sayHi)

    mediator.pubNotice('sayHi', '你好')

從Observer和Mediator實現的套路上來看，兩者都有類似之處，就是訂閱者訂閱發佈者發佈的消息,可是Observer是訂閱者和發佈者直接產生依賴關係,當依賴關係變多起來就很差處理了。而Mediator是在訂閱者和發佈者中間加了一個中介者，由這個中介者去管理不一樣對象之間的訂閱發佈關係，這樣的好處就是訂閱者和發佈者不產生直接的依賴關係,統一交給中介者去維護。