JS发布-订阅模式(观察者模式)

不知道为什么就 准备记录一下这个模式。设计模式太多了。自己可能用到但是也不知道 。但是这个模式自己开发中解决了一些问题,于是就记录一下吧。

概念:(该写的的还是写上吧...)

发布-订阅模式又叫观察者模式,他定义对象间一种一对多的关系依赖。当一个对象的状态发生改变时,所有依赖它的对象都将得到通知;

个人大白话理解:

你在苹果店预定了一台手机。但是没有货。于是你就留了手机号码预定一下(预定:订阅)。然后苹果店有货了打电话给你让你来买手机了(打电话给你:发布) 。就这样吧

作用:

1.观察者模式其实在我们日常开发中普遍纯在,比如redux、vue等技术方案 都是依赖这个实现的。好处呢 是替代传递回调函数的方案。 我们无需过多关注对象在异步 运行中的状态,只要关注对订阅的事件触发的点即可;

2.对象之间解耦。不用关心彼此的细节,有新的订阅者,发布在者也不需要修改。发布者需要修改时,订阅者也无需做什么处理。 互相不影响

开发场景?:

实际上,我们最简单的dom节点绑定事件函数,就是我们常用的发布-订阅模式 的体现:

document.body.addEventListener('click',function(){
console.log("做一些事情");
},false);
document.body.click();

上面代码实现什么事情,大家肯定都知道。知道这么回事就行吧。
下面实现一个简单的订阅者模式(直接贴代码吧)

//注册事件后面注册的会覆盖掉前面注册的
let msg = {
    eventContainer:{

    },
    on:function(eventName,callback){//注册事件
        this.eventContainer[eventName] = callback; 
    },
    emit:function(eventName,data){//触发事件
        let callback = this.eventContainer[eventName];
        if(typeof callback == 'function'){
            callback(data);
        }
    },
    remove:function(eventName){//移除事件
        delete(this.eventContainer[eventName]);
    }
}
module.exports = msg;

主要最近解决了小程序上的一个问题 。就是在跳转到微信卡卷后,我需要都对原先页面做一些影藏操作。但是卡卷返回值后,页面生命周期是不做任何改变的。于是就用了上面的代码解决了。

//如何使用
let msg = require("msg");
//订阅一个事件
 msg.on("app:closeModal", function () {
    //关闭一个模块
})
  //触发上面事件
 msg.emit("app:closeModal")

上面的实现呢 是简单版的。肯定有很多场景的 使用上没有考虑。比如命名冲突,后者会覆盖前者。 现在很多都集成了这个功能 比如node的event等。

总结吧

1.发布-订阅模式的优点非常显著。一为时间上的解耦 二位 对象之间的解耦,可以应用在异步编程中。帮助我们实现更松耦合的代码编写。
2.缺点的话: 创建订阅者本身就是消耗一定的时间和内存。并且创建了一个订阅者。可能一直都未被发布。这个订阅者就一直在内存中,也是一种资源的浪费。
该模式既然松耦合了。就弱化了对象之间的联系。 当有多个订阅者或者发布者都在一起时候。要定位一个问题,可能也是很艰难的事情了~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,750评论 2 17
  • 工厂模式 单体模式 模块模式 代理模式 职责链模式 命令模式 模板方法模式 策略模式 发布-订阅模式 中介者模式 ...
    HelloJames阅读 1,008评论 0 6
  • 发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都...
    yufawu阅读 753评论 0 6
  • javascript设计模式与开发实践 设计模式 每个设计模式我们需要从三点问题入手: 定义 作用 用法与实现 单...
    穿牛仔裤的蚊子阅读 4,057评论 0 13
  • 设计模式 单例 单例模式的核心思想是让指定的类只存在唯一一个实例。这意味着当你第二次使用相同的类去创建对象的时候,...
    代码上的蚂蚁阅读 503评论 0 0