資訊專欄INFORMATION COLUMN
摘要：今天我們討論的是發(fā)布觀察者模式，也叫訂閱模式，在里，該模式要如何實(shí)現(xiàn)呢，首先我們先看一個(gè)現(xiàn)實(shí)生活中的例子小明在工作幾年后，準(zhǔn)備買房結(jié)婚，于是他到售樓處，找售樓人員詢問當(dāng)前的價(jià)格，得知售樓價(jià)每平是小明好幾個(gè)月工資的時(shí)候，小明猶豫了，于是他回
今天我們討論的是發(fā)布-觀察者模式，也叫訂閱模式，在javascript里，該模式要如何實(shí)現(xiàn)呢，首先我們先看一個(gè)現(xiàn)實(shí)生活中的例子
小明在工作幾年后，準(zhǔn)備買房結(jié)婚，于是他到售樓處，找售樓人員詢問當(dāng)前的價(jià)格，得知售樓價(jià)每平是小明好幾個(gè)月工資的時(shí)候，小明猶豫了，于是他回去后，每天都給售樓處打電話，詢問售樓人員的價(jià)格，售樓人員也會(huì)耐心解答，但是第二天又來了一個(gè)小芳，于是小芳每天也在打電話，時(shí)間久了，人越來越多，售樓人員每天接這么多電話，肯定吃不消要跳槽，當(dāng)然我們只是舉例子，現(xiàn)實(shí)情況是，售樓人員會(huì)留下小明，小芳等等人的電話存在花名冊(cè)里，這就是訂閱，然后等房?jī)r(jià)降下來的時(shí)候，售樓人員一個(gè)個(gè)打電話通知他們，這樣雙方都省了力氣，訂閱消息的人也拿到了應(yīng)得的消息?，F(xiàn)在假設(shè)花名冊(cè)是 clientList
var salePart = {} // 售樓處
var clientList = [] // 花名冊(cè)
var xiaoming = {
name: "小明",
fn: function () {
var args = [].slice.call(arguments)
args.unshift(this.name)
console.log(args.join(","))
}
}
salePart.listen = function (person) { // 售樓處登記來訪者的信息
clientList.push(person)
}
salePart.trigger = function (type, price) { // 售樓處通知來訪者信息，type為售房面積，price為售房?jī)r(jià)格
if (clientList.length > 0) {
for (var i = 0, person; person = clientList[i++];) {
if (typeof person.fn === "function") {
person.fn(type, price)
}
}
}
}
salePart.listen(xiaoming)
salePart.trigger("square80", 60000) // 打印出來 小明,square80,60000
下面小芳也要來看房，可是小芳比小明有錢的多，她要看的是200平米的房子，這樣把小芳在添加進(jìn)去的時(shí)候，售樓處就不能按照分類來進(jìn)行通知他們的，200平米的房子的通知小明也能看到，這樣小明會(huì)更扎心，萬一不開心，就會(huì)損失一個(gè)潛在客戶，所以我們還要完善一下上述代碼，讓售樓處可以按照房屋面積分別通知對(duì)應(yīng)的買房者
var salePart = {} // 售樓處
var clientList = {} // 花名冊(cè)
var xiaoming = {
name: "小明",
type: "s80",
fn: function () {
var args = [].slice.call(arguments)
args.unshift(this.name)
console.log(args.join(","))
}
}
var xiaofang = {
name: "小芳",
type: "s200",
fn: function () {
var args = [].slice.call(arguments)
args.unshift(this.name)
console.log(args.join(","))
}
}
salePart.listen = function (person) { // 售樓處登記來訪者的信息
var type = person.type
if (!clientList[type] || clientList[type].length < 0) { // 原來的花名冊(cè)先分類，然后再存入每個(gè)人的信息
clientList[type] = []
}
clientList[type].push(person)
}
salePart.trigger = function (type, price) { // 售樓處通知來訪者信息，type為售房類型，price為售房?jī)r(jià)格
if (clientList[type] && clientList[type].length > 0) {
for (var i = 0, person; person = clientList[type][i++];) {
if (typeof person.fn === "function") {
person.fn(type, price)
}
}
}
}
salePart.listen(xiaoming)
salePart.listen(xiaofang)
salePart.trigger("s80", 60000) // 打印出來 小明,square80,60000
salePart.trigger("s200", 200000) // 打印出來 小芳,square200,200000
可以看到，小明只能接收到80平米的房?jī)r(jià)信息，小芳呢，也只能看到200平米的房?jī)r(jià)信息，這樣售樓處又回到了一片欣欣向榮的社會(huì)主義和諧景象，但是在實(shí)際開發(fā)中，上面的代碼并不利于維護(hù)，因?yàn)楹芩缮?，我們可以用?duì)象的方式來把代碼重構(gòu)一下
var SalePart = function () {
this.clientList = {}
}
SalePart.prototype.listen = function () { // 現(xiàn)在我們把該函數(shù)處理為可以一次接收多個(gè)來訪者
var persons = [].slice.call(arguments)
for (var i = 0, p; p = persons[i++];) {
var type = p.type
if (!this.clientList[type] || this.clientList[type].length < 0) {
this.clientList[type] = []
}
this.clientList[type].push(p)
}
}
SalePart.prototype.trigger = function (type, price) {
if (this.clientList[type] && this.clientList[type].length > 0) {
for (var i = 0, p; p = this.clientList[type][i++];) {
if (typeof p.fn === "function") {
p.fn(type, price)
}
}
}
}
var salePart = new SalePart()
salePart.listen(xiaoming, xiaofang)
salePart.trigger("s80", 50000) // 小明,s80,50000 感謝黨和國(guó)家房?jī)r(jià)終于降了！
salePart.trigger("s200", 100000) // 小芳,s200,100000 這么便宜，買買買?。?！
以上就是本章的內(nèi)容，結(jié)合實(shí)際案例希望大家看起來更好理解一些，如有疑問，可以在下方留言，看到后我會(huì)盡快回復(fù)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93586.html
摘要：觀察者模式介紹觀察者模式又稱發(fā)布訂閱模式，它定義對(duì)象間的一種一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象發(fā)生改變的時(shí)候，所依賴它的對(duì)象都能得到通知。關(guān)于內(nèi)部的觀察者模式可以參數(shù)這篇文檔?？偨Y(jié)總之，觀察者模式在中的使用是非常廣泛的。 javascript觀察者模式 介紹 觀察者模式又稱發(fā)布-訂閱模式，它定義對(duì)象間的一種一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象發(fā)生改變的時(shí)候，所依賴它的對(duì)象都能得到通知。例如：我們訂閱...
摘要：原理對(duì)處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來之前，再次觸發(fā)事件，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)。在目標(biāo)發(fā)出內(nèi)容改變的事件后，直接接收事件并作出響應(yīng)。首先是目標(biāo)的構(gòu)造函數(shù)，他有個(gè)數(shù)組，用于添加觀察者。 關(guān)于排序 js中sort函數(shù)的底層實(shí)現(xiàn)機(jī)制？ js中sort內(nèi)置多種排序算法，是根據(jù)要排序數(shù)的亂序程度來決定使用哪一種排序方法。V8 引擎 sort 函數(shù)只給出了兩種排序 Inse...
摘要：缺點(diǎn)不符合開閉原則，如果要改東西很麻煩，繼承重寫都不合適。預(yù)防低水平人員帶來的風(fēng)險(xiǎn)。開閉原則，高拓展性。這里的訂閱者稱為觀察者，而被觀察者稱為發(fā)布者，當(dāng)一個(gè)事件發(fā)生，發(fā)布者會(huì)發(fā)布通知所有訂閱者，并常常以事件對(duì)象形式傳遞消息。 介紹 最近開始給自己每周訂個(gè)學(xué)習(xí)任務(wù)，學(xué)習(xí)結(jié)果反饋為一篇文章的輸出，做好學(xué)習(xí)記錄。 這一周(02.25-03.03)我定的目標(biāo)是《JavaScript 模式》...
摘要：開發(fā)中，我們或多或少地接觸了設(shè)計(jì)模式，但是很多時(shí)候不知道自己使用了哪種設(shè)計(jì)模式或者說該使用何種設(shè)計(jì)模式。本文意在梳理常見設(shè)計(jì)模式的特點(diǎn)，從而對(duì)它們有比較清晰的認(rèn)知。 showImg(https://segmentfault.com/img/remote/1460000014919705?w=640&h=280); 開發(fā)中，我們或多或少地接觸了設(shè)計(jì)模式，但是很多時(shí)候不知道自己使用了哪種設(shè)...
摘要：發(fā)布訂閱模式定義對(duì)象間的一種一對(duì)多的依賴關(guān)系當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)所有依賴于它的對(duì)象都將得到通知簡(jiǎn)單實(shí)現(xiàn)定義發(fā)布者緩存列表存放訂閱者的回調(diào)函數(shù)定義訂閱者發(fā)布消息測(cè)試訂閱者價(jià)格訂閱者價(jià)格發(fā)布消息上面的實(shí)現(xiàn)方式導(dǎo)致了每個(gè)訂閱者都會(huì)收到發(fā)布 發(fā)布-訂閱模式 定義對(duì)象間的一種 一對(duì)多 的依賴關(guān)系, 當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí), 所有依賴于它的對(duì)象都將得到通知 簡(jiǎn)單實(shí)現(xiàn) // 定...
閱讀 1318·2023-04-25 23:22
閱讀 1715·2023-04-25 20:04
閱讀 2669·2021-11-22 15:24
閱讀 2843·2021-11-11 16:54
閱讀 1913·2019-08-30 14:03
閱讀 1515·2019-08-29 16:35
閱讀 1732·2019-08-26 10:29
閱讀 2732·2019-08-23 18:01
