觀察者模式實現非直接耦合

binaryTree 發布于2019-08-20 10:49 / 1112人閱讀

摘要：子模塊統一實現監聽方法，供主模塊觸發執行自己的觀察方法，具體由子類實現。子模塊統一實現將自己的變化告知主模塊的方法主模塊包含一個子模塊列表子模塊統一實現方法，將自己添加到主模塊的子模塊列表中。

最近在看設計模式，一本《Head First 設計模式》，一本《javascript設計模式》，兩本交替著看。Head First淺顯易懂，代碼用java實現，理解了一個設計模式的理念以后，先想想用js如何實現，然后再看js設計模式相關章節，感覺比以前看的時候理解深入了些。

今天早上看到顏海鏡同學在早讀課上分享的耦合關系一文，最后一種模塊間非直接耦合的實現方式第一個讓我想到的就是觀察者模式。正好上午沒事，就寫了個demo實現了一下。

非直接耦合：兩個模塊之間沒有直接關系，它們之間的聯系完全是通過主模塊的控制和調用來實現的。耦合度最弱，模塊獨立性最強。子模塊無需知道對方的存在，子模塊之間的聯系，全部變成子模塊和主模塊之間的聯系。

現在要實現這樣的功能：

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

主模塊負責監聽所有其下的模塊的變化，一旦認為該變化需要通知到指定一個或多個其他模塊，就向這些模塊發送消息。

大體實現思路是：

子模塊包含一個主模塊的引用，在實例化方法中將其對應的主模塊實例作為參數賦值給自己的主模塊引用。

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

子模塊統一實現監聽方法observeFromHub，供主模塊觸發執行自己的觀察方法，具體由子類實現。

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

子模塊統一實現將自己的變化告知主模塊的方法update(value)

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

主模塊包含一個子模塊列表

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

子模塊統一實現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;
}

主模塊實現觸發子模塊列表中所有子模塊的監聽方法。

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

主模塊實現監聽方法observeFromModule，供子模塊觸發執行自己的觀察方法，由此來感知子模塊的變化，進而執行deliver方法通知其下所有子模塊。

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

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

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方法有子模塊自己實現。這里創建兩個子模塊Module1和Module2。當修改Module1時，主模塊通知Module2執行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;
    }
}

客戶端代碼：

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...");

執行main.js結果：

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

這個例子中主模塊既是觀察者，觀察ModuleA的變化，又是被觀察者，被ModuleB觀察著，A一有變化就會將信息發送給B。

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

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

主模塊中添加控制器，數據需不需要下發，下發到那幾個子模塊，由主模塊控制。

GPU云服務器云服務器設計模式觀察者模式觀察者模式 php觀察者模式 ios觀察者模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80340.html

一文理清21種設計模式：用實例分析和對比

摘要：設計模式無論是對于最底層的的編碼實現還是較高層的架構設計都有著重要的指導作用。所謂光說不練假把式，今天我就把項目中常見的應用場景涉及到的主要設計模式及其相關設計模式總結一下，用實例分析和對比的方式在一片文章中就把最常見的種設計模式梳理清楚。設計模式無論是對于最底層的的編碼實現還是較高層的架構設計都有著重要的指導作用。所謂光說不練假把式，今天我就把項目中常見的應用場景涉及到的主要設計模...

PrototypeZ 2019-08-15 14:42 評論0 收藏0
“大話”設計模式

摘要：抽象工廠模式是為了處理對象具有等級結構以及對象族的問題。單例設計模式單例模式確保某一個類只有一個實例，而且自行實例化并向整個系統提供這個實例，這個類成為單例類。導語：設計模式是無數碼農前人在實際的生產項目中經過不斷的踩坑、爬坑、修坑的經歷總結出來的經驗教訓，經過抽象之后表達成的概念。能夠幫助后來的設計者避免重復同樣的錯誤或者彎路。我也抽空整理了一下設計模式，用自己的話總結了一下，自認...

coordinate35 2019-08-15 15:14 評論0 收藏0
通俗易懂的設計模式

摘要：面向對象設計模式通常以類別或對象來描述其中的關系和相互作用，但不涉及用來完成應用程序的特定類別或對象。里氏代換原則里氏代換原則是面向對象設計的基本原則之一。通俗易懂的設計模式零、使用 1、安裝 2、測試一、什么是設計模式二、設計模式的類型三、設計模式的六大原則四、UML類圖 1、看懂UML類圖 2、解釋五、資料前言：花了一些時間再次熟悉了一遍...

wuyangnju 2019-07-01 11:06 評論0 收藏0
架構師必收藏的干貨！！！

摘要：一微服務概念微服務體系結構由輕量級松散耦合的服務集合組成。每個服務都有自己的計劃測試發布部署擴展集成和獨立維護。團隊不必因為過去的技術決定而受到懲罰。用在這里是指將相關的服務通過聚合器聚合在一起，這個聚合器就是門面。微服務架構現在是談到企業應用架構時必聊的話題，微服務之所以火熱也是因為相對之前的應用開發方式有很多優點，如更靈活、更能適應現在需求快速變更的大環境。一、微服務概念微服...

shiweifu 2019-08-16 17:12 評論0 收藏0
python設計模式

摘要：在本節實驗中，我們學習了四種設計模式策略模式，觀察者模式，命令模式以及模板方法模式。這四種設計模式都是行為型模式。這就是適配器模式。下面讓我們看看適配器模式在實驗樓中使用吧。準確來說，裝飾者模式能動態的給對象添加行為。 1、策略模式策略模式將各種操作（算法）進行封裝，并使它們之間可以互換。互換的意思是說可以動態改變對象的操作方式（算法）。 -- coding: utf-8 -- im...

array_huang 2019-07-31 11:25 評論0 收藏0