JavaScript デザイン パターン - 動作 - 状態

state パターンを使用すると、内部状態が変化したときにオブジェクトの動作を変更できます。

この例では、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/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (旧 Twitter): https://twitter.com/nhannguyendevjs/
• コーヒーを買ってください: https://www.buymeacoffee.com/nhannguyendevjs

以上がJavaScript デザイン パターン - 動作 - 状態の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。