專案一長大，規則就越來越多。折扣怎麼算？列表要怎麼排？金流費率怎麼換？如果你腦中浮現一排 if/else，那這篇剛好救你。

策略（Strategy）模式做的事很單純：把「做法」獨立成可替換的策略，呼叫端只要用同一套介面就能切換。

你可以從最常見的折扣、排序開始，把凌亂的分支抽離成清楚的小函數或類別；再往上，加入註冊表、預設與回退、非同步策略、測試與觀測。文中會用 JavaScript 實作一路演練：從基礎版的 class，到偏函數式的 Map 寫法，再到實務案例與踩雷清單。希望本篇文章能幫助到需要的您。

// 共同「介面」約定（以 JSDoc 註解協助開發者維持一致）
/**
 * @typedef {Object} DiscountStrategy
 * @property {(amount: number, options?: any) => number} apply - 回傳折扣金額（非折後價）
 */

// 具體策略：百分比折扣
class PercentageDiscount {
  /**
   * @param {number} rate 0~1 之間，例如 0.2 代表 20% 折扣
   */
  constructor(rate) {
    if (rate < 0 || rate > 1) throw new Error('rate 必須介於 0~1');
    this.rate = rate;
  }
  /** @param {number} amount */
  apply(amount) { return amount * this.rate; }
}

// 具體策略：固定金額折扣
class FlatDiscount {
  constructor(fee) {
    if (fee < 0) throw new Error('fee 不可為負數');
    this.fee = fee;
  }
  apply(amount) { return Math.min(this.fee, amount); }
}

// 具體策略：滿額折抵
class ThresholdDiscount {
  constructor(threshold, off) {
    this.threshold = threshold;
    this.off = off;
  }
  apply(amount) {
    return amount >= this.threshold ? Math.min(this.off, amount) : 0;
  }
}

// Context：對外提供「計算折後價」服務，持有策略
class PriceCalculator {
  /** @param {DiscountStrategy} strategy */
  constructor(strategy) { this.strategy = strategy; }
  setStrategy(strategy) { this.strategy = strategy; }
  /** @param {number} base */
  finalAmount(base) {
    const discount = this.strategy.apply(base);
    return Math.max(0, base - discount);
  }
}

// 使用
const cartTotal = 1000;
const calculator = new PriceCalculator(new PercentageDiscount(0.2));
console.log(calculator.finalAmount(cartTotal)); // 800

calculator.setStrategy(new FlatDiscount(150));
console.log(calculator.finalAmount(cartTotal)); // 850

calculator.setStrategy(new ThresholdDiscount(1200, 300));
console.log(calculator.finalAmount(cartTotal)); // 1000（未達門檻，不折）

重點：

Context 不知道策略內部邏輯，只負責呼叫 apply。

新增策略＝新增一個類別，不用改舊碼（符合開放封閉原則）。

函數式範例：用物件 Map + 純函數實作

不用 class 也行，很多 JS 團隊偏好純函數 + Map，更輕量、易測試。

// 每個策略都是 (amount, options) => discount
const strategies = {
  percentage: (amount, { rate }) => {
    if (rate < 0 || rate > 1) throw new Error('rate 必須介於 0~1');
    return amount * rate;
  },
  flat: (amount, { fee }) => Math.min(fee, amount),
  threshold: (amount, { threshold, off }) => amount >= threshold ? Math.min(off, amount) : 0,
};

/**
 * 通用計算器：以 key 選策略，未命中走預設
 */
function calcFinalAmount(base, key, options = {}, defaultKey = 'flat') {
  const fn = strategies[key] ?? strategies[defaultKey];
  const discount = fn(base, options);
  return Math.max(0, base - discount);
}

// 使用
console.log(calcFinalAmount(1000, 'percentage', { rate: 0.1 })); // 900
console.log(calcFinalAmount(1000, 'flat', { fee: 120 }));        // 880
console.log(calcFinalAmount(800, 'threshold', { threshold: 1200, off: 300 })); // 800

這種寫法：

很容易透過設定檔或後端回傳 key來決定策略；

測試只要針對每個函數打；

適合 Node 與前端共用一套策略實作。

進階案例 A：金流手續費策略（含非同步）

情境：不同金流商收費方式不同，且有的需要呼叫外部 API（例如動態費率或匯率）。

/**
 * @typedef {Object} PaymentInput
 * @property {number} amount - 金額（原幣）
 * @property {string} currency - 貨幣代碼，如 'USD'
 * @property {boolean} isInternational - 是否國際卡
 */

/** @typedef {(input: PaymentInput) => Promise<number>} FeeStrategyAsync */

// Stripe：固定 2.9% + 0.3，國際卡加 1%
const stripeFee /** @type {FeeStrategyAsync} */ = async (input) => {
  const base = input.amount * 0.029 + 0.3;
  const intl = input.isInternational ? input.amount * 0.01 : 0;
  return base + intl;
};

// AcmePay：需查匯率 API（此處用假資料模擬）
async function fetchFxRate(from, to) {
  await new Promise(r => setTimeout(r, 5)); // 模擬 I/O
  if (from === to) return 1;
  return 1.1; // 假設 USD->TWD 匯率
}
const acmeFee /** @type {FeeStrategyAsync} */ = async (input) => {
  const rate = await fetchFxRate(input.currency, 'USD');
  const amountUSD = input.amount / rate;
  return amountUSD * 0.025 + 0.25;
};

const feeStrategies = { stripe: stripeFee, acme: acmeFee };

/** 計算總費用（非同步） */
async function calcFee(providerKey, input) {
  const strategy = feeStrategies[providerKey];
  if (!strategy) throw new Error(`未知金流：${providerKey}`);
  return strategy(input);
}

// 使用
(async () => {
  const input = { amount: 100, currency: 'USD', isInternational: true };
  console.log(await calcFee('stripe', input)); // 2.9 + 0.3 + 1 = 4.2
  console.log(await calcFee('acme', input));   // 依假匯率計算
})();

要點：

策略可以是非同步函數，Context 以 await 方式統一調用；

呼叫端不管策略細節，可在執行期更換策略。

進階案例 B：可插拔排序策略（前端常見）

商品列表要支援多種排序：最新、熱度、評分、價格（升/降）。

/**
 * @typedef {{ id:string, createdAt:number, views:number, rating:number, price:number }} Item
 */

/** @type {Record<string, (a: Item, b: Item) => number>} */
const comparators = {
  newest: (a, b) => b.createdAt - a.createdAt,
  hot:    (a, b) => b.views - a.views,
  rating: (a, b) => b.rating - a.rating,
  priceAsc:  (a, b) => a.price - b.price,
  priceDesc: (a, b) => b.price - a.price,
};

function sortItems(items, key, fallback = 'newest') {
  const cmp = comparators[key] ?? comparators[fallback];
  // 保持純粹：回傳新陣列，避免就地排序影響外部狀態
  return [...items].sort(cmp);
}

// 使用
const data = [
  { id:'a', createdAt: 10, views: 50, rating: 4.5, price: 100 },
  { id:'b', createdAt: 20, views: 30, rating: 4.7, price: 80  },
];
console.log(sortItems(data, 'priceAsc'));

進階案例 C：影像處理策略（依賴注入、替換引擎）

同一張圖，可能要用不同壓縮器（瀏覽器原生 / WebAssembly / 雲端 API）。

/**
 * @typedef {(blob: Blob, options?: any) => Promise<Blob>} CompressStrategy
 */

// 瀏覽器 Canvas 壓縮（示意；細節視專案而定）
const browserCanvasCompress = async (blob, { quality = 0.8 } = {}) => {
  const img = await createImageBitmap(blob);
  const canvas = new OffscreenCanvas(img.width, img.height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  const result = await canvas.convertToBlob({ type: 'image/jpeg', quality });
  return result;
};

// WebAssembly 壓縮（假想）
const wasmCompress = async (blob, { level = 3 } = {}) => {
  // 假設有 wasmLib.compress
  // return wasmLib.compress(blob, { level });
  return blob; // demo
};

// 雲端 API 壓縮（上傳 → 壓縮 → 下載）
const cloudCompress = async (blob, { token }) => {
  // fetch 上傳與下載（省略），回傳壓縮後 Blob
  return blob; // demo
};

const compressors = { browser: browserCanvasCompress, wasm: wasmCompress, cloud: cloudCompress };

async function compressImage(blob, key, options = {}, fallback = 'browser') {
  const fn = compressors[key] ?? compressors[fallback];
  return fn(blob, options);
}

這種設計讓你可以在不同環境（本機、雲端、WebWorker）替換實作而不動核心呼叫碼。

與其他模式的差異

Strategy vs State：

Strategy 用於可替換的算法；State 表示物件的狀態流轉導致行為改變。若「狀態 A→B→C」是流程重點，考慮 State。

Strategy vs Template Method：

Template 固定流程、部分步驟讓子類覆寫；Strategy 是把整個算法抽成獨立替換單元。

Strategy vs Factory：

Factory 負責建立對象；Strategy 關注執行行為。兩者常搭配，用 Factory 幫你挑選/產生策略。

Strategy vs Policy（政策物件）：

很多語境下幾乎同義，強調以物件封裝一套規則（策略）。

策略選擇與註冊表（Registry）設計

集中管理策略，便於擴充與治理（權限、版本、灰度發布）。

class StrategyRegistry {
  constructor() { this.map = new Map(); }
  register(key, strategy) {
    if (this.map.has(key)) throw new Error(`策略重複：${key}`);
    this.map.set(key, strategy);
  }
  get(key) { return this.map.get(key); }
  has(key) { return this.map.has(key); }
  keys() { return [...this.map.keys()]; }
}

// 使用
const registry = new StrategyRegistry();
registry.register('percentage', (amount, { rate }) => amount * rate);
// ...更多註冊
function runStrategy(key, ...args) {
  const s = registry.get(key);
  if (!s) throw new Error(`找不到策略：${key}`);
  return s(...args);
}

例外處理、預設策略與回退設計

預設策略（Default）：當 key 無效時回到預設（例如 flat:0）。

回退（Fallback）：主要策略失敗（如 API 掛了）時，退回備援策略。

防衛式編程：對輸入做範圍驗證（如折扣率 0~1）。

async function runWithFallback(primary, fallback) {
  try { return await primary(); }
  catch (e) { return fallback(); }
}

效能、測試與維護性

效能：策略模式本身開銷極低；真正的成本在策略內部算法。

單元測試：對每個策略分開測，Context 測「是否正確呼叫策略」。

可觀測性：記錄策略 key、耗時、錯誤率，便於灰度與回退。

版本控制：策略以檔案區隔；避免一個檔案內塞爆多策略。

文件化：針對每個策略說明用途、前置條件、參數範圍。

從 if/else 地獄重構到策略模式（逐步實操）

function discount(amount, user) {
  if (user.level === 'VIP') {
    return amount * 0.2;
  } else if (user.level === 'GOLD') {
    return amount * 0.1;
  } else if (user.coupon && user.coupon.type === 'FLAT') {
    return Math.min(user.coupon.value, amount);
  } else {
    return 0;
  }
}

步驟：

找出變化點：VIP/GOLD/COUPON 規則是可替換算法。

抽共同介面：每種回傳折扣金額。

移除條件分支：改成 key→策略的 Map。

建立選擇器：由 user 狀態推導策略 key（或由外部設定）。

加入預設與回退。

重構後：

const discountStrategies = {
  VIP:   (amount) => amount * 0.2,
  GOLD:  (amount) => amount * 0.1,
  COUPON_FLAT: (amount, { value }) => Math.min(value, amount),
  NONE:  () => 0,
};

function pickKey(user) {
  if (user.level === 'VIP')  return 'VIP';
  if (user.level === 'GOLD') return 'GOLD';
  if (user.coupon?.type === 'FLAT') return 'COUPON_FLAT';
  return 'NONE';
}

function discount(amount, user) {
  const key = pickKey(user);
  const fn = discountStrategies[key] ?? discountStrategies.NONE;
  const params = key === 'COUPON_FLAT' ? { value: user.coupon.value } : undefined;
  return fn(amount, params);
}