zoukankan      html  css  js  c++  java
  • js模式-观察者模式

    // 主题,接收状态变化,触发每个观察者
    class Subject {
      constructor() {
          this.state = 0
          this.observers = []
      }
      getState() {
          return this.state
      }
      setState(state) {
          this.state = state
          this.notifyAllObservers()
      }
      attach(observer) {
          this.observers.push(observer)
      }
      notifyAllObservers() {
          this.observers.forEach(observer => {
              observer.update()
          })
      }
    }
    
    // 观察者,等待被触发
    class Observer {
      constructor(name, subject) {
          this.name = name
          this.subject = subject
          this.subject.attach(this)
      }
      update() {
          console.log(`${this.name} update, state: ${this.subject.getState()}`)
      }
    }
    
    // 测试代码
    let s = new Subject()
    let o1 = new Observer('o1', s)
    let o2 = new Observer('o2', s)
    let o3 = new Observer('o3', s)
    
    s.setState(1)
    

    被观察者的状态更改时,观察者执行相对的事情

    观察者和被观察者,耦合度比较小,更改的代码不写在被观察者里面

    一个被观察者可以有多个观察者

    其他应用场景

    1.vue 的 watch 监听 变量的更新

    2. promise then 异步的then 可以有多个then func是被观察者。被观察者更新值,被观察者执行,代码耦合比较小。可以有多个被观察者。

    var func = new Promise((resolve, reject) => {
        resolve('返回值');
    });
    
    func.then(function(){
        console.log("观察者执行....");
    });
    
    func.then(function(){
        console.log("观察者执行....");
    });
    
  • 相关阅读:
    解决动态加载数据滑动失效
    js 判断手机横竖屏的实现方法(不依赖任何其他库)
    element-ui upload 图片格式验证 ,文件验证
    swiper 绑定点击事件 点击失效处理
    vue项目
    [Qt]自定义表头实现过滤功能
    字符串截取问题
    mysql超时机制
    nginx原理
    高可用集群(主从模式)
  • 原文地址:https://www.cnblogs.com/chenyi4/p/11413920.html
Copyright © 2011-2022 走看看