OOP用于多组件类

时间:2017-02-11 22:19:38

标签: javascript oop

我很难写出通常由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'
  }
}

这确实是一个非常简化的示例,而我的真正问题涉及具有更多组件和更多设置要求的模块。我确实理解我可以把事情放到另一个initsetup或类似的功能中,但对我来说,似乎我本来就做错了。

1 个答案:

答案 0 :(得分: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();

这些是您可以使用的两种模块化模式,根据您已经使用的结构类型,您可以判断哪种模式最佳。最后的诀窍是参数化你的类的内容,或者使用方法进一步模块化