前言
设计模式、发布、订阅、Event、事件
分享一个开发中比较常用到的设计模式发布-订阅模式也可以叫观察者模式，在发布-订阅模式中主要有两个角色：发布者 和 订阅者。
生活中最常用到的一个场景就是当你在QQ空间发布一条心情的时候所有你的QQ好友都会收到你的QQ动态，在这个例子中 你 就是 发布者，而 QQ 好友 则会是订阅者。
const createEventHub = () => ({
hub: Object.create(null),
emit(event, data) {
(this.hub[event] || []).forEach(handler => handler(data));
},
on(event, handler) {
if (!this.hub[event]) this.hub[event] = [];
this.hub[event].push(handler);
},
off(event, handler) {
const i = (this.hub[event] || []).findIndex(h => h === handler);
if (i > -1) this.hub[event].splice(i, 1);
}
});
代码分析
使用 Object.prototype.create 方法来快速创建了一个内部对象：
hub: Object.create(null)
使用 Array.prototype.forEach 来遍历监听事件对应的所有操作：
emit(event, data) {
(this.hub[event] || []).forEach(handler => handler(data));
}
使用 Array.prototype.push 来存储事件对应的操作：
on(event, handler) {
if (!this.hub[event]) this.hub[event] = [];
this.hub[event].push(handler);
}
使用 Array.prototype.findIndex 来查询事件对应的操作并使用 Array.prototype.splice 来去除操作：
off(event, handler) {
const i = (this.hub[event] || []).findIndex(h => h === handler);
if (i > -1) this.hub[event].splice(i, 1);
}
使用场景
当用户输入 表单数据 对 页面数据 和 data 进行同步更新，反之当 data 被其他操作修改时 对 页面数据 和 表单数据 进行同步更新，这样就简单的实现了一个类似 Vue 的数据双向绑定。
记得在项目开发过程中 大叔 在一个 jQuery 的前端项目中为了方便数据的变更和维护引入了 Vue 使得项目变得臃肿和复杂，如果使用 发布-订阅模式 则可以很方便的来实现这个操作而无需引入这么大的一个框架。
当单页面项目并不巨大，我们无需引入像 Redux 和 Vuex 这样的数据管理库，使用 发布-订阅模式 也可以很方便的管理组件之间的数据变更和依赖更新。
用户数据
用户名：
密码：
请输入用户数据
// 基础表单数据
let data = {
username: "",
password: "",
}
const hub = createEventHub()
// 监听表单输入事件
hub.on("oninput", (name) => {
const dom = document.querySelector(`[name="${name}"]`)
hub.emit("setFormData", { name, value: dom.value })
})
// 监听数据变更事件
hub.on("setFormData", ({ name, value }) => {
data[name] = value
})
// 监听数据变更事件
hub.on("setFormData", ({ name, value }) => {
const dom = document.querySelector(`#${name}`)
dom.innerHTML = value
})
// 监听数据变更事件
hub.on("setFormData", ({ name, value }) => {
const dom = document.querySelector(`[name="${name}"]`)
dom.value = value
})
// 监听页面数据提交事件
hub.on("submit", () => {
// ajax 发送数据请
// 这里用 setTimeout 来模拟 ajax 请求发送
setTimeout(() => {
alert("数据发送成功")
hub.emit("resetFormData")
}, 1000)
})
// 监听页面数据提交事件
hub.on("resetFormData", () => {
hub.emit("setFormData", { name: "username", value: "" })
hub.emit("setFormData", { name: "password", value: "" })
})
一起成长
在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。
如果您想让更多人看到文章可以点个 点赞。
如果您想激励小二可以到 Github 给个 小星星。
如果您想与小二更多交流添加微信 m353839115。
本文原稿来自 PushMeTop
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102506.html
showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 简介 安全、注入攻击、XSS 13岁女学生被捕：因发布 JavaScript 无限循环代码。 这条新闻是来自 2019年3月10日 很多同学匆匆一瞥便滑动屏幕去看下一条消息了，并没有去了解这段代码是什么，怎么办才能防止这个问题。事情发生后为了抗议日本...
摘要：期设计模式如何理解观察者发布订阅模式定义观察者模式又叫发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己生活实例理解你今天去看一个 20190411期 设计模式-如何理解观察者(发布订阅)模式? 定义: 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一...
程序员应该懂的简单理财知识 可能没发现 移动支付让我们生活更加便利，但是钱如果长期放在支付宝或微信效果等同于把钱藏在保险箱，最终它可能变得越来越少。跟着小二的步伐，一起探究一下为什么。 其实你知道 通货膨胀 是一个在初中课本中就已经提到过的词，可是很多同学在应付完考试后就把它抛之脑后。有个段子说得好： 学数学干嘛，买菜又用不上。 学英语干嘛，买菜又用不上。 学政史地干嘛，买菜又用不上。 一直...
摘要：苹果在其中所扮演的角色类似发行商，他们会与游戏开发者开发商合作，同时对玩家推出按时付费的订阅服务。公布之后，苹果中国官网就立即更新了相关内容，也意味着这项服务很有可能被引进国内。发布会结束之后，苹果立即推送了版本。 苹果于北京时间2019年3月26日在史蒂夫·乔布斯剧院（Steve Jobs Theater）举行春季特别活动，和以往的春季发布会不同，此处的发布会上，苹果并没有发布什么重...
简介 SEO、链接、a 标签、HTTP 状态码、link 标签、alternate、canonical 唐朝有个小伙叫韦固喜欢在河边玩，一天遇到一个老伯伯在月光下把两块石头系在一起。小伙看到很好奇便问道系石头做什么呢？老伯伯说我在给当婚人牵线，这对石头是一对夫妻。小伙问道：那我的妻子是谁呢？老伯伯说：就是村头看菜园子的女孩儿。 小伙就好气，本小伙玉树临风、风流倜傥怎么可以和菜园穷丑丫头一起呢？第二...
阅读 1200·2021-09-27 13:56
阅读 2202·2019-08-26 10:35
阅读 3370·2019-08-23 15:53
阅读 1736·2019-08-23 14:42
阅读 1126·2019-08-23 14:33
阅读 3442·2019-08-23 12:36
阅读 1825·2019-08-22 18:46
阅读 886·2019-08-22 14:06
