我在运行一个类的多个实例时遇到了一些问题，同时使用 ES6 模块以获得更清晰的项目结构。

我将尝试在下面解释我的问题。我真正的项目更大，更复杂，但我以此为例。

版本 1

主.js

import App from './app';
let instance1 = new App,
    instance2 = new App;

应用.js

import Layer from './layer'
import Element from './element'
class App {
  constructor() {
    this.layer = new Layer;
    this.element = new Element;
  }
  addLayer() {
    this.layer.addLayer();  
  }
  addElement() {
    this.element.addElement();
  }
}
module.exports = App;

层.js

class Layer {
  constructor() {
    this.layers = [];
  }
  addLayer(name) {
    this.layers.push({
        name: name
    });
  }
}
module.exports = Layer;

元素.js

class Element {
  constructor() {
    this.elements = [];
  }
  addElement(name) {
    this.elements.push({
      name: name
    });
  }
}
module.exports = Element;

现在我得到了一个独特的instance1和instance2实例，包含它自己的层和元素。当元素.js和层.js想要相互通信时，问题就来了。我无法import Layer from './layer' insideelement.js而无需创建新实例，无法访问从应用程序内其他位置创建的图层。

版本 2

主.js

import App from './app';
let instance1 = new App,
    instance2 = new App;

应用.js

import layer from './layer'
import element from './element'
class App {
  addLayer() {
    layer.addLayer();  
  }
  addElement() {
    element.addElement();
  }
}
module.exports = App;

层.js

class Layer {
  constructor() {
    this.layers = [];
  }
  addLayer(name) {
    this.layers.push({
      name: name
    });
  }
}
let layer = new Layer;
module.exports = layer;

元素.js

class Element {
  constructor() {
    this.elements = [];
  }
  addElement(name) {
    this.elements.push({
      name: name
    });
  }
}
let element = new Element;
module.exports = element;

在这种情况下，我可以从元素访问图层.js反之亦然，但它们也将在应用程序的两个实例之间共享，这不是我想要的。

这最初是一个单一的应用程序.js它包含所有内容并且运行良好，但随着项目的发展，它变得非常难以维护。但下面是我想要实现的示例。

应用.js

class App {
  constructor() {
    this.layers = [];
    this.elements = [];
  }
  addLayer(name) {
    this.layers.push({
      name: name
    });
  }
  addElement(name) {
    this.elements.push({
      name: name
    });
  }
}
module.exports = App;

有没有办法在这里两全其美？我已经考虑过为应用程序的每个实例创建一个商店，跟踪它自己的层和元素，但共享它的功能，但我不确定把它放在哪里以及如何在应用程序中传递对它的引用。

编辑

澄清一下，因为我在评论中得到了这个问题。实际上，这是一个更大的项目，其中包含许多不同的模块，这些模块以许多不同的方式相互交互。上面的最小版本仅用于这个问题，但这里有一些额外的部分作为层.js和元素.js之间交互的示例。

主.js

instance1.element.get('element1').addToLayer('background');

层.js

.addLayer(name) {
    this.layers.push({
        name: name,
        elements: [],
        add: (element) => {
            this.elements.push(element);
        }
    });
}

元素.js

import layer from './layer';
...
.get(name) {
    let el;
    for(item in this.elements) {
        if(item.name == name) {
            el = item;
            break;
        }
    }
    return el;
}
.addElement(name) {
    this.elements.push({
        name: name,
        addToLayer: (name) => {
            let l;
            for(item in layer.layers) {
               if(item.name == name {
                   l = item;
                   break;
               }
            }
            if(l) l.add(this);
        }
    });
}

在版本 1 中，layer.layers在这里为空，因为我必须创建它的新实例。在版本 2 中，它可以正常工作，但应用程序的所有实例将共享相同的layer.layers 。