JavaScript 設計模式之觀察者模式

觀察者模式

觀察者模式又被稱為發布-訂閱模式,使用一個對象來收集訂閱者,在發布時遍歷所有訂閱者,然后將信息傳遞給訂閱者,可以這樣來實現一個簡單的模式

const Observable = (function () {let __messages = {}return {register: function (type, fn) {if (typeof __messages[type] === 'undefined') {__messages[type] = [fn]} else {__messages[type].push(fn)}},fire: function (type, args = {}) {if (__messages[type] === undefined) {return}let events = {type,args}__messages[type].forEach(fn => {fn.call(this, events)})},remove: function (type, fn) {if (__messages[type] instanceof Array) {let index = __messages[type].indexOf(fn)if (index >= 0) {__messages[type].splice(index, 1)}}}}
})()const fn = function (e) {console.log(e.type,e.args.msg)
}
Observable.register('test', fn)
Observable.remove('test',fn)
Observable.register('test', function (e) {console.log(e.type,e.args.msg,2122)
})Observable.fire('test', { msg: 'hello world' }) // test hello world 2122

案例

假使有一個學生跟老師的互動


// 學生類
const Student = function (result) {this.result = resultthis.say =  ()=> {console.log(this.result)}
}// 學生回答問題
Student.prototype.answer = function (que) {// 注冊事件Observable.register(que, this.say)
}Student.prototype.sleep = function (que) {console.log(this.result + ' ' + que + '被注銷')Observable.remove(que, this.say)
}// 老師類
const Teacher = function () {
}
Teacher.prototype.ask = function (que) {console.log('老師提問:' + que)Observable.fire(que)
}let stu1 = new Student('學生1回答問題')
let stu2 = new Student('學生2回答問題')
let tea = new Teacher()
stu1.answer('1+1等于多少')
stu1.answer('2+2等于多少')
stu2.answer('1+1等于多少')
stu2.answer('2+2等于多少')
stu2.sleep('1+1等于多少')
tea.ask('1+1等于多少')
tea.ask('2+2等于多少')

輸出

/*
學生2回答問題 1+1等于多少被注銷
老師提問:1+1等于多少
學生1回答問題
老師提問:2+2等于多少
學生1回答問題
學生2回答問題*/

結論

通過觀察者模式可以團隊開發中模塊間通訊問題

解耦兩個相互依賴的對象,使其側重依賴于觀察者的消息機制。這樣對于任意一個訂閱者對象來說,其他訂閱者對象的改變不會影響到自身。對于每一個訂閱者來說,其自與既可以是消息的發出者也可以是消息的執行者,這都依賴于調用觀察者對象的三種方法(訂消息,注銷消息,發布消息)中的哪一種

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/697571.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/697571.shtml
英文地址,請注明出處:http://en.pswp.cn/news/697571.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

win系統下安裝mysql5.7并配置環境變量、設置root用戶和服務啟動的詳細操作教程

本篇文章主要講解:win系統下安裝mysql5.7并配置環境變量、設置root用戶和服務啟動的詳細操作教程 日期:2024年2月22日 作者:任聰聰 一、mysql5.7版本的下載 官方下載地址:https://downloads.mysql.com/archives/community/ 步驟…

服務器生信環境配置腳本

服務器生信環境配置腳本的重要性在于它為生物信息學的數據分析提供了一個統一和標準化的計算環境。通過自動化的配置腳本,可以快速地在服務器上部署和設置生物信息學的軟件和依賴庫,確保分析的可重復性和準確性。這樣,生物信息學家和研究人員…

【鴻蒙 HarmonyOS 4.0】狀態管理

一、介紹 資料來自官網:文檔中心 在聲明式UI編程框架中,UI是程序狀態的運行結果,用戶構建了一個UI模型,其中應用的運行時的狀態是參數。當參數改變時,UI作為返回結果,也將進行對應的改變。這些運行時的狀…

Stable Diffusion 模型的概念、類型、下載、安裝、使用

本文收錄于《AI繪畫從入門到精通》專欄,專欄總目錄:點這里。 大家好,我是水滴~~ 我們在《Stable Diffusion WebUI 界面介紹》 時,第一個就講到了 Stable Diffusion 模型,那么這個模型是什么?該從哪兒下載&…

多輸入分類|GWO-CNN-LSTM|灰狼算法優化的卷積-長短期神經網絡分類預測(Matlab)

目錄 一、程序及算法內容介紹: 基本內容: 亮點與優勢: 二、實際運行效果: 三、算法介紹: 灰狼優化算法: 卷積神經網絡-長短期記憶網絡: 四、完整程序下載: 一、程序及算法內容…

【EI會議征稿通知】第五屆人工智能與機電自動化國際學術會議(AIEA 2024)

第五屆人工智能與機電自動化國際學術會議(AIEA 2024) 2024 5th International Conference on Artificial Intelligence and Electromechanical Automation 優秀評選已啟動,設置優秀論文、優秀報告及優秀海報多個獎項,豐厚獎金等…

【Java程序設計】【C00280】基于Springboot的校友社交系統(有論文)

基于Springboot的校友社交系統(有論文) 項目簡介項目簡介項目獲取開發環境項目技術運行截圖 項目簡介 項目簡介 這是一個基于Springboot的校友社交系統 本系統分為系統功能模塊、管理員功能模塊以及用戶功能模塊。 系統功能模塊:在系統首頁…

數據結構與算法——排序算法

目錄 文章目錄 前言 一.排序的基本概念 1.什么是就地排序 2.什么是內部排序和外部排序 3.什么是穩定排序 4.判定一個排序算法的是穩定的 二.插入排序算法 1.直接插入排序 1.1基本思想 1.2復雜度 1.3穩定性 1.4代碼演示 2.折半插入排序 2.1基本思想 2.2性能 3.…

vue實現遞歸組件

父組件&#xff1a; <Tree :data"data"></Tree> import Tree from "/components/Tree.vue"; const data reactive([{name: "1",checked: true,children: [{name: "1-1",checked: false,},],},&#xff09; 子組件&#…

若依logback日志配置采坑

問題描述 若依使用的appender過濾器是level&#xff0c;如下述代碼&#xff0c;這種過濾器只能導出級別為INFO的日志&#xff0c;warn和error都導出不出來。查詢不是很方便。 <!-- 系統日志輸出 --><appender name"file_info" class"ch.qos.logback.…

JAVA IDEA 項目打包為 jar 包詳解

前言 如下簡單 maven 項目&#xff0c;現在 maven 項目比較流行&#xff0c;你還沒用過就OUT了。需要打包jar 先設置&#xff1a;點擊 File > Project Structure > Artifacts > 點擊加號 > 選擇JAR > 選擇From modules with dependencies 一、將所有依賴和模…

VirtualBox+Vagrant快速搭建Centos7

目錄 安裝VirtualBox&#xff1a; 安裝Vagrant&#xff1a; 創建Vagrant項目目錄&#xff1a; 初始化Vagrant配置文件&#xff1a; 本地Vagrantfile中的鏡像名稱&#xff1a; 啟動虛擬機&#xff1a; SSH登錄虛擬機&#xff1a; 備注&#xff1a;安裝鏡像的另一種方式是…

springmvc+ssm+springboot房屋中介服務平臺的設計與實現 i174z

本論文擬采用計算機技術設計并開發的房屋中介服務平臺&#xff0c;主要是為用戶提供服務。使得用戶可以在系統上查看房屋出租、房屋出售、房屋求購、房屋求租&#xff0c;管理員對信息進行統一管理&#xff0c;與此同時可以篩選出符合的信息&#xff0c;給筆者提供更符合實際的…

Autodesk CAD如何建立圖層方框?

在AutoCAD中&#xff0c;要建立圖層方框&#xff08;Layer Box&#xff09;可以通過以下步驟實現&#xff1a; 打開圖層管理器&#xff1a; 在 AutoCAD 中&#xff0c;您可以通過輸入“LA”命令或在菜單欄中選擇“格式” > “圖層管理器”來打開圖層管理器對話框。 創建新圖…

記阿里云mysql丟表丟數據的實踐記錄

第一時間掛工單&#xff0c;聯系工程師指引&#xff0c;現在回過來想&#xff0c;第一時間要確認發生時間。 1.通過性能視圖&#xff08;馬后炮的總結&#xff0c;實際憑記憶恢復了三四次才找到數據&#xff09; 2.先恢復數據 通過Navicat工具&#xff0c;結構同步&#xff0…

解決IntelliJ IDEA 2023版本創建Spring項目時Java只能選擇17或21的問題

問題描述&#xff1a; 當使用IntelliJ IDEA2023版本中Spring Initializr新建Spring項目時&#xff0c;即使JDK配置項為1.8&#xff0c;Java配置項仍然只能選17或21. 在JDK為1.8版本情況下&#xff0c;Java選擇17或21&#xff0c;點擊NEXT按鈕&#xff0c;則會彈窗提示SDK不支持…

Sora: 開啟AI視頻創作的新紀元

隨著人工智能技術的飛速進步&#xff0c;AI視頻模型已迅速成為科技界的新焦點。在這股創新浪潮中&#xff0c;OpenAI推出的Sora&#xff0c;不僅以其前所未有的性能吸引了全球的目光&#xff0c;更以前瞻性的技術定義了AI視頻領域的未來。Sora不僅是一個里程碑式的產品&#xf…

java面試題之SpringMVC篇

Spring MVC的工作原理 Spring MVC的工作原理如下&#xff1a; DispatcherServlet 接收用戶的請求找到用于處理request的 handler 和 Interceptors&#xff0c;構造成 HandlerExecutionChain 執行鏈找到 handler 相對應的 HandlerAdapter執行所有注冊攔截器的preHandler方法調…

音視頻面試題集錦

下面是音視頻開發面試題精選&#xff1a; 1、談談 iOS 音視頻采集相關接口和數據結構的設計&#xff1f;2、如何降低處理音視頻鏈路中的內存峰值&#xff1f;3、OpenGL 如何實現二分屏效果&#xff1f;4、使用 OpenGL 繪制時對于二維坐標需要注意什么&#xff1f; 1、談談 iO…

Vue中如何使用dayjs

Day.js中文網Day.js是一個極簡的JavaScript庫&#xff0c;可以為現代瀏覽器解析、驗證、操作和顯示日期和時間。https://dayjs.fenxianglu.cn/ 單位不區別大小寫&#xff0c;支持復數和縮寫形式 單位縮寫描述 date D日期 [1,31]dayd星期 [0,6]&#xff08;星期日0&#xff0c…