设计模式-发布订阅模式

这段时间在看vue的双向绑定原理,知道了vue的核心三大件:Observer, Complie, Watcher。

Observer用于监听属性的变化,如有变动就通知 Watcher。

Compile负责解析元素节点的指令,如v-if,v-bind之类, 进行数据和回调函数的绑定。

Watcher收到属性变动的通知,就触发对应属性的回调函数,更新视图。

在学习 Watcher 的实现时,发现用的是发布订阅模式,也称观察者模式。

其实我们从开始用 js/jQuery 监听事件开始,就已经在用发布订阅模式了。

例如 DOM 中的 addEventListener, jquery 的 on 绑定事件。

发布订阅模式,比较好理解。举几个例子:

电饭煲煮饭,电饭煲本身并不知道要在什么时候跳到保温,它就只能等通知,等到饭烧好了,电饭煲的某个控制器就发出一个通知, 喂喂喂,饭熟了,不要再煮了。OK,电饭煲的电源控制器收到通知了,好,我跳保温。

dianfanbao.addEvent('煮好了', function(){jumpTo('保温');
});
复制代码

生活中的烧水啊,空调定时啊,你要买房子需要等开盘消息呀,都可以算是发布订阅模式吧。

发布订阅的核心思想就是维护一个对象,对象里面存放着各种事件的数组,根据不同的事件遍历不同的数组,执行回调。

一言不合上代码

class EventModel {constructor() {this.events = {};}on(eventType, fn) {if (!this.events[eventType]) {this.events[eventType] = [];}this.events[eventType].push(fn);}trigger(eventType, ...args) {let eventCallbacks = this.events[eventType];if (Array.isArray(eventCallbacks)) {eventCallbacks.forEach( fn => fn.apply(this, args) );}}off(eventType, fn) {let eventCallbacks = this.events[eventType];if ( !fn ) {eventCallbacks.length = 0;}let idx = eventCallbacks.indexOf(fn);if (idx !== -1) {eventCallbacks.splice(idx, 1);}}
}
复制代码

测试

let event = new EventModel();let f = x => alert(x);
event.on('click', f);
event.trigger('click', 2);   //alert(2);
event.off('click', f);
复制代码

这周末比较忙,就先简单记录一下,争取早日搞懂双向绑定原理,分享出来给有需要的人。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/390326.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

杜教筛--51nod1239 欧拉函数之和

求$\sum_{i1}^{n}\varphi (i)$,$n\leqslant 1e10$。 这里先把杜教筛的一般套路贴一下: 要求$S(n)\sum_{i1}^{n}f(i)$,而现在有一数论函数$g(i)$,$g(i)$的前缀和很无脑,且$f$和$g$的狄利克雷卷积的前缀和很无脑&#xf…

【Android Studio安装部署系列】目录

概述 从刚开始使用Android Studio到现在,下面所有目录下的操作,当时习惯性的把每一个整理成一个文档(其实就是简单文字描述截图);有些地方当时是一知半解,现在会稍微明白一些。正好赶上现在有时间。所以就想…

修改npm全局安装模式的路径

修改npm全局安装模式的路径 在正式写此文章之前,我得说一点血泪史。 刚学nodeJS不久,很纳闷为什么全局安装的模块在 node安装目录/node_modules‘ 中没找到!后来仔细看了下安装成功后的信息,才发现原来是自动安装在C盘了&#xff…

javascript创建类_如何使用JavaScript创建吹气效果

javascript创建类Have you ever wondered how you can create a realistic air blowing effect with JavaScript? Like the one shown on the evening TV shows, where multiple balls are being mixed up in a sphere-like object by leveraging air pressure? If you want …

Bootstrap 4:如何使顶部固定的Navbar保持在容器中而不拉伸?

There are many ways to make a fixed navbar stay inside a parents div container. Well go over the most straightforward one here.有很多方法可以使固定的导航栏停留在父级的div容器中。 我们将在这里介绍最简单的方法。 Imagine you have the following code, modified…

基于SpringBoot+Mybatis+Thymeleaf商品信息管理系统

github地址:github.com/zaiyunduan1…,如果对你有帮助,欢迎Star 主要用到的技术: 使用maven进行项目构建使用SpringbootMybatis搭建整个系统使用Thymeleaf模板技术实现页面静态化使用框架Bootstrap、JQuery开发前端界面使用MySQL和MongoDB分别…

在Mac上为自己手动编译安装一套PHP7的开发环境

首先你得去官网下载php7 beta1的版本 这里由于我是在mac上安装,所以就去下载linux相关的版本,地址也直接附上了php7 beta1windows版的官方也有发布详情猛戳:这里 解压安装包,进入源代码目录 tar -zxvf php-7.0.0beta1.tar.gz cd p…

卡特兰数 HDU2067 HDU4165 HDU1134

题目链接:https://vjudge.net/problem/HDU-2067 小兔的棋盘 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 11800 Accepted Submission(s): 5952 Problem Description小兔的叔叔从外面旅游回来给她…

Python的用途是什么? Python编程语言有10多种编码用途。

👋欢迎 (👋 Welcome) Hi! Please take a moment to think about this question: 嗨! 请花一点时间考虑这个问题: How is Python applied in real-world scenarios? Python如何在实际场景中应用? If you are learnin…

Publish/Subscribe

Publish/Subscribe 我们将会投递一个消息给多个消费者,这种模式被称为“publish/subscribe” 通俗的讲,前面的是点对点队列模型,现在讲的是发布订阅模型。 Exchanges producer:一个发送消息的用户应用程序 queue:一个存…

[转]在ROS下使用zeroconf配置多机通信

原文地址:http://www.corvin.cn/635.html,转载主要方便随时查阅,如有版权要求,请及时联系。 0x00 为何需要配置ROS多机通信 众所周知ROS是分布式系统,因此可以将机器人需要处理的复杂、计算量大的任务分解在多台机器上…

python中斐波那契数列_斐波那契数列–在Python,JavaScript,C ++,Java和Swift中进行了解释...

python中斐波那契数列by Pau Pavn通过保罗帕文(PauPavn) The Fibonacci sequence is, by definition, the integer sequence in which every number after the first two is the sum of the two preceding numbers. To simplify:根据定义,斐波那契数列是整数序列&a…

1583. 统计不开心的朋友

1583. 统计不开心的朋友 给你一份 n 位朋友的亲近程度列表,其中 n 总是 偶数 。 对每位朋友 i,preferences[i] 包含一份 按亲近程度从高到低排列 的朋友列表。换句话说,排在列表前面的朋友与 i 的亲近程度比排在列表后面的朋友更高。每个列…

uva 247(floyd传递闭包)

为什么&#xff0c;逗号后面&#xff0c;还有空格........ #include <iostream> #include <cstring> #include <algorithm> #include <cstdio> #include <vector> #include <map> using namespace std; const int maxn50; int d[maxn][max…

VS Code 的常用快捷键和插件

注:文章摘自 风行天下一万号 - 博客园 vs code 的常用快捷键 1、注释&#xff1a; 单行注释&#xff1a;[ctrlk,ctrlc] 或 ctrl/取消单行注释&#xff1a;[ctrlk,ctrlu] (按下ctrl不放&#xff0c;再按k u)多行注释&#xff1a;[altshiftA]多行注释&#xff1a;/**2、移动行&a…

python包numpy_NumPy Python科学计算软件包的终极指南

python包numpyNumPy (pronounced "numb pie") is one of the most important packages to grasp when you’re starting to learn Python.NumPy(读作“麻木派”)是您开始学习Python时要掌握的最重要的软件包之一。 The package is known for a very useful data str…

NGINX原理 之 SLAB分配机制(转)

1 引言 众所周知&#xff0c;操作系统使用伙伴系统管理内存&#xff0c;不仅会造成大量的内存碎片&#xff0c;同时处理效率也较低下。SLAB是一种内存管理机制&#xff0c;其拥有较高的处理效率&#xff0c;同时也有效的避免内存碎片的产生&#xff0c;其核心思想是预分配。其按…

apk之间数据共享的方式

1、四大组件之ContentProvider大法2、shareUserId3、apk均去远端获取配置文件&#xff08;或接口&#xff09;4、AIDL&#xff08;bindService&#xff09;5、SharePreference设置为MODE_WORLD_READABLE|MODE_WORLD_WRITEABLE模式&#xff0c;由于存在安全问题&#xff0c;已被…

蓝桥杯java 基础练习 十六进制转十进制

问题描述从键盘输入一个不超过8位的正的十六进制数字符串&#xff0c;将它转换为正的十进制数后输出。注&#xff1a;十六进制数中的10~15分别用大写的英文字母A、B、C、D、E、F表示。样例输入FFFF样例输出65535import java.math.BigInteger; import java.util.Scanner;public …

dynamic web module消失不见

2019独角兽企业重金招聘Python工程师标准>>> 方法1&#xff1a;在project Facets选项中勾选Dynamic Web Module即可 方法2&#xff1a; 我用eclipse对项目进行修改名称&#xff0c;修改成功后。项目就没有Deployment Descriptor&#xff08;如下图红色框中&#xff…