Question

我有几个共享很多功能的d3图表。然而，他们在几个方面确实存在分歧。我正在考虑将它们移到基于父类的单独类中，因为单数buildChart函数的长度变得不可维护。

我现在面临的问题是，尽管在某些情况下从父级覆盖某些方法似乎很容易，但是让父级构建大部分一个安装对象会很好，其中包含tick这样的属性间隔，显示格式等，但让每个子类为该对象添加一些属性。

我想通过以下方式做到这一点：

class Chart {
  constructor({ svg, data, range }) {
    this.svg = svg;
    this.range = range;
    this.data = data;
    this.setDetails();
  }
  setDetails() {
    this.details = {
      sharedProp: "this property is shared"
    };
  }
  scaffoldChart() {
    /* initial d3 stuff */
  }
}

export class SimilarChartUno extends Chart {
  constructor({ svg, data, range }) {
    super({ svg, data, range });
    this.decorateDetails()
    super.scaffoldChart()
  }
  decorateDetails() {
    this.details = Object.assign(this.details, {
      someUniqueProp: 'prop for UNO a'
    })
  }
}

// instance details :

{
  "sharedProp": "this property is shared",
  "someUniqueProp": "prop for UNO A"
}

这似乎有效，但我没有在任何地方看到这样的例子：是否有比这更好的模式？

Code Sandbox

Answer 1

以目前的方式做这件事并没有错，但是如果你想避免添加方法，你可以改变你的SimilarChartUno是这样的：

class SimilarChartUno extends Chart {
  constructor({ svg, data, range }) {
    super({ svg, data, range });
    super.scaffoldChart()
  }
  setDetails() {
    super.setDetails();
    this.details.someUniqueProp = 'prop for UNO a';
  }
}

通过这种方式，您保持了继承。使用子实现在超级构造函数中调用setDetails()。或者，您可以在this.details = Object.assign(this.details, { complexObject: {} });调用更复杂的作业后执行super.setDetails();。

扩展父类创建的对象

1 个答案: