JavaScript 觀察者模式

zhigoo 發(fā)布于2019-08-22 14:04 / 2167人閱讀

摘要：生活中的觀察者模式就如我們?cè)趯Ｙu店預(yù)定商品如蘋果手機(jī)，我們會(huì)向?qū)Ｙu店提交預(yù)定申請(qǐng)，然后店家受申請(qǐng)，正常這樣就完事了。中的觀察者模式在中觀察者模式的實(shí)現(xiàn)主要用事件模型。缺點(diǎn)使用全局的觀察者模式會(huì)明顯降低對(duì)象之間的聯(lián)系。

觀察者模式又叫做發(fā)布-訂閱模式。這是一種一對(duì)多的對(duì)象依賴關(guān)系，當(dāng)被依賴的對(duì)象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知。

生活中的觀察者模式

就如我們?cè)趯Ｙu店預(yù)定商品（如：蘋果手機(jī)），我們會(huì)向?qū)Ｙu店提交預(yù)定申請(qǐng)，然后店家受申請(qǐng)，正常這樣就完事了。假如，近段時(shí)間蘋果手機(jī)的需求很大，而商品有限，那么商家就會(huì)要這些果粉預(yù)留電話等待通知，等到手機(jī)一到，商家就會(huì)遍歷果粉預(yù)留信息，然后發(fā)通知給這些果粉。生活中商家強(qiáng)調(diào)客戶在家等通知即可，并且說一有消息就會(huì)通知客戶，而不會(huì)傻到要客戶主動(dòng)打電話詢問，這樣不僅客戶的代價(jià)比較大，商家的負(fù)荷更大，用戶的輪詢方式也從打電話變成了查看短信息。

觀察者模式的優(yōu)勢(shì)

發(fā)布和訂閱這兩個(gè)對(duì)象是松耦合地聯(lián)系在一起的，它們不用彼此熟悉內(nèi)部的實(shí)現(xiàn)細(xì)節(jié)，但這不影響它們之間的通信，它們只要知道彼此需要做什么就行。當(dāng)有新訂閱者增加時(shí)，發(fā)布者不需要任何更改，同樣的當(dāng)發(fā)布者改變時(shí)，訂閱者也不會(huì)受到影響。

就像新聞聯(lián)播一樣里面的央視主持人換了，也不影響我們看央視的新聞聯(lián)播，同樣你看或不看新聞聯(lián)播，對(duì)央視來說也無影響。

在異步通信中觀察者模式也是大有好處，發(fā)布者只需按順序的發(fā)布事件即可，而訂閱者只需在異步運(yùn)行期間訂閱相關(guān)事件即可。

JavaScript中的觀察者模式

在JavaScript中觀察者模式的實(shí)現(xiàn)主要用事件模型。

DOM事件

document.body.addEventListener("click", function() {
    console.log("hello world!");
});

相信這樣的代碼不少的同學(xué)都寫過，但我要說這其實(shí)就是一種觀察者模式的實(shí)現(xiàn)，可能一些童鞋還不信，那么看一看修改后的代碼。

// 發(fā)布者
var pub = function() {
    console.log("歡迎訂閱!")
}
// 訂閱者
var sub = document.body;

// 訂閱者實(shí)現(xiàn)訂閱
sub.addEventListener("click", pub, false);

訂閱者可以任意的添加，發(fā)布者也可以隨意的修改。

自定義事件

雖然，使用dom事件可以輕松解決我們開發(fā)中的一部分問題；但是還有一些問題需要我們使用自定義事件來完成。
那面就說一說如何用自定義事件實(shí)現(xiàn)代理。

我們還以預(yù)定手機(jī)為例，參考dom事件的原理來實(shí)現(xiàn)觀察者模式，用用戶的電話號(hào)碼作為類型，用戶的定購(gòu)信息用一個(gè)回調(diào)函數(shù)來表示。

基本概念定義如下：

商家：發(fā)布者

客戶：訂閱者

緩存列表：記錄客戶的電話，方便商家遍歷發(fā)通知消息給客戶

注：緩存列表，我將它定義為一個(gè)對(duì)象，用戶的電話號(hào)碼作為key，用戶的預(yù)定信息是個(gè)數(shù)組作為value。

代碼實(shí)現(xiàn)如下：

// 定義商家
var merchants = {};
// 定義預(yù)定列表
merchants.orderList = {};
// 將增加的預(yù)訂者添加到預(yù)定客戶列表中
merchants.listen = function(id, info) {
    if(!this.orderList[id]) {
        this.orderList[id] = [];
    }
    this.orderList[id].push(info);
    console.log("預(yù)定成功")
};
//發(fā)布消息
merchants.publish = function() {
    var id = Array.prototype.shift.call(arguments);
    var infos = this.orderList[id];
    // 判斷是否有預(yù)訂信息
    if(!infos || infos.length === 0) {
        console.log("您還沒有預(yù)訂信息!");
        return false;
    }
    // 如果有預(yù)訂信息，則循環(huán)打印
    for (var i = 0, info; info = infos[i++];) {
        console.log("尊敬的客戶：");
        info.apply(this, arguments);
        console.log("已經(jīng)到貨了");
    }
};
// 定義一個(gè)預(yù)訂者customerA，并指定預(yù)定信息
var customerA = function() {
    console.log("黑色至尊版一臺(tái)");
};
// customerA 預(yù)定手機(jī)，并留下預(yù)約電話
merchants.listen("15888888888", customerA); // 預(yù)定成功
// 商家發(fā)布通知信息
merchants.publish("15888888888");
/**
   尊敬的客戶：
   黑色至尊版一臺(tái)
   已經(jīng)到貨了
 */

取消訂閱

當(dāng)然，現(xiàn)實(shí)中我們可以預(yù)定，那么也可以取消預(yù)定。其實(shí)取消預(yù)定的方式也比較簡(jiǎn)單，就是將客戶從預(yù)定列表中清除出去。代碼實(shí)現(xiàn)如下：

merchants.remove = function(id, fn) {
    var infos = this.orderList[id];

    if(!infos) return false;

    if(!fn) {
        infos && (infos.length = 0);
    } else {
        for(var i = 0, len = infos.length; i < len; i++) {
            if(infos[i] === fn) {
                infos.splice(i, 1);
            }
        }
    }
};
merchants.remove("15888888888", customerA);
merchants.publish("15888888888"); // 您還沒有預(yù)訂信息!

全局的觀察者模式

實(shí)現(xiàn)的代碼結(jié)構(gòu)如下：

var observer = (function() {
    var orderList = {},
        listen,
        publish,
        remove;
    listen = function(id, fn) {
        ...
    };

    publish = function() {
        ...
    };

    remove = function(id, fn) {
        ...
    };

    return {
        listen: listen,
        publish: publish,
        remove: remove
    }
})();

優(yōu)點(diǎn)：

使用了全局的觀察者模式后，我們不用管商家是誰(shuí)，只要他能提供我們所需要的東西即可；而且我們也避免了為不同的商家都創(chuàng)建listen，publish，remove方法，這樣可以減少資源的浪費(fèi)。

缺點(diǎn)：

使用全局的觀察者模式會(huì)明顯降低對(duì)象之間的聯(lián)系。一些方法將會(huì)被隱藏，而有時(shí)我們恰恰需要這些方法的暴露。

是先訂閱，還是先發(fā)布

在我被問到這個(gè)問題時(shí)，我也是一愣，當(dāng)時(shí)腦袋里就冒出了‘你怎么不問是先有雞，還是先有蛋’這樣的想法。

按照我的理解我們實(shí)現(xiàn)觀察者模式，都是訂閱者先訂閱，然后接收發(fā)布者的通知消息。沒有反過來想，發(fā)布者先發(fā)布一條消息，然后等訂閱者接收，因?yàn)樵谖业南胂笾?，如果沒有訂閱者，這消息怎么成功發(fā)布。

后來有人跟我說有這樣的業(yè)務(wù)實(shí)現(xiàn)，當(dāng)時(shí)我就不假思索的問什么業(yè)務(wù)，他說QQ的離線模式。這種先發(fā)布后訂閱的形式是將信息先存儲(chǔ)起來，等到訂閱者訂閱，就立即將信息發(fā)送給訂閱者。如：當(dāng)我們將QQ調(diào)到離線模式，我們就無法接收信息；當(dāng)我們將QQ調(diào)到登錄模式，就馬上收在離線模式期間接收到的信息。

這樣的例子在生活中也有很多，還拿天氣預(yù)報(bào)，它也可以理解為是先發(fā)布，我們后訂閱的模式。天預(yù)報(bào)信息會(huì)發(fā)布在網(wǎng)上，存儲(chǔ)在各個(gè)服務(wù)器上，我們需要時(shí)打開手機(jī)就可以得到。

注：提到觀察者模式我們就不得不說一下推模型和拉模型。推模型在事件發(fā)生時(shí)，發(fā)布者會(huì)將變化狀態(tài)和數(shù)據(jù)都推送給訂閱者；拉模型在事件發(fā)生時(shí)，發(fā)布者只會(huì)給訂閱者一個(gè)狀態(tài)改變通知，訂閱者會(huì)根據(jù)發(fā)布者提供的接口主動(dòng)拉取數(shù)據(jù)。

設(shè)計(jì)模式周周講

云服務(wù)器 GPU云服務(wù)器設(shè)計(jì)模式觀察者模式觀察者模式 php觀察者模式 ios觀察者模式

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

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

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

登陸后可評(píng)論

0條評(píng)論

zhigoo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

炫“庫(kù)”行動(dòng)-人大金倉(cāng)有獎(jiǎng)?wù)魑?-改造TPCE測(cè)試工具dbt5，提升測(cè)試結(jié)果tpSE

閱讀 1163·2021-10-12 10:11
《慕課React入門》總結(jié)

閱讀 945·2019-08-30 15:53
css的居中效果、li鼠標(biāo)懸浮背景顏色從上往下變化、選擇器的分類與使用

閱讀 2380·2019-08-30 14:15
如何愉悅地寫 React 樣式

閱讀 3033·2019-08-30 14:09
如何判斷元素是否在可視區(qū)域ViewPort

閱讀 1256·2019-08-29 17:24
Rust-weekly-2019-05-09

閱讀 1026·2019-08-26 18:27
Golang Gin實(shí)踐連載十三優(yōu)化你的應(yīng)用結(jié)構(gòu)和實(shí)現(xiàn)Redis緩存

閱讀 1330·2019-08-26 11:57
前端設(shè)計(jì)——數(shù)據(jù)轉(zhuǎn)換層

閱讀 2237·2019-08-23 18:23

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JavaScript 觀察者模式

相關(guān)文章

JavaScript 發(fā)布-訂閱模式

JavaScript常用設(shè)計(jì)模式

JavaScript 設(shè)計(jì)模式（六）：觀察者模式與發(fā)布訂閱模式

**Backbone精髓，觀察者模式和事件**

JavaScript設(shè)計(jì)模式之發(fā)布-訂閱模式（觀察者模式）-Part1

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

0條評(píng)論

zhigoo

男|高級(jí)講師

TA的文章

炫“庫(kù)”行動(dòng)-人大金倉(cāng)有獎(jiǎng)?wù)魑?-改造TPCE測(cè)試工具dbt5，提升測(cè)試結(jié)果tpSE

《慕課React入門》總結(jié)

css的居中效果、li鼠標(biāo)懸浮背景顏色從上往下變化、選擇器的分類與使用

如何愉悅地寫 React 樣式

如何判斷元素是否在可視區(qū)域ViewPort

Rust-weekly-2019-05-09

Golang Gin實(shí)踐連載十三優(yōu)化你的應(yīng)用結(jié)構(gòu)和實(shí)現(xiàn)Redis緩存

前端設(shè)計(jì)——數(shù)據(jù)轉(zhuǎn)換層

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JavaScript 觀察者模式

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！