conventions

Singleton 的寫法 class AnimalManager { constructor() { this.init() } init() { this.name = 'AnimalManager' } } export default new AnimalManager() class AnimalManager { constructor() { if (Animal.instance) { return Animal.instance } this.init() Animal.instance = this } init() { this.name = 'AnimalManager' } } export default AnimalManager // typescript 可以用靜態工廠模式 (Static Factory Pattern) class AnimalManager { private static instance: AnimalManager; public static getInstance(): AnimalManager { if (!AnimalManager.instance) { AnimalManager.instance = new AnimalManager(); } return AnimalManager....

變數的命名 (for Variables) 使用 camelCase 為變數命名 // bad var dogname = 'Droopy'; // bad var dog_name = 'Droopy'; // bad var DOGNAME = 'Droopy'; // bad var DOG_NAME = 'Droopy'; // good var dogName = 'Droopy'; 明確表明意義的命名 (self-explanatory and describe the stored value) // bad var d = 'Scooby-Doo'; // bad var name = 'Scooby-Doo'; // good var dogName = 'Scooby-Doo'; 布林值的命名 (for Booleans) 使用開頭為 is/has 的命名 (Use is or has as prefixes)...

淺而易懂的命名 (Use Intention-Revealing Names) 如果一個命名，還需要註解來解釋它，就代表還不夠清楚 // Bad var dog; // the dog is barking // Good var barkingDog; 有意義的命名 (Make Meaningful Distinctions) 使用帶有目的性或是意義明確的命名，避免使用縮寫、或是用數字編號作為命名 // Bad var e = 'event' // Good var event = 'event' 避免誤導 (Avoid Disinformation) 避免用不同字眼代表同一件事，例如：info/data 避免贅字 避免兩個命名太相像 可以被搜尋 (Use Searchable Names) 避免用數字與單一字母命名，可改採用 Constant 或 Enum 賦予意義 longer names比shorter names好，至少搜尋容易定位 可以被發音 (Use Pronounceable Names) 使用可以發音的命名可以幫助溝通

重點 單向資料流 (one-way data flow) 資料由上往下傳遞 狀態權責 (父或子層) 元件設計五步驟 1. 將 UI 拆分成 Component 👉 Programming (遵守單一職責原則 (SRP)) 單一職責原則 (Single Responsibility Principle) 👉 CSS (依照 selectors 區分) 👉 Design (依照設計圖分層區分) (若 JSON 資料的結構良好，通常能直接映射到相對應的 Component) 2. 建立一個靜態版本的 Component (沒有任何互動功能) 3. 設計異動最小但最完整的 state (有些 state 是不必要的，靠 props 傳遞即可，不需要再宣告一次 useState 來裝載 props) 4. state 要放哪裡？ (當有多個子 component 需要共用 state，則 state 必須往上提升到父 component 管理 (Lifting State Up)) 5. 反向數據流 (子層改變父層狀態) 參考規範 基礎規範 JS Sweetness

一個 類/模塊/元件 應該有且只有一個改變的原因。 (如果使用到多於一個的動機去改變一個 類/模塊/元件，那麼這個 類/模塊/元件 就具有多於一個的職責，不符合 SRP 原則) Component const getTitle = ({ type, title }) => { switch (type) { case 'a': return 'A'; case 'b': // ❌ 控制項變成兩個 if (title) return `B-${title}`; else return 'B'; case 'c': return 'C'; default: return null; } }; const getContent = (type) => { switch (type) { case 'a': return '是否刪除該筆資料？'; case 'b': return '是否更新該筆資料？'; case 'c': return '請確認內容無誤。'; default: return null; } }; const getActions = ({ type, actions, onConfirm, onCancel }) => { switch (type) { case 'a': case 'b': return ( <div> {actions....

Switch-case to Object // ❌ 過多無謂的判斷及重新復賦值 const getDay = (type) => { let day = null; switch (type) { case 0: day = 'Sunday'; break; case 1: day = 'Monday'; break; case 2: day = 'Tuesday'; break; case 3: day = 'Wednesday'; break; case 4: day = 'Thursday'; break; case 5: day = 'Friday'; break; case 6: day = 'Saturday'; break; default: break; } return day; }; // ✅ 變得更一目了然、簡單明瞭 const days = { 0: 'Sunday', 1: 'Monday', 2: 'Tuesday', 3: 'Wednesday', 4: 'Thursday', 5: 'Friday', 6: 'Saturday', 7: 'Sunday', }; const getDay = (type) => { return days[type] || null; }; Default parameters // ❌ 預設參數不為最後一個 function getPassword(account, name = '', id) { // do something } // ❌ 若預設參數不為最後一個，則可能會有這種程式碼出現 (bad) getPassword(account, undefined, id); // ✅ 保持預設參數為最後一個的習慣 function getPassword(account, id, name = '') { // do something } // ✅ 若為最後一個，則可以避免剛才那種程式碼出現 (good) getPassword(account, id); Multiple parameters // ❌ 若過多個參數須控制，則會造成閱讀上的困難 function getPassword(account, id, name, birthday, sex, phone) { // do something } // ❌ 呼叫此 function 時，會需要數第幾個 getPassword(acc, id, roleName, roleBirthDay, roleSex, rowPhone); // ✅ 建議超過 3 個就改為物件 function getPassword({ account, id, name, birthday, sex, phone }) { // do something } // ✅ 呼叫此 function 時，也不需要數第幾個，名稱直接對應 getPassword({ account, id, name, birthday, sex, phone });

component 保持頂層 (Top-Level) 宣告 // ❌ const App = () => { const Container = ({ children }) => <section>{children}</section>; const Button = ({ onClick }) => <button onClick={onClick}>Click Me!</button>; const handleClick = () => { // do something... }; return ( <Container> <Button onClick={handleClick} /> </Container> ); }; // ✅ const Container = ({ children }) => <section>{children}</section>; const Button = ({ onClick }) => <button onClick={onClick}>Click Me!</button>; const App = () => { const handleClick = () => { // do something....