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

观察者模式/订阅者模式

作者: 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>
    

    相关文章

      网友评论

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

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