Skip to main content

๐Ÿ“„ Counter

Question Descriptionโ€‹

ๅปบ็ซ‹ไธ€ๅ€‹่จˆๆ•ธๅ™จ๏ผŒๅ…่จฑ้€้Ž add() ๅ’Œ minus() ๆ–นๆณ•ไพ†ๅขžๅŠ ๆˆ–ๆธ›ๅฐ‘่จˆๆ•ธๅ™จ็š„ๅ€ผใ€‚

1. JavaScript Versionโ€‹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter</title>
</head>
<body>
    <p>Count: <span id="count">0</span></p>
    <button id="addBtn">Add</button>
    <button id="minusBtn">Minus</button>

    <script src="counter.js"></script>
</body>
</html>

const createCounter = () => {
  let count = 0;
  const $countEl = document.querySelector('#count');

  const add = () => {
    count++;
    $countEl.textContent = count;
  };

  const minus = () => {
    count--;
    $countEl.textContent = count;
  };

  return { add, minus };
};

const counter = createCounter();

document.querySelector('#addBtn').addEventListener('click', counter.add);
document.querySelector('#minusBtn').addEventListener('click', counter.minus);

2. TypeScript Versionโ€‹

ไฝฟ็”จๅทฅๅป ๅ‡ฝๅผ createCounter ไพ†ๅปบ็ซ‹่จˆๆ•ธๅ™จ็‰ฉไปถ๏ผŒๅฐ‡ add() ๅ’Œ minus() ๆ–นๆณ•ๅ›žๅ‚ณ๏ผŒไธฆๅฐ‡ count ่ฎŠๆ•ธ่จญๅฎš็‚บ็งๆœ‰่ฎŠๆ•ธ๏ผŒ้ฟๅ…ๅค–้ƒจ็›ดๆŽฅๅญ˜ๅ–ใ€‚

type CounterType = {
  add: () => void;
  minus: () => void;
};

const createCounter = (): CounterType => {
  let count: number = 0;

  const add = () => {
    count++;
    console.log(count);
  };

  const minus = () => {
    count--;
    console.log(count);
  };

  return { add, minus };
};

const counter = createCounter();
counter.add(); // 1
counter.add(); // 2
counter.minus(); // 1