Question

我有多个小部件，需要在它们之间进行通信。我试图使用中介模式来做到这一点。所以我有类似下面的内容。我遇到的问题是介体是2个不同的实例，而不仅仅是1.因此，widget_2实际上并没有订阅正确的事件/消息。

我正在使用WebPack / Es6

我怎样才能克服这个问题？

＆＃13;

//mediator.js
    //ref: https://github.com/HenriqueLimas/mediator-pattern-es6/blob/master/src/mediator.js
    
    //app.js
    import Widget_1 from './widget_1.js';
    import Widget_2 from './widget_2.js';
    
    new widget_1 = new Widget_1();
    new widget_2 = new Widget_2();
    
    widget_1.run();
    widget_2.run();
    
    //widget_1.js
    import Mediator from './mediator.js';
    const mediator = new Mediator();
    
    export default class Widget_1 {
        constructor() {
            
        }
        run() {
            mediator.publish('widget1', 'hello there I am widget 1');
        }
    }
    
    //widget_2.js
    import Mediator from './mediator.js';
    const mediator = new Mediator();
    
    export default class Widget_2 {
        constructor() {
            
        }
        run() {
            mediator.subscribe('widget1', function(message) {
                console.log('widget 1 says:' + message);
            });
        }
    }

＆＃13;

Answer 1

如果你使你的中介成为单身人士 - 根据定义，同一个对象将在你使用它的任何地方共享。这种修改看起来像这样。

'use strict';

class Mediator {
    constructor() {
        this.channels = {};
    }

    subscribe(channel, fn) {
        if (!this.channels[channel]) this.channels[channel] = [];

        this.channels[channel].push({
            context: this,
            callback: fn
        });
    }

    publish(channel) {
        if (!this.channels[channel]) return false;

        var args = Array.prototype.slice.call(arguments, 1);

        this.channels[channel].forEach(function(subscription) {
            subscription.callback.apply(subscription.context, args);
        });

        return this;
    }

    installTo(obj) {
        obj.channels = {};

        obj.publish = this.publish;
        obj.subscribe = this.subscribe;
    }
}

var mediator = new Mediator();
export mediator;

但是你在这里并不需要es6类，因为你只使用它一次来创建一个新对象。

将Mediator Pattern与webpack和ES6模块一起使用导入导出

1 个答案: