javascript - 多组件类的 OOP

Question

我在编写通常由 3-5 个较小模块或类组成的模块时遇到了很大的困难。当这些子组件需要扩展，但主模块已经在创建和实现它们的基本版本时，就会出现问题。

示例

// main module design

class Car {
  constructor() {
    this.horn = new Horn();
    this.horn.on('honk', function() {
      console.log('honked');
    })
  }
}

class Horn {
  constructor() {
    this.sound = 'hornA.wav'
  }
}

// extended module design

class RaceCar extends Car {
  constructor() {
    super();
    this.horn = new RaceHorn();

    // event handler is now missing
  }
}

class RaceHorn extends Horn {
  constructor() {
    super();
    this.horn = 'hornB.wav'
  }
}

这确实是一个非常简化的示例，而我真正的问题涉及具有更多组件和更多设置要求的模块。我确实明白我可以将东西放入另一个 init 或 setup 或类似的函数中，但对我来说，我似乎本质上做错了一些事情。

Answer 1

对于这个问题，我强烈建议通过参数传递值。默认参数有很大帮助

// main module design

class Car {
  constructor( parametrizedHorn=Horn ) {
    this.horn = new parametrizedHorn();
    this.horn.on('honk', function() {
      console.log('honked');
    })
  }
}

class Horn {
  constructor() {
    this.sound = 'hornA.wav'
  }
}

// extended module design

class RaceCar extends Car {
  constructor() {
    super( RaceHorn );
  }
}

class RaceHorn extends Horn {
  constructor() {
    super();
    this.sound = 'hornB.wav'
  }
}

这可能会变得非常困惑，因此您可以使用初始化方法

// main module design

class Car {
  constructor() { ... }
  init( hornType=Horn ){
    this.initHorn( hornType );
  }
  initHorn( hornType=Horn ){
    this.horn = new Horn();
    this.horn.on('honk', function() {
      console.log('honked');
    })
  }
}

class Horn {
  constructor() {
    this.sound = 'hornA.wav'
  }
}

// extended module design

class RaceCar extends Car {
  constructor() {
    super();
  }
  init( hornType=RaceHorn ){
    this.initHorn( hornType );
  }
}

class RaceHorn extends Horn {
  constructor() {
    super();
    this.sound = 'hornB.wav'
  }
}

const raceCar = new RaceCar();
raceCar.init();

这是两种您可以使用的模块化模式，根据您已经使用的结构类型，您可以判断哪一种是最好的。最后的技巧是参数化类的内容，或者使用方法进一步模块化