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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)聽方法。

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

主模塊實(shí)現(xiàn)監(jiān)聽方法observeFromModule，供子模塊觸發(fā)執(zhí)行自己的觀察方法，由此來感知子模塊的變化，進(jìn)而執(zhí)行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方法有子模塊自己實(shí)現(xiàn)。這里創(chuàng)建兩個子模塊Module1和Module2。當(dāng)修改Module1時，主模塊通知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;
    }
}

客戶端代碼：

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...

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

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

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

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

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

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

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

發(fā)表評論

登陸后可評論

0條評論

binaryTree

男|高級講師

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

TA的文章

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

閱讀 2760·2021-09-24 09:47
搬瓦工申請退款的條件和方法教程

閱讀 4380·2021-08-27 13:10
第八集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(input, textarea組件)

閱讀 3030·2019-08-30 15:44
前端開發(fā)必備調(diào)試技巧

閱讀 1300·2019-08-29 12:56
關(guān)于彈幕的制作第一篇一樣式

閱讀 2601·2019-08-28 18:07
從零開始實(shí)現(xiàn)一個Vue級聯(lián)組件

閱讀 2624·2019-08-26 14:05
JavaScript 事件冒泡和捕獲模式

閱讀 2583·2019-08-26 13:41
在NPM發(fā)布自己造的輪子

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

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

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

“大話”設(shè)計模式

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

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

python設(shè)計模式

發(fā)表評論

0條評論

binaryTree

男|高級講師

TA的文章

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

搬瓦工申請退款的條件和方法教程

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

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

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

從零開始實(shí)現(xiàn)一個Vue級聯(lián)組件

JavaScript 事件冒泡和捕獲模式

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

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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