觀(guān)察者模式實(shí)現(xiàn)非直接耦合

binaryTree 發(fā)布于2019-08-20 10:49 / 1165人閱讀

摘要：子模塊統(tǒng)一實(shí)現(xiàn)監(jiān)聽(tīng)方法，供主模塊觸發(fā)執(zhí)行自己的觀(guān)察方法，具體由子類(lèi)實(shí)現(xiàn)。子模塊統(tǒng)一實(shí)現(xiàn)將自己的變化告知主模塊的方法主模塊包含一個(gè)子模塊列表子模塊統(tǒng)一實(shí)現(xiàn)方法，將自己添加到主模塊的子模塊列表中。

最近在看設(shè)計(jì)模式，一本《Head First 設(shè)計(jì)模式》，一本《javascript設(shè)計(jì)模式》，兩本交替著看。Head First淺顯易懂，代碼用java實(shí)現(xiàn)，理解了一個(gè)設(shè)計(jì)模式的理念以后，先想想用js如何實(shí)現(xiàn)，然后再看js設(shè)計(jì)模式相關(guān)章節(jié)，感覺(jué)比以前看的時(shí)候理解深入了些。

今天早上看到顏海鏡同學(xué)在早讀課上分享的耦合關(guān)系一文，最后一種模塊間非直接耦合的實(shí)現(xiàn)方式第一個(gè)讓我想到的就是觀(guān)察者模式。正好上午沒(méi)事，就寫(xiě)了個(gè)demo實(shí)現(xiàn)了一下。

非直接耦合：兩個(gè)模塊之間沒(méi)有直接關(guān)系，它們之間的聯(lián)系完全是通過(guò)主模塊的控制和調(diào)用來(lái)實(shí)現(xiàn)的。耦合度最弱，模塊獨(dú)立性最強(qiáng)。子模塊無(wú)需知道對(duì)方的存在，子模塊之間的聯(lián)系，全部變成子模塊和主模塊之間的聯(lián)系。

現(xiàn)在要實(shí)現(xiàn)這樣的功能：

所有模塊只和主模塊通訊，可以把自己的變化告知主模塊，也可以從主模塊接受信息并處理；

主模塊負(fù)責(zé)監(jiān)聽(tīng)所有其下的模塊的變化，一旦認(rèn)為該變化需要通知到指定一個(gè)或多個(gè)其他模塊，就向這些模塊發(fā)送消息。

大體實(shí)現(xiàn)思路是：

子模塊包含一個(gè)主模塊的引用，在實(shí)例化方法中將其對(duì)應(yīng)的主模塊實(shí)例作為參數(shù)賦值給自己的主模塊引用。

constructor(hub) {
    this._hub = hub;
}

子模塊統(tǒng)一實(shí)現(xiàn)監(jiān)聽(tīng)方法observeFromHub，供主模塊觸發(fā)執(zhí)行自己的觀(guān)察方法，具體由子類(lèi)實(shí)現(xiàn)。

observeFromHub() {
    throw new Error("no implementation.");
}

子模塊統(tǒng)一實(shí)現(xiàn)將自己的變化告知主模塊的方法update(value)

update(value){
    this._hub.observeFromModule(value);
}

主模塊包含一個(gè)子模塊列表

constructor(){
    this.modules = [];
}

子模塊統(tǒng)一實(shí)現(xiàn)add/remove方法，將自己添加到主模塊的子模塊列表modules中。

add(hub) {
    var alreadyExists = hub.modules.some((el)=>el === this);
    if (!alreadyExists) hub.modules.push(this);
    return this;
}

remove(hub) {
    hub.modules = hub.modules.filter((el)=>el !== this);
    return this;
}

主模塊實(shí)現(xiàn)觸發(fā)子模塊列表中所有子模塊的監(jiān)聽(tīng)方法。

deliver(data){
    this.modules.forEach((module) => module.observeFromHub(data));
    return this;
}

主模塊實(shí)現(xiàn)監(jiān)聽(tīng)方法observeFromModule，供子模塊觸發(fā)執(zhí)行自己的觀(guān)察方法，由此來(lái)感知子模塊的變化，進(jìn)而執(zhí)行deliver方法通知其下所有子模塊。

observeFromModule(data) {
    return this.deliver(data);
}

有些方法子模塊是公用的，所以可以將這些公共方法提取出來(lái)作為子模塊的抽象超類(lèi)

CommonModule.js

module.exports = class CommonModule {
    constructor(hub) {
        this._hub = hub;
    }
    
    update(value){
        this._hub.observeFromModule(value);
    }

    observeFromHub() {
        throw new Error("no implementation.");
    }

    add(hub) {
        var alreadyExists = hub.modules.some((el)=>el === this);
        if (!alreadyExists) hub.modules.push(this);
        return this;
    }

    remove(hub) {
        hub.modules = hub.modules.filter((el)=>el !== this);
        return this;
    }
}

observeFromHub方法有子模塊自己實(shí)現(xiàn)。這里創(chuàng)建兩個(gè)子模塊Module1和Module2。當(dāng)修改Module1時(shí)，主模塊通知Module2執(zhí)行observerFromHub(value)方法:

Module1.js

var CommonModule = require("./CommonModule");
module.exports = class Module1 extends CommonModule{
    constructor(hub) {
        super(hub);
        this.inputValue = "";
    }

    update(value) {
        this.inputValue = value;
        console.log("module1 setInput start... :" + this.inputValue);
        super.update(value);
    }
}

Module2.js

var CommonModule = require("./CommonModule");
module.exports = class Module2 extends CommonModule{
    constructor(hub) {
        super(hub);
        this.outputValue = "";
    }

    observeFromHub(value) {
        this.outputValue = value;
        console.log("module2 received msg : " + this.outputValue);
    }
}

主模塊代碼：

Hub.js

module.exports = class Hub {
    constructor(){
        this.modules = [];
    }

    observeFromModule(data) {
        return this.deliver(data);
    }
    
    deliver(data){
        this.modules.forEach((module) => module.observeFromHub(data));
        return this;
    }
}

客戶(hù)端代碼：

main.js

var Hub = require("./Hub");
var Module1 = require("./Module1");
var Module2 = require("./Module2");

var hub = new Hub;
var inputModule = new Module1(hub);
var outputModule = new Module2(hub);

outputModule.add(hub);

inputModule.update("this is m1 speaking...");

執(zhí)行main.js結(jié)果：

module1 setInput start... :this is m1 speaking...
module2 received msg : this is m1 speaking...

這個(gè)例子中主模塊既是觀(guān)察者，觀(guān)察ModuleA的變化，又是被觀(guān)察者，被ModuleB觀(guān)察著，A一有變化就會(huì)將信息發(fā)送給B。

還能想到的一些有趣變化：

主模塊可以有多個(gè)，各自管轄的范圍不同，但有些子模塊可能會(huì)在多個(gè)范圍中公用。

主模塊中添加控制器，數(shù)據(jù)需不需要下發(fā)，下發(fā)到那幾個(gè)子模塊，由主模塊控制。

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

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

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

相關(guān)文章

一文理清21種設(shè)計(jì)模式：用實(shí)例分析和對(duì)比

摘要：設(shè)計(jì)模式無(wú)論是對(duì)于最底層的的編碼實(shí)現(xiàn)還是較高層的架構(gòu)設(shè)計(jì)都有著重要的指導(dǎo)作用。所謂光說(shuō)不練假把式，今天我就把項(xiàng)目中常見(jiàn)的應(yīng)用場(chǎng)景涉及到的主要設(shè)計(jì)模式及其相關(guān)設(shè)計(jì)模式總結(jié)一下，用實(shí)例分析和對(duì)比的方式在一片文章中就把最常見(jiàn)的種設(shè)計(jì)模式梳理清楚。設(shè)計(jì)模式無(wú)論是對(duì)于最底層的的編碼實(shí)現(xiàn)還是較高層的架構(gòu)設(shè)計(jì)都有著重要的指導(dǎo)作用。所謂光說(shuō)不練假把式，今天我就把項(xiàng)目中常見(jiàn)的應(yīng)用場(chǎng)景涉及到的主要設(shè)計(jì)模...

PrototypeZ 2019-08-15 14:42 評(píng)論0 收藏0
“大話(huà)”設(shè)計(jì)模式

摘要：抽象工廠(chǎng)模式是為了處理對(duì)象具有等級(jí)結(jié)構(gòu)以及對(duì)象族的問(wèn)題。單例設(shè)計(jì)模式單例模式確保某一個(gè)類(lèi)只有一個(gè)實(shí)例，而且自行實(shí)例化并向整個(gè)系統(tǒng)提供這個(gè)實(shí)例，這個(gè)類(lèi)成為單例類(lèi)。導(dǎo)語(yǔ)：設(shè)計(jì)模式是無(wú)數(shù)碼農(nóng)前人在實(shí)際的生產(chǎn)項(xiàng)目中經(jīng)過(guò)不斷的踩坑、爬坑、修坑的經(jīng)歷總結(jié)出來(lái)的經(jīng)驗(yàn)教訓(xùn)，經(jīng)過(guò)抽象之后表達(dá)成的概念。能夠幫助后來(lái)的設(shè)計(jì)者避免重復(fù)同樣的錯(cuò)誤或者彎路。我也抽空整理了一下設(shè)計(jì)模式，用自己的話(huà)總結(jié)了一下，自認(rèn)...

coordinate35 2019-08-15 15:14 評(píng)論0 收藏0
通俗易懂的設(shè)計(jì)模式

摘要：面向?qū)ο笤O(shè)計(jì)模式通常以類(lèi)別或?qū)ο髞?lái)描述其中的關(guān)系和相互作用，但不涉及用來(lái)完成應(yīng)用程序的特定類(lèi)別或?qū)ο?。里氏代換原則里氏代換原則是面向?qū)ο笤O(shè)計(jì)的基本原則之一。通俗易懂的設(shè)計(jì)模式零、使用 1、安裝 2、測(cè)試一、什么是設(shè)計(jì)模式二、設(shè)計(jì)模式的類(lèi)型三、設(shè)計(jì)模式的六大原則四、UML類(lèi)圖 1、看懂UML類(lèi)圖 2、解釋五、資料前言：花了一些時(shí)間再次熟悉了一遍...

wuyangnju 2019-07-01 11:06 評(píng)論0 收藏0
架構(gòu)師必收藏的干貨?。。?/b>

摘要：一微服務(wù)概念微服務(wù)體系結(jié)構(gòu)由輕量級(jí)松散耦合的服務(wù)集合組成。每個(gè)服務(wù)都有自己的計(jì)劃測(cè)試發(fā)布部署擴(kuò)展集成和獨(dú)立維護(hù)。團(tuán)隊(duì)不必因?yàn)檫^(guò)去的技術(shù)決定而受到懲罰。用在這里是指將相關(guān)的服務(wù)通過(guò)聚合器聚合在一起，這個(gè)聚合器就是門(mén)面。微服務(wù)架構(gòu)現(xiàn)在是談到企業(yè)應(yīng)用架構(gòu)時(shí)必聊的話(huà)題，微服務(wù)之所以火熱也是因?yàn)橄鄬?duì)之前的應(yīng)用開(kāi)發(fā)方式有很多優(yōu)點(diǎn)，如更靈活、更能適應(yīng)現(xiàn)在需求快速變更的大環(huán)境。一、微服務(wù)概念微服...

shiweifu 2019-08-16 17:12 評(píng)論0 收藏0

python設(shè)計(jì)模式

摘要：在本節(jié)實(shí)驗(yàn)中，我們學(xué)習(xí)了四種設(shè)計(jì)模式策略模式，觀(guān)察者模式，命令模式以及模板方法模式。這四種設(shè)計(jì)模式都是行為型模式。這就是適配器模式。下面讓我們看看適配器模式在實(shí)驗(yàn)樓中使用吧。準(zhǔn)確來(lái)說(shuō)，裝飾者模式能動(dòng)態(tài)的給對(duì)象添加行為。 1、策略模式策略模式將各種操作（算法）進(jìn)行封裝，并使它們之間可以互換?；Q的意思是說(shuō)可以動(dòng)態(tài)改變對(duì)象的操作方式（算法）。 -- coding: utf-8 -- im...

array_huang 2019-07-31 11:25 評(píng)論0 收藏0

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

登陸后可評(píng)論

0條評(píng)論

binaryTree

男|高級(jí)講師

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

TA的文章
閱讀更多

VMware虛擬機(jī)安裝黑群暉7.0教程

閱讀 2848·2021-09-24 09:47

搬瓦工申請(qǐng)退款的條件和方法教程

閱讀 4464·2021-08-27 13:10

第八集: 從零開(kāi)始實(shí)現(xiàn)一套pc端vue的ui組件庫(kù)(input, textarea組件)

閱讀 3087·2019-08-30 15:44

前端開(kāi)發(fā)必備調(diào)試技巧

閱讀 1354·2019-08-29 12:56

關(guān)于彈幕的制作第一篇一樣式

閱讀 2648·2019-08-28 18:07

從零開(kāi)始實(shí)現(xiàn)一個(gè)Vue級(jí)聯(lián)組件

閱讀 2698·2019-08-26 14:05

JavaScript 事件冒泡和捕獲模式

閱讀 2707·2019-08-26 13:41

在NPM發(fā)布自己造的輪子

閱讀 1324·2019-08-26 13:33

最新活動(dòng)

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

資訊專(zhuān)欄INFORMATION COLUMN

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

觀(guān)察者模式實(shí)現(xiàn)非直接耦合

相關(guān)文章

一文理清21種設(shè)計(jì)模式：用實(shí)例分析和對(duì)比

“大話(huà)”設(shè)計(jì)模式

通俗易懂的設(shè)計(jì)模式

架構(gòu)師必收藏的干貨?。。?/b>

python設(shè)計(jì)模式

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

0條評(píng)論

binaryTree

男|高級(jí)講師

TA的文章

VMware虛擬機(jī)安裝黑群暉7.0教程

搬瓦工申請(qǐng)退款的條件和方法教程

第八集: 從零開(kāi)始實(shí)現(xiàn)一套pc端vue的ui組件庫(kù)(input, textarea組件)

前端開(kāi)發(fā)必備調(diào)試技巧

關(guān)于彈幕的制作第一篇一樣式

從零開(kāi)始實(shí)現(xiàn)一個(gè)Vue級(jí)聯(lián)組件

JavaScript 事件冒泡和捕獲模式

在NPM發(fā)布自己造的輪子

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

觀(guān)察者模式實(shí)現(xiàn)非直接耦合

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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