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

資訊專欄INFORMATION COLUMN

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

baishancloud / 1772人閱讀

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

20190411期

設(shè)計(jì)模式-如何理解觀察者(發(fā)布訂閱)模式?

定義: 觀察者模式又叫發(fā)布訂閱模式（Publish/Subscribe），它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生變化時(shí)就會(huì)通知所有的觀察者對(duì)象，使得它們能夠自動(dòng)更新自己

生活實(shí)例理解：你今天去看一個(gè)樓盤(pán)，去了之后發(fā)布樓盤(pán)還沒(méi)有對(duì)外銷售，你不知道樓盤(pán)時(shí)候會(huì)對(duì)外銷售，于是你找了樓盤(pán)的負(fù)責(zé)人，告訴他什么時(shí)候樓盤(pán)開(kāi)始銷售了電話通知你，然后想要買(mǎi)的人不是你一個(gè)，其它人也是通過(guò)留電話的方式給銷售負(fù)責(zé)人來(lái)及時(shí)獲取消息

不難發(fā)現(xiàn),上面的例子正好對(duì)應(yīng)上我們的觀察者模式的定義, 多個(gè)想要買(mǎi)房的人同時(shí)訂閱了一個(gè)主題(樓盤(pán)對(duì)外銷售)，這個(gè)主題更新時(shí)，這些觀察者(買(mǎi)房)都會(huì)作出相應(yīng)的動(dòng)作

最熟悉的代碼理解:

實(shí)際上，我們經(jīng)常用到的事件綁定就是發(fā)布訂閱模式

在這里我們想在用戶點(diǎn)擊的時(shí)候做出相應(yīng)的處理，但是我們不知道用戶在什么時(shí)候去點(diǎn)擊，所以我們?nèi)ビ嗛哹ody上的click事件，在這里我們還可以去隨意增加訂閱者，這樣并不影響我們的發(fā)布者

document.body.addEventListener("click",function(){
  console.log("JS 每日一題")
},false)

document.body.addEventListener("click",function(){
  console.log("今天你打卡了嗎?")
},false)
實(shí)現(xiàn)一個(gè)簡(jiǎn)版的觀察者

首先我們順一下思路

誰(shuí)是發(fā)布者

誰(shuí)是訂閱者

發(fā)生改變時(shí)怎么通知訂閱者作出相應(yīng)動(dòng)作

const Boss = {} //樓盤(pán)銷售負(fù)責(zé)人
Boss.clientList = []; // 存放訂閱者的回調(diào)
Boss.listen = function(fn){ // 增加訂閱者
    this.clientList.push(fn); // 將買(mǎi)房人的號(hào)碼緩存起來(lái)
}
Boss.trigger = function(){ // 發(fā)布消息
    for(var i=0,fn; fn= this.clientList[i++];){
      fn.apply(this,arguments)
    }
}

Boss.listen(function(msg){
  console.log(msg) // 開(kāi)始銷售了
})

cdBoss.trigger("開(kāi)始銷售了") // 發(fā)布消息

我們已經(jīng)實(shí)現(xiàn)在最簡(jiǎn)易版的發(fā)布訂閱，但其實(shí)是存在問(wèn)題的，每個(gè)人可能訂閱戶型是不同的, 上面我們實(shí)現(xiàn)的是，只要一開(kāi)始銷售就通知所有訂閱的人，顯然是不合理的，我們將代碼再來(lái)改寫(xiě)一下

// 訂閱時(shí)給其加一個(gè)key做為標(biāo)識(shí)，就相當(dāng)于key就是訂閱者的身份
Boss.listen = function(key, fn){
    if (!this.clientList[key]) {
      // 如果沒(méi)有此類訂閱，就給該類訂閱增加一個(gè)緩存列表 
      this.clientList[key] = []
    }
    this.clientList[key].push(fn); 
}

Boss.trigger = function(){ // 發(fā)布消息
    const key = Array.prototype.shift.call(arguments),
    // 取出消息類型
    fns = this.clientList[key] 
    if (!fns || !fns.length) return // 如果該類消息沒(méi)有訂閱直接返回
    for (var i = 0, fn; fn = fns[i++]) {
        fn.apply(this, arguments)
    }
}

Boss.listen("老王", function (msg) {
  console.log("老王訂閱戶型" + cdName)
}) 
Boss.listen("老李", function (cdName) {
  console.log("老李訂閱戶型" + cdName)
}) 
Boss.trigger("老王", "143平米");
Boss.trigger("老李", "888平米");

好了，經(jīng)過(guò)改寫(xiě)，消息只會(huì)推送給相關(guān)的訂閱者了

總結(jié)

時(shí)間上的解藕

對(duì)象之間的解藕

總的來(lái)說(shuō)，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。從而使得各自的變化都不會(huì)影響到另一邊的變化

關(guān)于JS每日一題

JS每日一題可以看成是一個(gè)語(yǔ)音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語(yǔ)音形式來(lái)完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點(diǎn)擊加入答題

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

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

相關(guān)文章

  • JS設(shè)計(jì)模式入門(mén)和框架中的實(shí)踐

    摘要：下面筆者就結(jié)合諸如的的里面的里面的來(lái)給大家簡(jiǎn)單介紹下設(shè)計(jì)模式在這些庫(kù)語(yǔ)法和框架中的使用。筆者認(rèn)為把設(shè)計(jì)模式單獨(dú)抽象出來(lái)探討，就和算法中抽象出來(lái)冒泡排序一樣，是為了描述一種常用的。 本文為饑人谷講師slashhuang原創(chuàng)文章。 在編寫(xiě)JS代碼的過(guò)程中，運(yùn)用一定的設(shè)計(jì)模式可以讓我們的代碼更加優(yōu)雅、靈活。 下面筆者就結(jié)合諸如redux的subscribe、ES6的class、vue里面的$...

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

  • JS設(shè)計(jì)模式入門(mén)和框架中的實(shí)踐

    摘要：下面筆者就結(jié)合諸如的的里面的里面的來(lái)給大家簡(jiǎn)單介紹下設(shè)計(jì)模式在這些庫(kù)語(yǔ)法和框架中的使用。筆者認(rèn)為把設(shè)計(jì)模式單獨(dú)抽象出來(lái)探討，就和算法中抽象出來(lái)冒泡排序一樣，是為了描述一種常用的。 本文為饑人谷講師slashhuang原創(chuàng)文章 在編寫(xiě)JS代碼的過(guò)程中，運(yùn)用一定的設(shè)計(jì)模式可以讓我們的代碼更加優(yōu)雅、靈活。 下面筆者就結(jié)合諸如redux的subscribe、ES6的class、vue里面的$d...

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

  • JS每日一題：函數(shù)式編程中代碼組合(compose)如何理解?

    摘要：期函數(shù)式編程中代碼組合如何理解定義顧名思義，在函數(shù)式編程中，就是將幾個(gè)有特點(diǎn)的函數(shù)拼湊在一起，讓它們結(jié)合，產(chǎn)生一個(gè)嶄新的函數(shù)代碼理解一個(gè)將小寫(xiě)轉(zhuǎn)大寫(xiě)的函數(shù)一個(gè)在字符后加的函數(shù)將兩個(gè)函數(shù)組合起來(lái)這里假設(shè)我們實(shí)現(xiàn)了每日一題每日一題顯示結(jié)果里上面 20190315期 函數(shù)式編程中代碼組合(compose)如何理解? 定義: 顧名思義，在函數(shù)式編程中，Compose就是將幾個(gè)有特點(diǎn)的函數(shù)拼湊在...

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

  • JS每日一題: 小程序頁(yè)面之間如何通信?

    摘要：小程序頁(yè)面之間如何通信首先將通信的模型列舉出來(lái)分為以下幾種兄弟頁(yè)面間通信父路徑頁(yè)面向子路徑頁(yè)面通信子路徑頁(yè)面向父路徑頁(yè)面通信通信的方式本地存儲(chǔ)全局對(duì)象發(fā)布訂閱緩存整個(gè)至利用激活方法，通過(guò)傳遞數(shù)據(jù)清空上次通信數(shù)據(jù)同一樣，利用激活方法，通過(guò)讀寫(xiě) 20190227 小程序頁(yè)面之間如何通信? 首先將通信的模型列舉出來(lái), 分為以下幾種 兄弟頁(yè)面間通信 父路徑頁(yè)面向子路徑頁(yè)面通信 子路徑頁(yè)面向父...

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

  • JS每日一題:設(shè)計(jì)模式-如何理解工廠模式?

    摘要：期設(shè)計(jì)模式如何理解工廠模式定義創(chuàng)建對(duì)象的接口，讓子類決定實(shí)例化哪個(gè)類。適用場(chǎng)景需要根據(jù)不同參數(shù)產(chǎn)生不同實(shí)例，這些實(shí)例都有相同的行為這時(shí)候我們可以使用工廠模式，簡(jiǎn)化實(shí)現(xiàn)的過(guò)程，同時(shí)也可以減少每種對(duì)象所需的代碼量。 20190408期 設(shè)計(jì)模式-如何理解工廠模式? 定義: 創(chuàng)建對(duì)象的接口，讓子類決定實(shí)例化哪個(gè)類。工廠方法將類的實(shí)例化延遲到子類,而子類可以重寫(xiě)接口方法以便創(chuàng)建的時(shí)候指定自己的...

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

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

0條評(píng)論

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