亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

每日 30 秒 ? 發(fā)布與訂閱

_Suqin / 3572人閱讀

前言 
設(shè)計模式、發(fā)布、訂閱、Event、事件

分享一個開發(fā)中比較常用到的設(shè)計模式發(fā)布-訂閱模式也可以叫觀察者模式，在發(fā)布-訂閱模式中主要有兩個角色：發(fā)布者 和 訂閱者。

生活中最常用到的一個場景就是當(dāng)你在QQ空間發(fā)布一條心情的時候所有你的QQ好友都會收到你的QQ動態(tài)，在這個例子中 你 就是 發(fā)布者，而 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 方法來快速創(chuàng)建了一個內(nèi)部對象：

hub: Object.create(null)

使用 Array.prototype.forEach 來遍歷監(jiān)聽事件對應(yīng)的所有操作：

emit(event, data) {
    (this.hub[event] || []).forEach(handler => handler(data));
}

使用 Array.prototype.push 來存儲事件對應(yīng)的操作：

on(event, handler) {
    if (!this.hub[event]) this.hub[event] = [];
    this.hub[event].push(handler);
}

使用 Array.prototype.findIndex 來查詢事件對應(yīng)的操作并使用 Array.prototype.splice 來去除操作：

off(event, handler) {
    const i = (this.hub[event] || []).findIndex(h => h === handler);
    if (i > -1) this.hub[event].splice(i, 1);
}
使用場景

當(dāng)用戶輸入 表單數(shù)據(jù) 對 頁面數(shù)據(jù) 和 data 進行同步更新，反之當(dāng) data 被其他操作修改時 對 頁面數(shù)據(jù) 和 表單數(shù)據(jù) 進行同步更新，這樣就簡單的實現(xiàn)了一個類似 Vue 的數(shù)據(jù)雙向綁定。

記得在項目開發(fā)過程中 大叔 在一個 jQuery 的前端項目中為了方便數(shù)據(jù)的變更和維護引入了 Vue 使得項目變得臃腫和復(fù)雜，如果使用 發(fā)布-訂閱模式 則可以很方便的來實現(xiàn)這個操作而無需引入這么大的一個框架。

當(dāng)單頁面項目并不巨大，我們無需引入像 Redux 和 Vuex 這樣的數(shù)據(jù)管理庫，使用 發(fā)布-訂閱模式 也可以很方便的管理組件之間的數(shù)據(jù)變更和依賴更新。

結(jié)構(gòu)
用戶數(shù)據(jù)



    

        用戶名：
    

    

        密碼：
    





請輸入用戶數(shù)據(jù)
腳本
// 基礎(chǔ)表單數(shù)據(jù)
let data = {
    username: "",
    password: "",
}

const hub = createEventHub()

// 監(jiān)聽表單輸入事件
hub.on("oninput", (name) => {
    const dom = document.querySelector(`[name="${name}"]`)
    hub.emit("setFormData", { name, value: dom.value })
})

// 監(jiān)聽數(shù)據(jù)變更事件
hub.on("setFormData", ({ name, value }) => {
    data[name] = value
})

// 監(jiān)聽數(shù)據(jù)變更事件
hub.on("setFormData", ({ name, value }) => {
    const dom = document.querySelector(`#${name}`)
    dom.innerHTML = value
})

// 監(jiān)聽數(shù)據(jù)變更事件
hub.on("setFormData", ({ name, value }) => {
    const dom = document.querySelector(`[name="${name}"]`)
    dom.value = value
})

// 監(jiān)聽頁面數(shù)據(jù)提交事件
hub.on("submit", () => {
    // ajax 發(fā)送數(shù)據(jù)請
    // 這里用 setTimeout 來模擬 ajax 請求發(fā)送
    setTimeout(() => {
        alert("數(shù)據(jù)發(fā)送成功")
        hub.emit("resetFormData")
    }, 1000)
})

// 監(jiān)聽頁面數(shù)據(jù)提交事件
hub.on("resetFormData", () => {
    hub.emit("setFormData", { name: "username", value: "" })
    hub.emit("setFormData", { name: "password", value: "" })
})
一起成長 
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個 點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102506.html

相關(guān)文章

  • 每日 30 秒 ? 大家一起被捕吧

    showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 簡介 安全、注入攻擊、XSS 13歲女學(xué)生被捕：因發(fā)布 JavaScript 無限循環(huán)代碼。 這條新聞是來自 2019年3月10日 很多同學(xué)匆匆一瞥便滑動屏幕去看下一條消息了，并沒有去了解這段代碼是什么，怎么辦才能防止這個問題。事情發(fā)生后為了抗議日本...

    lbool 評論0 收藏0

  • JS每日一題:設(shè)計模式-如何理解觀察者(發(fā)布訂閱)模式?

    摘要：期設(shè)計模式如何理解觀察者發(fā)布訂閱模式定義觀察者模式又叫發(fā)布訂閱模式，它定義了一種一對多的關(guān)系，讓多個觀察者對象同時監(jiān)聽某一個主題對象，這個主題對象的狀態(tài)發(fā)生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己生活實例理解你今天去看一個 20190411期 設(shè)計模式-如何理解觀察者(發(fā)布訂閱)模式? 定義: 觀察者模式又叫發(fā)布訂閱模式（Publish/Subscribe），它定義了一...

    baishancloud 評論0 收藏0

  • 每日 30 秒 ? 你的錢可能正在變少

    程序員應(yīng)該懂的簡單理財知識 可能沒發(fā)現(xiàn) 移動支付讓我們生活更加便利，但是錢如果長期放在支付寶或微信效果等同于把錢藏在保險箱，最終它可能變得越來越少。跟著小二的步伐，一起探究一下為什么。 其實你知道 通貨膨脹 是一個在初中課本中就已經(jīng)提到過的詞，可是很多同學(xué)在應(yīng)付完考試后就把它拋之腦后。有個段子說得好： 學(xué)數(shù)學(xué)干嘛，買菜又用不上。 學(xué)英語干嘛，買菜又用不上。 學(xué)政史地干嘛，買菜又用不上。 一直...

    JouyPub 評論0 收藏0

  • 每日 30 秒 ? 千里姻緣一線牽

    簡介 SEO、鏈接、a 標(biāo)簽、HTTP 狀態(tài)碼、link 標(biāo)簽、alternate、canonical 唐朝有個小伙叫韋固喜歡在河邊玩，一天遇到一個老伯伯在月光下把兩塊石頭系在一起。小伙看到很好奇便問道系石頭做什么呢？老伯伯說我在給當(dāng)婚人牽線，這對石頭是一對夫妻。小伙問道：那我的妻子是誰呢？老伯伯說：就是村頭看菜園子的女孩兒。 小伙就好氣，本小伙玉樹臨風(fēng)、風(fēng)流倜儻怎么可以和菜園窮丑丫頭一起呢？第二...

    Arno 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<