js設(shè)計(jì)模式 --- 發(fā)布訂閱模式(觀察者模式)

EasonTyler 發(fā)布于2019-08-22 14:52 / 1234人閱讀

摘要：由主體和觀察者組成，主體負(fù)責(zé)發(fā)布事件，同時(shí)觀察者通過訂閱這些事件來觀察該主體。主體并不知道觀察者的任何事情，觀察者知道主體并能注冊(cè)事件的回調(diào)函數(shù)?？偟膩碚f，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。

發(fā)布訂閱模式

發(fā)布訂閱模式又叫觀察者模式（Publish/Subscribe），它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生變化時(shí)就會(huì)通知所有的觀察者對(duì)象，使得它們能夠自動(dòng)更新自己。這是一種創(chuàng)建松散耦合代碼的技術(shù)。它定義對(duì)象間 一種一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知。由主體和觀察者組成，主體負(fù)責(zé)發(fā)布事件，同時(shí)觀察者通過訂閱這些事件來觀察該主體。主體并不知道觀察者的任何事情，觀察者知道主體并能注冊(cè)事件的回調(diào)函數(shù)。
觀察者模式中有主題(Subject)和觀察者(Observer),分別對(duì)應(yīng)報(bào)社和訂閱用戶(你).觀察者模式定義了對(duì)象之間的一對(duì)多的依賴關(guān)系,這樣,當(dāng)"一"的一方狀態(tài)發(fā)生變化時(shí),它所依賴的"多"的一方都會(huì)收到通知并且自動(dòng)更新.如圖:

實(shí)現(xiàn)

var Event = {
    // 通過on接口監(jiān)聽事件eventName
    // 如果事件eventName被觸發(fā)，則執(zhí)行callback回調(diào)函數(shù)
    on: function (eventName, callback) {
        //我的代碼
        if(!this.handles){
            //this.handles={};
            Object.defineProperty(this, "handles", {
                value: {},
                enumerable: false,
                configurable: true,
                writable: true
            })   
        }      
       if(!this.handles[eventName]){
            this.handles[eventName]=[];
       }
       this.handles[eventName].push(callback);
    },
    // 觸發(fā)事件 eventName
    emit: function (eventName) {
        //你的代碼
       if(this.handles[arguments[0]]){
           for(var i=0;i
或者
var eve = function () {
            // 通過on接口監(jiān)聽事件eventName
        // 如果事件eventName被觸發(fā)，則執(zhí)行callback回調(diào)函數(shù)
    this.on = function (eventName, callback) {
        //我的代碼
        if(!this.handles){
            //this.handles={};
            Object.defineProperty(this, "handles", {
                value: {},
                enumerable: false,
                configurable: true,
                writable: true
            })   
        }      
        if(!this.handles[eventName]){
            this.handles[eventName]=[];
        }
        this.handles[eventName].push(callback);
    };
        // 觸發(fā)事件 eventName
    this.emit = function (eventName) {
        //你的代碼
        if(this.handles[arguments[0]]){
            for(var i=0;i
測(cè)試
//var Event = new eve(); //第二種函數(shù)類型
Event.on("test", function (result) {
    console.log(result);
});
Event.on("test", function () {
    console.log("test");
});
Event.emit("test", "hello world"); // 輸出 "hello world" 和 "test"

var person1 = {};
var person2 = {};
Object.assign(person1, Event);
console.log(person1);
console.log(person2);
console.log("ssssssssssssssssssssssss");

Object.assign(person2, Event);

console.log(person1);
console.log(person2);
console.log("aaaaaaaaaaaa");

person1.on("call1", function () {
    console.log("person1");
});

console.log(person1);
console.log(person2);
console.log("bbbbbbbbbbbbbbbbbbbbbb");

person2.on("call2", function () {
    console.log("person2");
});

console.log(person1);
console.log(person2);
console.log("ccccc");




person1.emit("call1"); // 輸出 "person1"
person1.emit("call2"); // 沒有輸出
person2.emit("call1"); // 沒有輸出
person2.emit("call2"); // 輸出 "person2"

console.log(person2.handles ===person1.handles);
觀察者的使用場(chǎng)合就是：當(dāng)一個(gè)對(duì)象的改變需要同時(shí)改變其它對(duì)象，并且它不知道具體有多少對(duì)象需要改變的時(shí)候，就應(yīng)該考慮使用觀察者模式。
總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。從而使得各自的變化都不會(huì)影響到另一邊的變化。

優(yōu)點(diǎn)
   時(shí)間上解耦對(duì)象間解耦
缺點(diǎn) 
   創(chuàng)建這個(gè)函數(shù)同樣需要內(nèi)存，過度使用會(huì)導(dǎo)致難以跟蹤維護(hù)