[JS設計模式]：觀察者模式(即發佈-訂閱者模式)（4）

来源:https://www.cnblogs.com/moqiutao/archive/2019/07/09/11139165.html
-Advertisement-
Play Games

簡介 觀察者模式又叫發佈 訂閱模式，它定義了對象間的一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，當一個對象發生改變時，所有依賴於它的對象都將得到通知。 舉一個現實生活中的例子，例如小紅在淘寶的一家店裡看上了一雙紅色的鞋，小李也在這家店裡面看上了一頂黑色的帽子，但是聯繫賣家時，賣家回答這 ...


簡介

觀察者模式又叫發佈---訂閱模式，它定義了對象間的一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，當一個對象發生改變時，所有依賴於它的對象都將得到通知。

舉一個現實生活中的例子，例如小紅在淘寶的一家店裡看上了一雙紅色的鞋，小李也在這家店裡面看上了一頂黑色的帽子，但是聯繫賣家時，賣家回答這兩樣都沒貨了。賣家告訴小紅小李，要是喜歡的話，可以關註下店鋪，到貨了，我會給大家通知的。這就是一個典型的發佈-訂閱模式，賣家是發佈者，買家是訂閱者。當貨來的時候，會依次通知小紅、小李等買家，依次給他們發消息通知。

代碼實現

var goodsObj = {};
goodsObj.list = []; //存放訂閱者

//訂閱者
goodsObj.subscribe = function(key,fn){
    if(!this.list[key]){
        this.list[key] = [];
    }
    //訂閱的消息存放到緩存列表中
    this.list[key].push(fn);
}

//取消訂閱
goodsObj.unsubscribe = function(key,fn){
    var fns = this.list[key];
    //如果key對應的消息沒有訂閱過的話，則返回
    if(!fns){ 
        return false;
    }
    //如果沒有傳入具體的回調函數,表示取消key對應消息的所有訂閱
    if(!fn){
        fns && (fns.length = 0);
    }else{
        for(var i = fns.length - 1; i >= 0; i--){
            if(fns[i] === fn){
                //刪除訂閱者的回調函數
                fns.splice(i,1); 
            }
        }
    }
}

//發佈者
goodsObj.publish = function(){
    var key = Array.prototype.shift.call(arguments);
    var fns = this.list[key];
    //如果沒有訂閱過該key的消息,直接返回
    if(!fns || fns.length === 0){
        return false;
    }
    for(var i = 0,fn; fn = fns[i++];){
        fn.apply(this,arguments);
    }
}

//小紅訂閱了鞋
goodsObj.subscribe('shoes',fn1 = function(color){
    console.log('訂閱鞋的顏色：' + color + '到貨了，可以拍了');
});

//小李訂閱了帽子
goodsObj.subscribe('cap',fn2 = function(size){
    console.log('訂閱帽子的尺寸：' + size  + '到貨了，可以拍了');
});

//發佈
goodsObj.publish('shoes','red');
goodsObj.publish('cap',40);

//取消訂閱
goodsObj.unsubscribe('shoes',fn1);

//發佈消息,看是否能收到
goodsObj.publish('shoes','block');

 優化取消訂閱

為了優化取消訂閱，在訂閱的時候，給每個訂閱者一個不同的標識，代碼如下：

var goodsObj = {};
goodsObj.list = {}; //存放訂閱者
var subuid = -1; //每個訂閱者標識不一樣

//訂閱者
goodsObj.subscribe = function(key,fn){
    if(!this.list[key]){
        this.list[key] = [];
    }
    //訂閱的消息存放到緩存列表中
    var token= (++subuid).toString();
    this.list[key].push({
        token:token,
        fn:fn
    });
    return token;
}

//取消訂閱
goodsObj.unsubscribe = function(token){
    for(var m in goodsObj.list){
        if(goodsObj.list.hasOwnProperty(m)){
            for(var i = 0, j = goodsObj.list[m].length; i < j; i++ ){
                if(goodsObj.list[m][i].token == token){
                    goodsObj.list[m].splice(i,1);
                    break;
                }
            }
        }
    }
}

//發佈者
goodsObj.publish = function(){
    var key = Array.prototype.shift.call(arguments);
    var fns = this.list[key];
    //如果沒有訂閱過該key的消息,直接返回
    if(!fns || fns.length === 0){
        return false;
    }
    for(var i = 0,obj; obj = fns[i++];){
        obj.fn.apply(this,arguments);
    }
}

//小紅訂閱了鞋
var token1 = goodsObj.subscribe('shoes',function(color){
    console.log('訂閱鞋的顏色：' + color + '到貨了，可以拍了');
});

//小李訂閱了帽子
goodsObj.subscribe('cap',function(size){
    console.log('訂閱帽子的尺寸：' + size  + '到貨了，可以拍了');
});

//發佈
goodsObj.publish('shoes','red');
goodsObj.publish('cap',40);

//取消訂閱
goodsObj.unsubscribe(token1);

//發佈消息,看是否能收到
goodsObj.publish('shoes','block');

封裝全局發佈訂閱對象

封裝一個全局的發佈-訂閱對象，代碼如下：

var Event = (function(){
    var list = {}, //存放訂閱者
        subscribe,
        unsubscribe,
        publish,
        subuid = -1; //每個訂閱者標識不一樣
        
        //訂閱者
        subscribe = function(key,fn){
            if(!list[key]){
                list[key] = [];
            }
            //訂閱的消息存放到緩存列表中
            var token= (++subuid).toString();
            list[key].push({
                token:token,
                fn:fn
            });
            return token;
        };
        
        //取消訂閱
        unsubscribe = function(token){
            for(var m in list){
                if(list.hasOwnProperty(m)){
                    for(var i = 0, j = list[m].length; i < j; i++ ){
                        if(list[m][i].token == token){
                            list[m].splice(i,1);
                            break;
                        }
                    }
                }
            }
        };
        
        //發佈者
        publish = function(){
            var key = Array.prototype.shift.call(arguments);
            var fns = list[key];
            //如果沒有訂閱過該key的消息,直接返回
            if(!fns || fns.length === 0){
                return false;
            }
            for(var i = 0,obj; obj = fns[i++];){
                obj.fn.apply(this,arguments);
            }
        };
        
        return {
            publish:publish,
            subscribe:subscribe,
            unsubscribe:unsubscribe
        }        
})();

//小紅訂閱了鞋
var token1 = Event.subscribe('shoes',function(color){
    console.log('訂閱鞋的顏色：' + color + '到貨了，可以拍了');
});

//小李訂閱了帽子
Event.subscribe('cap',function(size){
    console.log('訂閱帽子的尺寸：' + size  + '到貨了，可以拍了');
});

//發佈
Event.publish('shoes','red');
Event.publish('cap',40);

//取消訂閱
Event.unsubscribe(token1);

//發佈消息,看是否能收到
Event.publish('shoes','block');

實例

我們使用上面封裝的全局的發佈-訂閱對象來實現兩個模塊之間的通信問題；比如現在有一個頁面有一個按鈕，每次點擊此按鈕後，div中會顯示此按鈕被點擊的總次數；如下代碼：

<button id="clickBtn">點擊我計數</button>
<div id="showCount">0</div>

JS代碼如下：

(function(){
    var count = 0;
    //發佈(責處理點擊操作、發佈消息)
    document.getElementById('clickBtn').addEventListener('click',function(){
        Event.publish('add',count++);
    },false);
    
    //訂閱(負責監聽add這個消息，並把點擊的總次數顯示到頁面上來)
    Event.subscribe('add',function(curCount){
        document.getElementById('showCount').innerHTML = curCount;
    })
})();

訂閱發佈更精簡代碼：

var Event = function(){
    var listen,obj,remove,one,trigger,__this;
    obj = {};
    __this = this;
    listen = function(key,eventfn){
        var _ref,stack;
        stack = (_ref = obj[key]) != null ? _ref : obj[key] = [];
        return stack.push(eventfn);
    };
    one = function(key,eventfn){
        remove(key);
        return listen(key,eventfn);
    };
    remove = function(key){
        var _ref;
        return (_ref = obj[key]) != null ? _ref.length = 0 : void 0;
    };
    trigger = function(){
        var fn,stack,_i,_len,_ref,key;
        key = Array.prototype.shift.call(arguments);
        stack = (_ref = obj[key]) != null ? _ref :obj[key] = [];
        for(_i=0,_len=stack.length;_i<_len;_i++){
            fn = stack[_i];
            if(fn.apply(__this,arguments) === false){
                return false;
            }
        }
    }
    
    return {
        listen:listen,
        one:one,
        remove:remove,
        trigger:trigger
    }
}

var addTv = Event();

addTv.listen('play',function(data){
    console.log('今天上午要播放的電影是：' +data.name);
});
addTv.one('play',function(data){
    console.log('只有我訂閱的電影信息：' +data.name);
});
addTv.trigger('play',{'name':'國產凌凌漆'});

addTv.remove('play');
addTv.trigger('play',{'name':'國產凌凌漆22'});

 參考


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML連載21-序選擇器上
    解釋CSS3 中新增的選擇器中最具有代表性的就是序選擇器，大致可以分為兩類： （1）同級別的第幾個（2）同類型的第幾個 先寫一個公共代碼 1.選中同級別中的第一個 註意點：不區分類型，只管取第一個，不管第一個是什麼標簽 解釋：在同級別中只選取第一個為h1標簽和div下的p標簽，然後在這些裡面只選p標 ...
  • JavaScript面試核心考點(精華)
    Javascript是前端面試的重點，本文重點梳理下 Javascript 中的常考基礎知識點，然後就一些容易出現的題目進行解析。限於文章的篇幅，無法將知識點講解的面面俱到，本文只羅列了一些重難點。 ...
  • Vue.js 源碼分析(二十二) 指令篇 v-model指令詳解
    Vue.js提供了v-model指令用於雙向數據綁定，比如在輸入框上使用時，輸入的內容會事實映射到綁定的數據上，綁定的數據又可以顯示在頁面里，數據顯示的過程是自動完成的。 v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。例如: 渲染如下: 當我 ...
  • 在Electron中最快速預載入腳本
    背景 在Electron打開新視窗的時候，提前載入一段JavaScript腳本，以此內置一些屬性或介面給被打開的頁面。之所以要以註入方式，而不是頁面自己引用，原因是不想麻煩頁面自行引用，不想修改舊有的業務邏輯。 方法一 一開始是想在打開BrowserWindow後，執行executeJavaScri ...
  • js原型，原型鏈
    先鋪墊下原型規則： 1.所有的引用類型（數組，對象，函數）都具有對象特性，可自由擴展屬性（出了null外） 2.所有的引用類型（數組，對象，函數）都有一個__proto__屬性（隱式原型），屬性值是一個對象 3.所有的函數都有一個prototype屬性（顯示原型），屬性值是一個對象 4.所有的引用類 ...
  • 每天學點node系列-fs文件系統
    好的代碼像粥一樣,都是用時間熬出來的。 概述 文件 I/O 是由簡單封裝的標準 POSIX 函數提供的。 通過 require('fs') 使用該模塊。 所有文件系統操作都具有同步和非同步的形式。 非同步的形式總是將完成回調作為其最後一個參數。 傳給完成回調的參數取決於具體方法，但第一個參數始終預留用於 ...
  • 微信小程式在ios下Echarts圖表不能滑動的解決方案
    問題現象 這個問題的現象說起來很簡單。 小程式頁面中有一篇很長的文章，內部有一個Echarts圖表，手指上下滑動觀看內容。 但是手指滑動區域在Echarts圖表上時，頁面卻不能滑動了。 如下圖： 追蹤問題原因 因為在小程式上渲染圖表用到的是 "echarts for weixin" 這個組件,而這個 ...
  • Vue編程式跳轉
    編程式跳轉 router.js: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類