Utilisation de Mediator Pattern avec Webpack et modules ES6 import export

Question

J'ai plusieurs widgets écrits et j'ai besoin de communiquer entre eux. J'essaie d'utiliser le modèle de médiateur pour le faire. J'ai donc quelque chose comme ci-dessous. Le problème que j'ai avec le médiateur est de 2 instances différentes au lieu de 1. Donc, widget_2 n'est pas en train de s'abonner à un événement/message correct.

J'utilise WebPack/ES6

Comment puis-je surmonter cela?

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

Si vous faites votre médiateur un singleton - le même objet, par définition, être partagée partout où vous l'utilisez. Cette modification pourrait ressembler à ceci.

'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; 

Mais alors vous ne vraiment pas besoin d'une classe ES6 ici, comme vous allez l'utiliser qu'une seule fois pour créer un nouvel objet.