成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

_Suqin / 3534人閱讀

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

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

生活中最常用到的一個(gè)場(chǎng)景就是當(dāng)你在QQ空間發(fā)布一條心情的時(shí)候所有你的QQ好友都會(huì)收到你的QQ動(dòng)態(tài)，在這個(gè)例子中 你 就是 發(fā)布者，而 QQ 好友 則會(huì)是訂閱者。

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 方法來(lái)快速創(chuàng)建了一個(gè)內(nèi)部對(duì)象：

hub: Object.create(null)

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

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

使用 Array.prototype.push 來(lái)存儲(chǔ)事件對(duì)應(yīng)的操作：

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

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

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

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

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

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

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



    

        用戶名：
    

    

        密碼：
    





請(qǐng)輸入用戶數(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)聽頁(yè)面數(shù)據(jù)提交事件
hub.on("submit", () => {
    // ajax 發(fā)送數(shù)據(jù)請(qǐng)
    // 這里用 setTimeout 來(lái)模擬 ajax 請(qǐng)求發(fā)送
    setTimeout(() => {
        alert("數(shù)據(jù)發(fā)送成功")
        hub.emit("resetFormData")
    }, 1000)
})

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

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

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

本文原稿來(lái)自 PushMeTop

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102506.html

相關(guān)文章

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

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

    lbool 評(píng)論0 收藏0

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

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

    baishancloud 評(píng)論0 收藏0

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

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

    JouyPub 評(píng)論0 收藏0

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

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

    Arno 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<