前端設計模式——過濾器模式

前端設計模式中的過濾器模式（Filter Pattern）是一種結構型設計模式，它允許我們使用不同的條件來過濾一組對象，並返回符合條件的對象列表。

在過濾器模式中，我們有一個包含多個對象的列表，需要根據一些條件來篩選出符合條件的對象。通常情況下，可以使用多個過濾器來實現這個功能。每個過濾器都是一個獨立的類，它實現了一個過濾條件，我們可以將這些過濾器組合在一起，來實現複雜的過濾操作。

在實際開發中，可以使用過濾器模式來實現諸如搜索、過濾、排序等功能。例如，在一個商品列表頁面中，我們可以使用過濾器模式來根據價格、品牌、類型等條件來篩選出用戶感興趣的商品。

以下是一個簡單的 JavaScript 示例代碼，演示瞭如何使用過濾器模式來篩選數組中的元素：

class Filter {
  constructor(criteria) {
    this.criteria = criteria;
  }

  meetCriteria(elements) {
    return elements.filter(element => this.criteria(element));
  }
}

class PriceFilter extends Filter {
  constructor(price) {
    super(element => element.price <= price);
  }
}

class BrandFilter extends Filter {
  constructor(brand) {
    super(element => element.brand === brand);
  }
}

const products = [
  { name: 'Product A', price: 10, brand: 'Brand A' },
  { name: 'Product B', price: 20, brand: 'Brand B' },
  { name: 'Product C', price: 30, brand: 'Brand C' },
];

const priceFilter = new PriceFilter(20);
const brandFilter = new BrandFilter('Brand A');

const filteredProducts = priceFilter.meetCriteria(products);
const finalProducts = brandFilter.meetCriteria(filteredProducts);

console.log(finalProducts);
// Output: [{ name: 'Product A', price: 10, brand: 'Brand A' }]

在上面的示例代碼中，我們定義了一個 `Filter` 類作為過濾器模式的基類，然後我們定義了兩個子類 `PriceFilter` 和 `BrandFilter`，它們分別根據價格和品牌來過濾商品。我們還定義了一個商品數組 `products`，然後使用這兩個過濾器來篩選出價格低於等於 20 並且品牌為 'Brand A' 的商品，最後列印出符合條件的商品列表。