美文网首页
观察者模式/订阅者模式

观察者模式/订阅者模式

作者: ticktackkk | 来源:发表于2020-09-23 11:16 被阅读0次
   <script>
      //观察者模式
      var Observer = (function () {
        var _messages = {}; //容器
        return {
          //订阅信息接口
          regist: function (type, fn) {
            //消息类型和相应的处理方法
            //如果此信息不存咋则创建一个消息类型
            if (typeof _messages[type] === "undefined") {
              _messages[type] = [fn];
            } else {
              //存在则将动作方法推入到对应的动作序列中
              _messages[type].push(fn);
            }
          },
          //发布信息接口
          fire: function (type, args) {
            //消息类型个要传递的参数
            //如果这个消息没有被注册,则返回
            if (!_messages[type]) {
              return;
            }
            //定义消息信息
            var events = {
              type: type, //消息类型
              args: args || {}, //消息携带数据
            };
            for (let i = 0; i < _messages[type].length; i++) {
              //遍历动作
              _messages[type][i].call(this, events); //依次执行注册的消息对应的队列
            }
          },
          //移除信息接口
          remove: function (type, fn) {
            //如果消息队列存在
            if (_messages[type] instanceof Array) {
              for (let i = _messages[type].length - 1; i >= 0; i--) {
                //从最后一个消息开始便利
                //如果存在该动作则在消息动作序列中移除相应的动作
                _messages[type][i] === fn && _messages[type].splice(i, 1);
              }
            }
          },
        };
      })();

      var Student = function (result) {
        var that = this;
        this.result = result;
        this.say = function () {
          console.log(that.result);
        };
      };
      Student.prototype.answer = function (question) {
        Observer.regist(question, this.say);//学生订阅问题
      };
      Student.prototype.sleep = function (question) {
        console.log(
          this.result + "---->" + question + "--->已经睡着--->取消对老师的监听"
        );
        Observer.remove(question, this.say);//移除取消对老师的监听
      };
      var Teacher = function () {};
      Teacher.prototype.ask = function (question) {
        console.log("问题是:" + question);
        Observer.fire(question);//老师发布问题
      };
      var student1 = new Student("学生1回答问题");
      student2 = new Student("学生2回答问题");
      student3 = new Student("学生3回答问题");
      student1.answer("什么是设计模式");
      student1.answer("简述观察者模式");
      student2.answer("什么是设计模式");
      student3.answer("什么是设计模式");
      student3.answer("简述观察者模式");
      student3.sleep("简述观察者模式");

      var teacher = new Teacher();
      teacher.ask("什么是设计模式");
      teacher.ask("简述观察者模式");
    </script>

相关文章

  • 发布订阅模式(观察者模式)

    发布订阅模式(观察者模式) 发布订阅也叫观察者模式 发布 && 订阅 使用

  • 【设计模式】观察者模式 和 发布订阅模式

    目录:观察者模式发布-订阅模式观察者模式和发布订阅模式的区别实现vue数据双向绑定 (1)观察者模式 (1)概念 ...

  • 观察者模式&&订阅发布模式

    观察者模式&&订阅发布模式 参考:知乎-观察者模式 vs 发布订阅模式[https://zhuanlan.zhih...

  • 发布订阅和观察者模式的区别

    有些人认为观察者模式就是发布订阅模式,实际上观察者模式是包含了订阅发布模式,发布订阅模式只是观察者模式中的一种。观...

  • RxJava基础—观察者模式

    设计模式-观察者模式 观察者模式:观察者模式(有时又被称为发布(publish )-订阅(Subscribe)模式...

  • 观察者模式和发布订阅模式的区别

    观察者模式和发布订阅模式最大的区别就是发布订阅模式有个事件调度中心。 在观察者模式中,观察者需要直接订阅目标事件;...

  • vue响应式数据理解

    前言 观察者模式理解 首先需要对发布订阅和观察者模式有所了解。发布-订阅vs观察者模式。 观察者模式是一种 一对多...

  • 观察者模式

    观察者模式概念 观察者模式是对象的行为模式,又叫作发布-订阅(publish/subscrible)模式。 观察者...

  • 设计模式-观察者模式

    观察者模式介绍 观察者模式定义 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为...

  • 观察者模式

    观察者模式 观察者模式的定义 观察者模式(Observer Pattern)也叫做发布订阅模式(Publish/s...

网友评论

      本文标题:观察者模式/订阅者模式

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