javascript - 两个ES6类之间的实例交换

Question

如果两个 ES6 类使用彼此的实例，我应该如何组织它们之间的交互？

下面的解决方案有效，但有点复杂。

let widgetA;
let widgetB = new WidgetB();

widgetA = new WidgetA(widgetB);
widgetB.initialize(widgetA);

class WidgetA {

    constructor(widgetB){
        this.widgetB = widgetB;
    }

    widgetAmethod(){
        this.widgetB.doSomethingWidthWidgetB();   
    }

}

class WidgetB {

    constructor(){
        this.widgetA;
    }

    initialize(widgetA){
        this.widgetA = widgetA;
    }

    widgetBmethod(){
        this.widgetA.doSomethingWidthWidgetA();
    }
}

Answer 1

我认为将实例传递到每个小部件中会使代码耦合过于紧密，难以测试和扩展。在这些情况下，我更喜欢使用 pub/sub 或自定义事件之类的东西:

let widgetA = new WidgetA();
let widgetB = new WidgetB();

class WidgetA {
    constructor () {
        document.addEventListener('widgetAsomething', this.doSomethingWidthWidgetA, false);
    }

    widgetAmethod () {
        const event = new CustomEvent('widgetBsomething');
        document.dispatchEvent(event); 
    }

    doSomethingWithWidgetA () {}
}

class WidgetB {
    constructor () {
        document.addEventListener('widgetBsomething', this.doSomethingWidthWidgetB, false);
    }

    widgetBmethod () {
        const event = new CustomEvent('widgetAsomething');
        document.dispatchEvent(event);
    }

    doSomethingWithWidgetB () {}
}

这种方法有很多好处， future 的 widgetC 也可以轻松触发 WidgetA 和 B 方法。

有关自定义事件的更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events