上一篇提到，我以前看程式時很容易陷入一個狀況：

第一行懂
第二行也懂
第三行好像也懂
↓
整段還是不知道在幹嘛

後來我發現，問題常常不是語法完全不會，而是我一直在問：

「下一行要寫什麼？」

但更有用的問題其實是：

「下一步需要發生什麼？」

用一個最簡單的備忘錄開始

假設需求只有：

輸入內容
↓
按下 ＋
↓
畫面新增一筆備忘錄

HTML：

<input id="memoInput" placeholder="輸入備忘錄" />
<button id="addBtn">＋</button>

<ul id="memoList"></ul>

JavaScript：

const memoInput = document.querySelector("#memoInput");
const addBtn = document.querySelector("#addBtn");
const memoList = document.querySelector("#memoList");

addBtn.addEventListener("click", () => {
  const text = memoInput.value.trim();

  if (!text) return;

  const li = document.createElement("li");
  li.textContent = text;

  memoList.appendChild(li);

  memoInput.value = "";
});

如果以前的我看到這段，很可能會開始背：

先 querySelector
↓
再 addEventListener
↓
再 value
↓
再 createElement

但其實它不是固定順序。

它只是因為這個需求需要這些步驟。

先翻成人話

先不看語法，直接看流程：

使用者輸入「買牛奶」
↓
按下 ＋
↓
取得輸入內容
↓
如果沒有內容就停止
↓
建立一個 li
↓
把文字放進 li
↓
把 li 放到畫面
↓
清空輸入框

這時候再回頭看程式：

const text = memoInput.value.trim();

就是：

取得輸入框內容。

if (!text) return;

就是：

如果沒有有效內容，就不要繼續往下執行。

const li = document.createElement("li");

就是：

建立一個新的列表項目。

memoList.appendChild(li);

就是：

把剛剛建立的項目放進畫面。

這樣看之後，我就不需要死背：

value 後面一定要接 createElement

因為真正的原因是：

需求需要先取得資料
↓
再建立要顯示的內容

我現在會先問這四個問題

遇到一個小功能時，我會先問：

① 誰觸發這件事？
② 資料從哪裡來？
③ 中間要做什麼處理？
④ 最後要影響哪裡？

套回剛才的備忘錄：

① 誰觸發？
→ 使用者點 ＋

② 資料從哪裡來？
→ memoInput.value

③ 中間怎麼處理？
→ trim()、判斷是不是空值

④ 最後影響哪裡？
→ memoList

這四個問題比背整段程式更有用。

因為需求一換，語法可能會變，但思考方式還是能繼續用。

trim() 也不是為了湊語法

例如：

const text = memoInput.value.trim();

trim() 會移除字串前後的空白。

例如：

"   買牛奶   ".trim();

會變成：

"買牛奶"

但中間的空白不會被刪掉：

"買  牛奶".trim();

仍然是：

買  牛奶

所以它解決的是：

使用者不小心在前後多輸入空白。

而不是「看到 input 就一定要加 trim」。

這也是我後來很想改掉的一個學習習慣：

不要只記某個語法常出現在哪裡，要先知道它解決什麼問題。

這個方法到了真實專案還是一樣

備忘錄只有幾行，但到了 React 專案，我現在也是用類似的方式看。

例如看到一個表單頁：

使用者進入頁面
↓
取得資料
↓
把資料放進 Form
↓
使用者修改欄位
↓
按下 Submit
↓
送 API
↓
收到 Response
↓
更新畫面

我會先找：

資料來源在哪？
↓
哪個 function 負責取得？
↓
誰觸發 submit？
↓
Request 在哪裡送？
↓
Response 回來後去了哪裡？

而不是一開始就停在每個陌生語法上。

因為如果整條流程都還沒看懂，就算每個單字都查過，最後還是很容易迷路。

語法還是要學，但不用把整份答案背起來

這不是說語法不重要。

像：

querySelector
addEventListener
value
trim
createElement
appendChild

都還是需要知道。

只是順序應該反過來：

先理解需求
↓
拆成幾個步驟
↓
知道每一步需要做什麼
↓
再去找適合的語法

而不是：

先背一整份程式
↓
需求換一下
↓
不知道怎麼改

今天想留下的一句話

我以前很常問：

「下一行要寫什麼？」

現在比較想問：

「下一步需要發生什麼？」

當我開始用這個方式看程式後，程式碼就比較不像一串固定順序的咒語。

它開始變成：

需求
↓
步驟
↓
資料
↓
事件
↓
結果

而下一個我當時很容易搞混的問題就是：

我明明把資料放進 Array 了，為什麼重新整理頁面後又全部不見？

下一篇就來看：

資料到底住在哪裡？