美文网首页
前端设计模式--观察者模式和发布订阅模式

前端设计模式--观察者模式和发布订阅模式

作者: 冰红茶ht | 来源:发表于2018-10-23 10:28 被阅读0次

    【1】观察模式

    理解: 观察者模式有两个主要的特点
    1、观察者通过继承基类将自己注册到目标对象上(发布者)
    2、目标对象(发布者)提供了维护观察者的一系列方法(增、删、遍历执行)

    // 这种模式中 只有两个角色 1. 订阅者(观察者) 2 发布者 (目标对象)
        // 订阅者直接将事件注册到发布者
        // 发布者参数发生改变直接广播订阅者
        /**
         * 观察者模式我觉最主要的有两点 1 目标对象同时监管观察者 的增删执行
         * 2 观察者通过继承实现基类把自己注册到目标对象
        */
        class Observer{
          constructor(fn) {
            this.update = fn;
          }
        }
        class SubjectDish{
          constructor() {
            this.observerList = [];
          } 
          submit(observer) {
            console.log('--添加订阅' + observer.name);
            this.observerList.push(observer);
          }
          unsubmit(observer) {
            this.observerList.fliter(ob => {
              console.log('---取消订阅'+ observer.name);
              return ob !== observer;
            })
          }
          notify () {
            this.observerList.map(ob => ob.update());
          }
          onDishChange() {
            setTimeout(() => {
              this.notify();
            }, 1000)
          }
        }
        const subject = new SubjectDish();
        const obserber1 = new Observer(function() {
          console.log('---加菜');
        });
        const obserber2 = new Observer(function() {
          console.log('---减菜');
        });
        // 菜品模块 订阅者
        subject.submit(obserber1);
        subject.submit(obserber2);
        // 发布者 加菜逻辑 像是服务端
        subject.onDishChange();
    
    观察者模式.png

    【2】发布订阅模式

    理解:订阅者 -> 事件控制中心 <- 发布者

    class EventCenter {
          constructor() {
              this.observer = {};
          }
          on(eventName, observer) {
              this.observer[eventName] = this.observer[eventName] || [];
              this.observer[eventName].push(observer);
          }
          emit(eventName, ...args) {
              this.observer[eventName].map(ob => ob(...args));
          }
          off(eventName) {
              delete this.observer[eventName];
          }
      }
      // eg:
      var observer = new EventCenter();
      // 这个是目标对象(订阅者) 要将一个函数托管到 中间控制器上
      observer.on('addDish', function() {
          console.log('---加菜函数');
      });
      // 事件触发(点了加菜的按钮)(发布者)
      // 发布者告知订阅者加菜了啦(广播)
      setTimeout(function() {
        observer.emit('addDish');
      }, 2000)
    
    发布订阅模式.png
    [参考文件] https://www.cnblogs.com/lovesong/p/5272752.html

    相关文章

      网友评论

          本文标题:前端设计模式--观察者模式和发布订阅模式

          本文链接:https://www.haomeiwen.com/subject/zsuujftx.html