控制反轉 IoC 與設計模式高品質實戰指南 應用策略模式與依賴注入實現高度去耦合架構

// 初始版本只有基本角色屬性
const player1 = {
  name: "玩家1",
  level: 1,
  health: 100,
  damage: 10,
};

// 一段時間後，遊戲需要更多的角色屬性
const player2 = {
  name: "玩家2",
  level: 5,
  health: 150,
  damage: 15,
  agility: 20, // 新需求：敏捷度
  inventory: ["劍", "盾"], // 新需求：背包
};

// 原始處理邏輯：容易導致維護災難
function processPlayerData(
  name,
  level,
  health,
  damage,
  agility,
  inventory,
  statusCode
) {
  if (
    health > 10 &&
    (name === "foo" || damage < 5) &&
    (name !== "bar" || agility > 20)
  ) {
    // ...
  }
  // 非常長的函數內容...
  if (statusCode === 20100) {
    // ...
  }

  if (statusCode === 20101) {
    // ...
  }
}

// 檢查玩家是否成年
function isPlayerAdult(player) {
  return player.age >= 18;
}

function checkAge(age) {
  // 使用 Guard Clause 檢查年齡是否小於 0
  if (age < 0) {
    console.log("年齡不能為負數");
    return; // 提前返回，避免後續程式執行
  }

  // 使用 Guard Clause 檢查年齡是否小於 18
  if (age < 18) {
    console.log("你尚未成年");
    return; // 提前返回，避免後續程式執行
  }

  // 如果年齡符合標準，執行後續操作
  console.log("你是一個成年人");
  // 這裡可以繼續執行其他操作
}

// 測試函數
checkAge(25); // 你是一個成年人
checkAge(12); // 你尚未成年
checkAge(-5); // 年齡不能為負數

const Either = {
  left: (value) => ({
    isLeft: true,
    value,
  }),

  right: (value) => ({
    isLeft: false,
    value,
  }),
};

const isInvalidAge = (age) => isNaN(age) || age < 0;
const isChild = (age) => age < 18;

function checkAge(age) {
  if (isInvalidAge(age)) {
    return Either.left("年齡不能為負數");
  }

  if (isChild(age)) {
    return Either.left("未成年");
  }

  return Either.right("成年");
}

function processAge(age) {
  return checkAge(age).isLeft
    ? `錯誤：${checkAge(age).value}`
    : `結果：${checkAge(age).value}`;
}

console.log(processAge(25)); // 結果：成年
console.log(processAge(15)); // 結果：未成年
console.log(processAge("abc")); // 錯誤：年齡無效

// 策略元件
const StrategyA = ({ data }) => {
  // 策略 A 的實現
  return <div>Strategy A: {data}</div>;
};

const StrategyB = ({ data }) => {
  // 策略 B 的實現
  return <div>Strategy B: {data}</div>;
};

// 上下文元件
const ContextComponent = ({ strategy, data }) => {
  // 根據選擇的策略渲染對應的元件
  if (strategy === "A") {
    return <StrategyA data={data} />;
  } else if (strategy === "B") {
    return <StrategyB data={data} />;
  }
};

const App = () => {
  const strategy = "A"; // 選擇策略 A 或 B
  const data = "Hello, Strategy Pattern!";

  return <ContextComponent strategy={strategy} data={data} />;
};

// 策略 A：確保年齡為正數
// 策略 B：確保年齡成年
const AgeVerificationStrategies = {
  adult: (age) => age >= 18,
  positive: (age) => age >= 0,
};

const ContextComponent = ({ strategy, age }) => {
  const verifyAge = AgeVerificationStrategies[strategy];

  if (verifyAge(age)) {
    return <div>年齡驗證通過：{age} 歲</div>;
  } else {
    return <div>年齡驗證失敗：{age} 歲</div>;
  }
};

const App = () => {
  const strategy = "adult"; // 選擇策略 adult 或 positive
  const age = 25;

  return <ContextComponent strategy={strategy} age={age} />;
};

const Input = ({ normalize }) => {
  const [value, setValue] = useState("");

  return (
    <input
      value={text}
      onChange={({ target }) => setValue(normalize(target.value))}
    />
  );
};

<Input normalize={(text) => text.toUpperCase()} />;
<Input normalize={(text) => text.toLowerCase()} />;

const Input = ({ onInputChange, isAgeValid }) => {
  const [value, setValue] = useState("");
  const [isValid, setIsValid] = useState(true);

  const handleInputChange = ({ target }) => {
    const inputValue = target.value;
    const normalizedValue = onInputChange(inputValue);
    setValue(normalizedValue);

    // 檢查年齡限制
    const age = parseInt(normalizedValue, 10);
    const isValidAge = isAgeValid(age);
    setIsValid(isValidAge);
  };

  return (
    <div>
      <input
        value={value}
        onChange={handleInputChange}
        style={{ borderColor: isValid ? "green" : "red" }}
      />
      {!isValid && <p>年齡必須在 18 到 100 歲之間</p>}
    </div>
  );
};

const App = () => {
  const toUpperCaseNormalize = (text) => text.toUpperCase();
  const isAgeValid = (age) => age >= 18 && age <= 100;

  return (
    <div>
      <Input onInputChange={toUpperCaseNormalize} isAgeValid={isAgeValid} />
    </div>
  );
};

const isAgeValid = (age) => age >= 18 && age <= 100;

<Input onInputChange={toUpperCaseNormalize} isAgeValid={isAgeValid} />;