JavaScript设计模式(一)：观察者模式

最新推荐文章于 2023-02-03 15:57:30 发布

原创最新推荐文章于 2023-02-03 15:57:30 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #设计模式 #观察者模式

本文介绍了一种常用的设计模式——观察者模式，通过一个商店销售新款手机的案例，详细阐述了观察者模式的工作原理及其如何解决实际问题。文章还提供了一个简单的代码实现示例。

1.什么是观察者模式？

观察者模式是一种行为设计模式，允许你定义一种订阅机制，可在对象事件发生时通知多个“观察”该对象的其他对象，观察者模式也被称为事件订阅者、监听者、Event-Subscriber、Listener、Observer

2.设计观察者模式所遇到的问题

1.假如我们应用场景是一个商店（卖最新款手机），手机刚发布，陆陆续续的往实体店发货进行线下售卖，顾客每天都会去到商店询问新款手机是否到货了，但如果没有到货，顾客只能空手而归

2.假如我们的应用场景还是一个商店（卖最新款手机），华为最新款手机到货了，这个时候商店用邮件的方式告诉所有顾客，华为最新款手机到货了，这样，部分顾客就无需反复前往商店了，但也可能会惹恼对新产品没有兴趣的其他顾客

2.1两个场景的矛盾

我们似乎遇到了一个矛盾：要么让顾客浪费时间检查产品是否到货，要么让商店浪费资源去通知没有需求的顾客

3.面对矛盾的解决方案

我们只需要安排一个发布消息的人（发布者publisher）对当时交了华为最新款手机订金的人（订阅者subscribers），发送邮件告诉他们华为最新款手机到店了，就可以避免这种矛盾的发生了。

3.1解决方案的重要逻辑

发布者机制里面要对付了定金的订阅者进行登记，所以肯定得有一个updata事件进行更新处理订阅者的消息

3.2解决方案中的发布者机制

1）一个用于存储订阅者对象引用的列表成员变量；（subscribers数组对象）

2）几个用于添加或删除该列表中订阅者的公有方法；

3) 一个消息发布方法；（notifysubscribers方法）

3.3解决方案中的订阅者机制

1) 一个更新状态的方法（update方法），也就是收到发布消息后做的举动（去店里取手机）

3.4类比真实世界

3.5代码实现

    class Publisher{
      // 发布者机制
      constructor(){
        this.subscribers = [];
        this.state = '最新款华为手机到店了!'
      }
      addsubscribers(subscriber){
        // 添加订阅者名单
        this.subscribers.push(subscriber)
      }
      removesubscribers(subscriber){
        // 移除订阅者名单
        this.subscribers.forEach((item) => {
          if(item.id === subscriber.id){
            let index = this.subscribers.indexOf(item);
            this.subscribers.splice(index,1);
          }
        })
        return '-------finish-------'; // 这里是附和谷歌浏览器的函数调用返回undefined的解决 
                                       // 方式
      }
      notifysubscriber(){
        // 状态更新，发布消息
        this.subscribers.forEach( item => {
          item.update(this.state);
        })
      }
    }
    class Subscriber{
      // 订阅者机制
      constructor(name,id){
        this.name = name
        this.id = id
      }
      update(state){  // 订阅者根据发布的消息做出的举动
        console.log(`${state}现在我要去店里面取最新款华为手机`)
      }
    }
    let publisher = new Publisher(); // 发布者
    let subscriber = new Subscriber('ldh',1); // 订阅者1
    let subscriber1 = new Subscriber('hzh',2); // 订阅者2
    let subscriber2 = new Subscriber('hxh',3); // 订阅者3
    publisher.addsubscribers(subscriber); // 订阅者登记
    publisher.addsubscribers(subscriber1); // 订阅者登记
    publisher.addsubscribers(subscriber2); // 订阅者登记
    publisher.notifysubscriber(); // 手机到了，通知订阅者
    publisher.removesubscribers(subscriber1); // 订阅者2取消了订阅