JavaScript设计模式之观察者模式

简介

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

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

实现

创建观察者对象

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

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

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

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

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);      }    }12345678910111213141516

最后一个功能便是注销方法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);        }      }    }12345678910

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

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啦"}123456789101112131415161718192021222324252627

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

(0)

相关推荐

  • 这几种前端JavaScript方法封装你知道多少

    这几种前端JavaScript方法封装你知道多少

  • 从一个超时程序的设计聊聊定时器的方方面面

    目录 如何设计一个靠谱的超时程序 JS引擎的运行机制是怎样的? 如何避免程序卡顿? 如何判断H5程序是从后台台恢复过来的? 如何理解定时器的丢弃行为? 在开发中如何选择使用合适的定时器? 有没有一键回 ...

  • Angularjs实现一个Factory

    昨晚对项目程序进行重构,发现一些数据冗余非常严重,一些货币,单位等静态数据N个页面均有从数据库获取. 因此,Insus.NET想到了,把它们写成一个通用的方法.在页面中,直接去执行此通用的方法即可. ...

  • 17K star 仓库,解决 90% 的大厂基础面试题

    前言 笔者开源的前端进阶之道已有三年之久,至今也有 17k star,承蒙各位读者垂爱.在当下部分内容已经略微过时,因此决定提笔翻新内容. 翻新后的内容会全部集合在「干爆前端」中,有兴趣的读者可以前往 ...

  • PHP设计模式之观察者模式

    PHP设计模式之观察者模式 观察者,貌似在很多科幻作品中都会有这个角色的出现.比如我很喜欢的一部美剧<危机边缘>,在这个剧集中,观察者不停的穿越时空记录着各种各样的人或事.但是,设计模式中 ...

  • [PHP小课堂]PHP设计模式之观察者模式

    [PHP小课堂]PHP设计模式之观察者模式 关注公众号:[硬核项目经理]获取最新文章 添加微信/QQ好友:[DarkMatterZyCoder/149844827]免费得PHP.项目管理学习资料

  • 设计模式(20) 观察者模式

    观察者模式是一种平时接触较多的模式.它主要用于一对多的通知发布机制,当一个对象发生改变时自动通知其他对象,其他对象便做出相应的反应,同时保证了被观察对象与观察对象之间没有直接的依赖. GOF对观察者模 ...

  • 软件设计模式修炼 -- 观察者模式

    观察者模式是一种经常使用的设计模式,在软件系统中对象并不是孤立存在的,一个对象行为的改变可能会导致其他与之存在依赖关系的对象行为发生改变,观察者模式用于描述对象之间的依赖关系. 模式动机 很多情况下, ...

  • 图解Java设计模式之观察者模式

    天气预报项目需求 1)气象站可以将每天测量到的湿度.温度.气压等等以公告的形式发布出去(比如发布到自己的网站或第三方). 2)需要设计开放型API,便于其他第三方也能接入气象站获取数据. 3)提供温度 ...

  • JAVA设计模式之观察者模式

    JAVA设计模式之观察者模式

  • JavaScript设计模式基础(一)

    模式的起源 模式 起源于建筑学.20世纪70年代,哈佛大学建筑学博士Christopher Alexander和他的团队花大约20年,来研究为解决同一个问题而设计出的不同建筑结构,从中发现那些高质量设 ...

  • 设计模式之观察者模式(observer pattern)

    观察者模式主要用于处理对象间的一对多的关系,是一种对象行为模式.该模式的实际应用场景比较容易确认,当一个对象状态发生变化时,所有该对象的关注者均能收到状态变化通知,以进行相应的处理. 本文希望通过简单 ...

  • JAVA设计模式之观察者模式 - Observer

    有趣的事情发生时,可千万别错过了!有一个模式可以帮你的对象知悉现况,不会错过该对象感兴趣的事.对象甚至在运行时可决定是否要继续被通知.有了观察者,你将会消息灵通. 介绍 观察者模式的定义: 在对象之间 ...