每日 30 秒 ? 發布與訂閱

_Suqin 發布于2019-08-23 15:53 / 3504人閱讀

前言

設計模式、發布、訂閱、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 訂閱發布模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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