前端設計模式——狀態模式

狀態模式（State Pattern）：將對象的行為和狀態分離，使得對象可以根據不同的狀態來改變自己的行為。在前端開發中，可以使用狀態模式來管理頁面的狀態和響應用戶的交互。

在狀態模式中，對象的行為取決於其內部狀態，當狀態發生變化時，對象的行為也會相應地發生改變。這種模式通過將狀態抽象為獨立的類來實現，每個狀態類都有其自己的行為和相應的方法。

在前端開發中，狀態模式通常用於處理複雜的用戶交互邏輯，例如根據用戶的操作更改頁面上的狀態。以下是狀態模式的一些常見應用場景：

1. 表單驗證：在用戶提交表單之前，可以使用狀態模式來驗證表單中的輸入是否符合規定。
1. 游戲開發：在游戲中，對象的狀態可能會隨著游戲的進程而發生變化。使用狀態模式可以幫助開發者輕鬆管理和處理這些狀態變化。
1. 狀態切換：在前端應用中，一些操作會導致頁面狀態的改變，例如打開或關閉側邊欄，展開或摺疊列表等。使用狀態模式可以幫助開發者管理這些狀態變化。

總之，狀態模式是一種靈活而有用的設計模式，可以使代碼更加清晰和可維護，它可以幫助開發者輕鬆管理和處理複雜的用戶交互邏輯。

以下是一個簡單的狀態模式示例，假設我們正在開發一個購物車頁面，用戶可以向購物車中添加或刪除商品。購物車的狀態可以是“空的”或“非空的”，當購物車為空時，用戶需要被提示添加商品，當購物車非空時，用戶可以查看商品列表和刪除商品。

首先，我們定義一個購物車狀態的抽象類：

class CartState {
  addToCart() {}
  removeFromCart() {}
  showMessage() {}
}

接下來，我們定義購物車的兩種狀態：空狀態和非空狀態。空狀態下用戶需要被提示添加商品，非空狀態下用戶可以查看商品列表和刪除商品。

class EmptyCartState extends CartState {
  addToCart() {
    console.log('Product added to cart');
    // 將購物車狀態設置為非空狀態
    this.cart.setState(new NonEmptyCartState(this.cart));
  }

  showMessage() {
    console.log('Your cart is empty, please add some products.');
  }
}

class NonEmptyCartState extends CartState {
  removeFromCart() {
    console.log('Product removed from cart');
    // 如果商品列表為空，則將購物車狀態設置為空狀態
    if (this.cart.products.length === 0) {
      this.cart.setState(new EmptyCartState(this.cart));
    }
  }

  showMessage() {
    console.log(`Your cart contains ${this.cart.products.length} products:`);
    console.log(this.cart.products.join(', '));
  }
}

最後，我們定義購物車類，併在購物車類中使用狀態模式：

class ShoppingCart {
  constructor() {
    // 初始狀態為購物車為空
    this.state = new EmptyCartState(this);
    this.products = [];
  }

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

  addToCart(product) {
    this.products.push(product);
    this.state.addToCart();
  }

  removeFromCart(product) {
    const index = this.products.indexOf(product);
    if (index !== -1) {
      this.products.splice(index, 1);
      this.state.removeFromCart();
    }
  }

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

在上面的代碼中，我們創建了一個`ShoppingCart`類，它包含了兩個主要方法`addToCart`和`removeFromCart`，這些方法將商品添加到購物車中或從購物車中刪除。當這些方法被調用時，購物車的狀態將會根據商品列表的狀態自動更新。另外，我們還提供了一個`showMessage`方法，用於顯示購物車當前的狀態信息。

現在，我們可以使用這個購物車類來管理我們的購物車狀態了：

const cart = new ShoppingCart();

cart.showMessage(); // Your cart is empty, please add some products.

cart.addToCart('apple');
cart.addToCart('banana');

cart.showMessage(); // Your cart contains 2 products: apple, banana.

cart.removeFromCart('apple');

cart.showMessage(); // Your cart contains 1 products: banana.

cart.removeFromCart('banana');

cart.showMessage(); // Your cart is empty, please add some products.

通過使用狀態模式，我們可以輕鬆管理購物車的狀態，並且代碼更加清晰和可維護。