JavaScript设计模式之观察者模式

目录

  • 简介
  • 实现
    • 创建观察者对象

简介

        观察者模式由称作发布-订阅者模式或消息机制,该模式定义一种依赖关系,旨在解决主体对象与观察者之间功能的耦合。

        例如案例:想实现一个评论模块,当用户发送消息时,在展示模块末尾追加新的评论,同时用户消息模块中的消息数量会相应增加,删除评论时,用户消息模块数量减少。但是该评论模块之前有有多个开发人员参与,模块之间闭包独立,不想让新实现的代码参与到之前的项目代码中,那么观察者模式就是解决该需求的利器。

实现

创建观察者对象

首先需要先创建一个观察者对象,该对象里面有一个消息容器,并且存在订阅消息,取消订阅消息,发送订阅消息这三个动作方法。

var Observer = (function () {
     
  var _message = {
     };
  return {
     
    //注册订阅信息
    register: function () {
     },
    //取消订阅信息
    remove: function () {
     },
    //发送订阅信息
    send: function () {
     },
  };
})();

以上已经形成观察者对象的雏形,接下来就是实现这三个方法了。register作用是将订阅者注册的消息推入消息队列,因此该方法接收两个数,消息类型及相应的处理动作。

 register: function (type, fn) {
     
      //如果该消息类型尚未存在则先创建一个消息类型
      if (typeof _message[type] === undefined) {
     
        _message[type] = fn;
      } else {
     
        //如果此消息类型存在了,则向该类型的消息序列中推入一条执行方法
        _messagep[type].push(fn);
      }
    }

send方法作用是当观察者发布一条消息时,将所有订阅者订阅的消息一次性全部执行。该方法接收两个参数,消息类型及动作执行时需要传递的参数。

    send: function (type, args) {
     
      //校验当前消息队列中有没有注册该类型
      if (!_message[type]) return;
      //定义消息信息
      var events = {
     
        type: type,
        args: args || {
     },
      };
      i = 0;
      len = _message[type].length;
      //遍历消息动作
      for (; i < len; i++) {
     
        //依次执行注册消息对应的动
        _message[type][i].call(this, events);
      }
    }

最后一个功能便是注销方法remove,其功能是将订阅者注销的消息从消息队列中移除,因此我们需要两个参数,消息类型和要执行的某一个动作。

 remove: function (type, fn) {
     
      //如果该消息动作队列存在
      if (_message[type] instanceof Array) {
     
        var i = _message[type].length - 1;
        for (; i >= 0; i--) {
     
          //如果该动作存在则在消息动作序列中移除相应动作
          _message[type][i] == fn && _message[type].splice(i, 1);
        }
      }
    }

三个方法均已经实现,下面就来测试吧

var fn_1 = function (param) {
     
  console.log("type_1_1", param);
};
var fn_2 = function (param) {
     
  console.log("type_1_2", param);
};
var fn_3 = function (param) {
     
  console.log("type_2_1", param);
};
var fn_4 = function (param) {
     
  console.log("type_2_2", param);
};
Observer.register("type_1", fn_1);
Observer.register("type_1", fn_2);

Observer.register("type_2", fn_3);
Observer.register("type_2", fn_4);

Observer.remove("type_2", fn_4);

Observer.send("type_1", "吃饭啦!");
Observer.send("type_2", "唱k啦");

//打印结果
//type_1_1 {type: "type_1", args: "吃饭啦!"}
//type_1_2 {type: "type_1", args: "吃饭啦!"}
//type_2_1 {type: "type_2", args: "唱k啦"}

代码地址:https://github.com/CcXxWw112233/base_demo/tree/master/designMode/observer

你可能感兴趣的:(设计模式,javascript)