在 webpack 和 ES6 模块导入导出中使用中介模式

Question

我编写了多个小部件，需要在它们之间进行通信。我正在尝试使用调解器模式来做到这一点。所以我有类似下面的内容。我遇到的问题是调解器是 2 个不同的实例，而不仅仅是 1 个。所以 widget_2 实际上并没有订阅正确的 event/message.

我正在使用 WebPack/Es6

我该如何克服它？

//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);
            });
        }
    }

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 class，因为你将只使用它一次来创建一个新对象。

在 webpack 和 ES6 模块导入导出中使用中介模式

Using Mediator Pattern with webpack and ES6 Modules import export

javascript

design-patterns

mediator

ecmascript-6

webpack