JavaScript 디자인 패턴 - 동작 - 상태

상태 패턴을 사용하면 객체의 내부 상태가 변경될 때 객체의 동작을 변경할 수 있습니다.

이 예에서는 next() 메소드로 상태를 업데이트하는 Order 클래스를 사용하여 간단한 상태 패턴을 생성합니다.

const ORDER_STATUS = {
  waitingForPayment: 'Waiting for payment',
  shipping: 'Shipping',
  delivered: 'Delivered',
};

class OrderStatus {
  constructor(name, nextStatus) {
    this.name = name;
    this.nextStatus = nextStatus;
  }

  next() {
    return new this.nextStatus();
  }
}

class WaitingForPayment extends OrderStatus {
  constructor() {
    super(ORDER_STATUS.waitingForPayment, Shipping);
  }
}

class Shipping extends OrderStatus {
  constructor() {
    super(ORDER_STATUS.shipping, Delivered);
  }
}

class Delivered extends OrderStatus {
  constructor() {
    super(ORDER_STATUS.delivered, Delivered);
  }
}

class Order {
  constructor() {
    this.state = new WaitingForPayment();
  }

  next() {
    this.state = this.state.next();
  }
}

export { Order };

전체 예가 여기에 있습니까? https://stackblitz.com/edit/vitejs-vite-6zcfql?file=state.js

결론

객체의 동작이 상태에 따라 달라지고 해당 상태에 따라 런타임에 동작이 변경되는 경우 이 패턴을 사용하세요.

---

도움이 되셨기를 바랍니다. 읽어주셔서 감사합니다. ?

연결하자! 저를 다음에서 만나보실 수 있습니다:

• 매체: https://medium.com/@nhannguyendevjs/
• 개발자: https://dev.to/nhannguyendevjs/
• 해시노드: https://nhannguyen.hashnode.dev/
• 링크드인: https://www.linkedin.com/in/nhannguyendevjs/
• X(이전 Twitter): https://twitter.com/nhannguyendevjs/
• 커피 사주세요: https://www.buymeacoffee.com/nhannguyendevjs

위 내용은 JavaScript 디자인 패턴 - 동작 - 상태의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!