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

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

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

發(fā)布訂閱模式

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

實現(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
測試
//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);
觀察者的使用場合就是：當一個對象的改變需要同時改變其它對象，并且它不知道具體有多少對象需要改變的時候，就應該考慮使用觀察者模式。
總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。從而使得各自的變化都不會影響到另一邊的變化。

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

云服務器 GPU云服務器發(fā)布訂閱模式訂閱發(fā)布模式 DTS 訂閱發(fā)布模式 js觀察者模式視頻

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92947.html

10分鐘弄懂一種簡單的js設計模式（觀察者/發(fā)布訂閱）

摘要：發(fā)布者注冊發(fā)布訂閱者自動打印消息消息觀察者模式與發(fā)布訂閱模式類似。在此種模式中，一個目標物件在它本身的狀態(tài)改變時主動發(fā)出通知，觀察者收到通知從而使他們的狀態(tài)自動發(fā)生變化。做為非科班出身的前端er，每次聽到設計模式都感覺很高大上，總感覺這些東西是造火箭原子彈用的，距離我們這些造螺絲釘很遙遠。但是最近在做一個聊天消息的業(yè)務時，發(fā)現(xiàn)貌似用上發(fā)布訂閱模式業(yè)務就很清晰了。創(chuàng)建一個消息類當作發(fā)布...

xiguadada 2019-08-26 10:13 評論0 收藏0
觀察者模式和發(fā)布訂閱模式（JS）

摘要：最近被人問到設計模式，觀察者模式和發(fā)布訂閱模式二者有什么區(qū)別。觀察者模式觀察者模式，目標和觀察者是基類，目標提供維護觀察者的一系列方法，觀察者提供更新接口。最近被人問到設計模式，觀察者（Observer）模式和發(fā)布（Publish）/訂閱（Subscribe）模式二者有什么區(qū)別。其實這兩種模式還是有些許差異的，本質(zhì)上的區(qū)別是調(diào)度的方式不同。觀察者模式觀察者模式，目標和觀察者是基類...

Sanchi 2019-08-23 12:59 評論0 收藏0
JS每日一題:設計模式-如何理解觀察者(發(fā)布訂閱)模式?

摘要：期設計模式如何理解觀察者發(fā)布訂閱模式定義觀察者模式又叫發(fā)布訂閱模式，它定義了一種一對多的關系，讓多個觀察者對象同時監(jiān)聽某一個主題對象，這個主題對象的狀態(tài)發(fā)生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己生活實例理解你今天去看一個 20190411期設計模式-如何理解觀察者(發(fā)布訂閱)模式? 定義: 觀察者模式又叫發(fā)布訂閱模式（Publish/Subscribe），它定義了一...

baishancloud 2019-08-23 16:53 評論0 收藏0
JS設計模式之Obeserver（觀察者）模式、Publish/Subscribe（發(fā)布/訂閱）模式

摘要：觀察者模式定義設計模式中對的定義一個對象稱為維持一系列依賴于它觀察者的對象，將有關狀態(tài)的任何變更自動通知給它們。如圖模式比較觀察者模式則多了一個類似于話題調(diào)度中心的流程，發(fā)布者和訂閱者解耦。 Obeserver（觀察者）模式定義《js設計模式》中對Observer的定義：一個對象（稱為subject）維持一系列依賴于它（觀察者）的對象，將有關狀態(tài)的任何變更自動通知給它們。《設計模...

荊兆峰 2019-08-26 13:37 評論0 收藏0
簡單理解觀察者模式(pub/sub)在前端中的應用

摘要：概念觀察者模式被廣泛地應用于客戶端編程中。所有的瀏覽器事件，等都是使用觀察者模式的例子。在觀察者模式中，一個對象訂閱另一個對象的指定活動并得到通知，而不是調(diào)用另一個對象的方法。此外，觀察者模式還可用于實現(xiàn)數(shù)據(jù)綁定。概念觀察者模式被廣泛地應用于JavaScript客戶端編程中。所有的瀏覽器事件（mouseover，keypress等）都是使用觀察者模式的例子。這種模式的另一個名字叫自...

guyan0319 2019-08-23 12:10 評論0 收藏0
js設計模式筆記 - 觀察者模式

摘要：姓名小強正式上班時間前端大大強訂閱了這個消息姓名大大強正式上班時間發(fā)布者發(fā)布消息前端小強姓名小強正式上班時間大大強姓名大大強正式上班時間通過添加了一個，我們實現(xiàn)了對職位的判斷。觀察者模式，定義對象間的一種一對多的依賴關系，當一個對象的狀態(tài)發(fā)生改變時，所有依賴于它的對象都將得到通知。事實上，只要你曾經(jīng)在DOM節(jié)點上綁定過事件函數(shù)，那么你就曾經(jīng)使用過觀察者模式了！ document.b...

txgcwm 2019-08-22 10:40 評論0 收藏0