观察者模式 & 发布-订阅模式(设计模式与开发实践 P8)

文章目录

观察者模式

定义:他用来定义对象之间一种一对多的依赖关系,当一个对象状态发生改变时,所有依赖他的对象都会得到通知

运用

如果我们使用过 DOM 上的事件函数,那就接触过观察者模式

javascript 复制代码
document.body.addEventListener(
  "click",
  function () {
    console.log("body clicked");
  },
  false
);

document.body.click(); // 输出:body clicked

这段代码中 body 上添加了一个订阅者,而 document.body.click() 向所有订阅者发送了点击事件~

我们可以随意添加 订阅者 而不会影响 发布者 代码的编写

实现

接下来尝试实现一些自定义事件,通过 listen 监听某个名为 key 的事件,通过 trigger 执行事件回调函数

javascript 复制代码
var saleOffices = {
  clientList: [], // 缓存列表,存放订阅者的回调函数
  listen: function (key, fn) {
    // 增加订阅者
    if (!this.clientList[key]) {
      // 如果还没有订阅过此类消息,给该类消息创建一个缓存列表
      this.clientList[key] = []; // 直接把函数推入数组
    }
    this.clientList[key].push(fn); // 订阅的消息添加进缓存列表
  },
  trigger: function () {
    // 发布消息
    var key = Array.prototype.shift.call(arguments); // 取出消息类型
    var fns = this.clientList[key]; // 取出该消息对应的回调函数集合
    if (!fns || fns.length === 0) {
      // 如果没有订阅该消息,则返回
      return false;
    }
    for (var i = 0, fn; (fn = fns[i++]); ) {
      // 依次执行订阅的回调函数
      fn.apply(this, arguments); // arguments 是发布消息时带上的参数
    }
  },
};

// ----- 测试 -----
saleOffices.listen("squareMeter88", function (price) {
  // 小明订阅消息
  console.log("小明得到价格= " + price);
});

saleOffices.listen("squareMeter100", function (price) {
  // 小红订阅消息
  console.log("小红价格= " + price);
});

saleOffices.trigger("squareMeter88", 2000000); // 输出:2000000
相关推荐
麦麦鸡腿堡4 小时前
Java的单例设计模式-饿汉式
java·开发语言·设计模式
哆啦A梦15884 小时前
点击Top切换数据
前端·javascript·vue.js
@PHARAOH5 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
搬砖也快乐5 小时前
23种设计模式总结
设计模式
专注前端30年6 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
YA3337 小时前
java设计模式六、装饰器模式
java·设计模式·装饰器模式
专注前端30年8 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js8 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ9 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办9 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js