2

Procurando implementar el patrón de diseño de estados (state) sobre un objeto que tendrá estados definidos (estáticos), he topado con una duda.

De acuerdo con varios libros (y especialmente: Design Patterns: Elements of Reusable Object-Oriented Software - The GoF) se detalla que la lógica deberá ser responsabilidad de los estados en lugar del contexto; brindado un enfoque polimorfo y de bajo acoplamiento.

Como analogía a un problema más sencillo, se me ocurrió el siguiente.


Problema

Realizar la simulación de un vehículo con los estados y acciones a continuación:

  • Apagado:
    • Arrancar: enciende el motor.
  • Encendido:
    • Avanzar: avanza el vehículo x cantidad de km.

class CarState {
  constructor(ctx) {
    this.ctx = ctx;
  }

  turnOff() {
    throw new Error('The car is already off.');
  }

  turnOn() {
    throw new Error('The car is already on.');
  }

  moveForward() {
    throw new Error('Forbidden operation.');
  }
}

class OffCarState extends CarState {
  turnOn() {  
    let state = new OnCarState(this.ctx);
    this.ctx.setState(state);
  }
}

class OnCarState extends CarState {
  turnOff() {
    let state = new OffCarState(this.ctx);
    this.ctx.setState(state);
  }

  moveForward() {
    this.ctx.km += 1;
    this.ctx.fuel -= 0.5;
    console.log('Avanzando 1km.');

    if (this.ctx.fuel < 0.5) {
      console.log('Sin combustible: apagando motor.');
    
      let state = new OffCarState(this.ctx);
      this.ctx.setState(state);
    }
  }
}

class Car {
  constructor() {
    this.fuel = 1;
    this.km = 0;
  
    this.state = new OffCarState(this);
  }

  turnOff() {
    this.state.turnOff();
  }

  turnOn() {
    this.state.turnOn();
  }

  moveForward() {
    this.state.moveForward();
  }
  
  setState(state) {
    let from = this.state.constructor.name,
         to = state.constructor.name;

    console.log(`State: ${from} -> ${to}`);
    this.state = state;
  }
  
  printStats() {
     let p  = document.getElementsByTagName('span')[0],
      state = this.state instanceof OnCarState ? 'Encendido' : 'Apagado';
      
     p.innerText = `Estado: ${state}, Km: ${this.km}, Gas: ${this.fuel}.`;
  }

}

/**
 * Ejemplo en uso.
 */
let car = new Car();

let btnTurnOn  = document.getElementById('turn-on'),
    btnTurnOff = document.getElementById('turn-off'),
    btnMoveFwd = document.getElementById('move-fwd');

btnTurnOn.addEventListener('click', car.turnOn.bind(car));
btnTurnOff.addEventListener('click', car.turnOff.bind(car));
btnMoveFwd.addEventListener('click', car.moveForward.bind(car));

document.addEventListener('click', car.printStats.bind(car));
document.addEventListener('load', car.printStats.bind(car))
<button id="turn-on">Encender</button>
<button id="turn-off">Apagar</button>
<button id="move-fwd">Avanzar</button>

<p>Tablero: <span></span></p>

La duda es: ¿lo adecuado es modificar las propiedades del contexto desde los estados?

En caso de que el objeto Car sea de un tercero (y por tanto no implementa state) ¿sería óptimo un esquema como el siguiente?

Diagrama de clases - Patrón de diseño: estado

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.