每日 30 秒 ⏱ 发布与订阅

_Suqin 发布于2019-08-23 15:53 / 3500人阅读

前言

设计模式、发布、订阅、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

GPU云服务器云服务器发布订阅模式订阅发布模式 sqlserver发布订阅 DTS 订阅发布模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102506.html

每日 30 秒 ⏱ 大家一起被捕吧

showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 简介安全、注入攻击、XSS 13岁女学生被捕：因发布 JavaScript 无限循环代码。这条新闻是来自 2019年3月10日很多同学匆匆一瞥便滑动屏幕去看下一条消息了，并没有去了解这段代码是什么，怎么办才能防止这个问题。事情发生后为了抗议日本...

lbool 2019-08-23 16:11 评论0 收藏0
JS每日一题:设计模式-如何理解观察者(发布订阅)模式?

摘要：期设计模式如何理解观察者发布订阅模式定义观察者模式又叫发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己生活实例理解你今天去看一个 20190411期设计模式-如何理解观察者(发布订阅)模式? 定义: 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一...

baishancloud 2019-08-23 16:53 评论0 收藏0
每日 30 秒 ⏱ 你的钱可能正在变少

程序员应该懂的简单理财知识可能没发现移动支付让我们生活更加便利，但是钱如果长期放在支付宝或微信效果等同于把钱藏在保险箱，最终它可能变得越来越少。跟着小二的步伐，一起探究一下为什么。其实你知道通货膨胀是一个在初中课本中就已经提到过的词，可是很多同学在应付完考试后就把它抛之脑后。有个段子说得好：学数学干嘛，买菜又用不上。学英语干嘛，买菜又用不上。学政史地干嘛，买菜又用不上。一直...

JouyPub 2019-05-27 17:42 评论0 收藏0
每日 30 秒 ⏱ 千里姻缘一线牵

简介 SEO、链接、a 标签、HTTP 状态码、link 标签、alternate、canonical 唐朝有个小伙叫韦固喜欢在河边玩，一天遇到一个老伯伯在月光下把两块石头系在一起。小伙看到很好奇便问道系石头做什么呢？老伯伯说我在给当婚人牵线，这对石头是一对夫妻。小伙问道：那我的妻子是谁呢？老伯伯说：就是村头看菜园子的女孩儿。小伙就好气，本小伙玉树临风、风流倜傥怎么可以和菜园穷丑丫头一起呢？第二...

Arno 2019-08-02 16:11 评论0 收藏0