js设计模式-观察者模式

定义:

观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系。观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信。

思路

定义一个对象,在对象中实现注册事件,关闭事件和触发事件。

js 简单实现

 var Observer = {
      data: {},
      // 订阅
      register: function (event, func) {
        if (this.data[event]) {
          this.data[event].push(func);
        } else {
          this.data[event] = [func];
        }
      },
      // 发布
      triggle: function (event) {
        let evtList = this.data[event];
        if (evtList) {
          for (let i = 0; i < evtList.length; i++) {
            evtList[i]();
          }
        } else {
          return false;
        }
      },
      // 退订
      off: function (event, func) {
        let evtList = this.data[event];
        if (evtList) {
          evtList.forEach(function (item, index, arr) {
            if (item === func) {
              arr.splice(index, 1);
            }
          })
        } else {
          return false;
        }
        if (!evtList.length) {
          delete this.data[event];
        }
      }
    }

优点:

  1. 支持简单的广播通信,自动通知所有已经订阅过的对象。
  2. 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
  3. 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

应用:

dom2级的事件处理程序就用了该模式。/ * node.js的很多模块也运用了该模式。*/

参考

posted @   稀算客  阅读(361)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)
点击右上角即可分享
微信分享提示