摘要：下面為學(xué)習(xí)筆記，對觀察者模式做簡單實現(xiàn)。注冊的事件被觸發(fā)后需要執(zhí)行的動作注冊事件及對應(yīng)的執(zhí)行動作觸發(fā)事件對比執(zhí)行事件前后的事件列表內(nèi)容觀察者模式在解決類的耦合中的應(yīng)用小例子。

這篇筆記主要記錄學(xué)習(xí)思路及收獲，分享出來拋磚引玉，如有謬誤或優(yōu)化空間，歡迎交流。

要理解觀察者模式，可以類比vue中的EventBus，其實就是一個全局的觀察者對象($bus)，上面有注冊事件（$bus.on()）和發(fā)送事件($bus.emit())的方法，當(dāng)然因為需要會注冊很多事件，所以內(nèi)部還有一個事件列表屬性_events來存儲注冊的事件。下面為學(xué)習(xí)筆記，對觀察者模式做簡單實現(xiàn)。

基于上面的思路，首先要有一個對象，它有一個私有的列表屬性和對外暴露的兩個方法

let Observer = (()=>{
    _events:[];
    return {
        retister:()=>{},
        issue:()=>{},
    }
})()

接下來一步步實現(xiàn)。

首先，觀察者對象內(nèi)部要有一個存儲事件的列表屬性

let Observer = (()=>{
    // 防止事件隊列暴露而被篡改故將事件容器作為靜態(tài)私有變量保存
    let _events = [];
})()

其次是注冊事件的register方法，需要兩個參數(shù)：需要觀察的事件名稱type和這個事件被觸發(fā)后具體的執(zhí)行內(nèi)容fn：

let Observer = (()=>{
    // 防止事件隊列暴露而被篡改故將事件容器作為靜態(tài)私有變量保存
    let _events = {};
    return {
        register: (type,fn)=>{
            //如果此消息類型不存在則應(yīng)該創(chuàng)建一個(判斷對象上是否有某個屬性)
            // if (typeof(_events[type])==="undefined"){
            if (!(type in _events)){
                _events[type] = [fn];
            } else {//如果此消息類型已存在，則直接將對應(yīng)動作推入消息隊列
                _events[type].push(fn);
            }
        },
    }
})()

再然后就是觸發(fā)事件的issue方法，也需要兩個參數(shù)：要觸發(fā)的事件type及傳遞過去的參數(shù)arg

let Observer = (()=>{
    // 防止事件隊列暴露而被篡改故將事件容器作為靜態(tài)私有變量保存
    let _events = {};
    return {
        register: (type,fn)=>{
            //如果此消息類型不存在則應(yīng)該創(chuàng)建一個(判斷對象上是否有某個屬性)
            // if (typeof(_events[type])==="undefined"){
            if (!(type in _events)){
                _events[type] = [fn];
            } else {//如果此消息類型已存在，則直接將對應(yīng)動作推入消息隊列
                _events[type].push(fn);
            }
        },
        issue: (type,arg)=>{
            // 如果沒有此類型，返回
            // if (typeof (_events[type]) === "undefined"){
            if (!(type in _events)) {
                return;
            }
            for (let i=0;i<_events[type].length;i++){
                _events[type][i](arg);
            }
        },
    }
})()

最后，可以再加一個可以移除已監(jiān)聽事件的remove方法

let Observer = (()=>{
    // 防止事件隊列暴露而被篡改故將事件容器作為靜態(tài)私有變量保存
    let _events = {};
    return {
        register: (type,fn)=>{
            //如果此消息類型不存在則應(yīng)該創(chuàng)建一個(判斷對象上是否有某個屬性)
            // if (typeof(_events[type])==="undefined"){
            if (!(type in _events)){
                _events[type] = [fn];
            } else {//如果此消息類型已存在，則直接將對應(yīng)動作推入消息隊列
                _events[type].push(fn);
            }
        },
        issue: (type,arg)=>{
            // 如果沒有此類型，返回
            // if (typeof (_events[type]) === "undefined"){
                if (!(type in _events)) {
                return;
            }
            for (let i=0;i<_events[type].length;i++){
                _events[type][i](arg);
            }
        },
        // 此方法可以類比document.removerEventListener(evt,fn)
        remove: (type,fn)=>{
            // 如果這個類型的事件存在
            if (_events[type] instanceof Array){
                for (let i = 0; i < _events[type].length; i++) {
                    _events[type][i] === fn && _events[type].splice(i,1);
                }
            }
        },
        // 因為外部獲取不到私有屬性`_events`，所以臨時用這個方法檢查`remove`方法是否生效
        check (){
            console.log("_events事件隊列",_events);
        }
    }
})()

至此一個基本的觀察者對象就寫出來了，接下來跑一下看效果。

// 注冊的事件被觸發(fā)后需要執(zhí)行的動作
function handler (val){
    console.log("val:",val*2);
}

// 注冊事件及對應(yīng)的執(zhí)行動作
Observer.register("eventName",handler);

// 觸發(fā)事件
function test (){
    Observer.issue("eventName",5); //10
    // 對比執(zhí)行remove事件前后的事件列表內(nèi)容
    Observer.check();
    Observer.remove("eventName",fn);
    observer.check();
}

觀察者模式在解決類的耦合中的應(yīng)用小例子。想象一下課堂上老師提問，學(xué)生回答問題的場景。老師提問的問題名稱相當(dāng)于發(fā)出的事件，如果學(xué)生聽到這個問題（事先注冊了這個問題名稱），那么便會回答（響應(yīng)事件的動作）。

學(xué)生類：

let Student = function (result) {
    // 問題答案
    this.result = result;
    // 回答的動作
    this.answer = ()=>{
        console.log("答案",this.result);
    }   
}
Student.prototype.listen = function(question){
    Observer.register(question,this.answer);
}
Student.prototype.sleep = function (question) {
    Observer.remove(question,this.answer);
    console.log("這個問題我聽不到聽不到~");
}

教師類：

let Teacher = function (){}
// 對某一個問題發(fā)出問題
Teacher.prototype.ask = function (question) {
    Observer.issue(question);
}

執(zhí)行：

let student1 = new Student("學(xué)生1回答問題");
let student2 = new Student("學(xué)生2回答問題");
let student3 = new Student("學(xué)生3：呼嚕呼嚕~");
student1.listen("雞生蛋還是蛋生雞?");
student2.listen("雞生蛋還是蛋生雞?");
student3.listen("雞生蛋還是蛋生雞?");
let teacher = new Teacher();
// 老師發(fā)問
function test () {
    teacher.ask("雞生蛋還是蛋生雞?");
}
//答案 學(xué)生1回答問題
//es5觀察者.html:68 答案 學(xué)生2回答問題
//es5觀察者.html:68 答案 學(xué)生3：呼嚕呼嚕~