JavaScript 程式設計最佳實踐
本文將解釋 JavaScript 程式設計中的最佳實踐。
我們將介紹 JavaScript 的關鍵最佳實踐並提供具體的程式碼範例。
YouTube Video
JavaScript 程式設計最佳實踐
在程式設計中，不僅要寫出「能運作的程式碼」，更要寫出可維護、高效且可靠的程式碼。遵循「最佳實踐」能讓你的程式碼更容易被其他開發者理解，更容易維護與擴充，並最終減少錯誤、提升效能。
透過程式碼範例，一起來看看 JavaScript 的關鍵最佳實踐。
使用清晰且描述性的變數名稱和函式名稱
讓人僅透過閱讀程式碼就能理解變數或函式的意義。優先使用具描述性的名稱，而非縮寫或過於簡短的名稱。
不良範例
1/* Bad Example */
2let x = 10;
3function fn() {
4 // ...
5}- 像
x或fn這樣的名稱會模糊程式碼的意圖。
良好範例
1/* Good Example */
2let totalItems = 10;
3function calculateDiscount(price) {
4 // ...
5}- 使用具意義的名稱，例如
totalItems或calculateDiscount，有助於讀者理解程式碼。
使用 const / let，避免 var
由於 var 容易引發作用域與重複宣告問題，建議一律使用 const 或 let。
不良範例
1/* Bad Example */
2var count = 5;var為函式作用域，可能導致非預期的重複宣告與提升（hoisting）。
良好範例
1/* Good Example */
2let count = 5; // Reassignable
3const MAX_COUNT = 10; // Not reassignable
let與const為區塊作用域，使用更安全，能帶來更可預期且穩定的程式碼。
使用適當的註解
{^ i18n_speak 単にコードの動作をそのまま繰り返すコメントではなく、コードの「目的」や「理由」を説明するためにコメントを使います。^}
不良範例
1/* Bad Example */
2let a = 100; // assign 100 to a
良好範例
1/* Good Example */
2// Initialize the maximum value to 100
3let maxItems = 100;- 註解應偏重解釋為什麼這麼做，而非只是描述做了什麼。在邏輯複雜之處尤其有用。
遵循 DRY（Don't Repeat Yourself）原則
不要重複相同邏輯，應將其抽取為函式或類別。減少重複可提升可維護性並有助於避免錯誤。
不良範例
1/* Bad Example */
2let totalPrice = price * quantity;
3let discountedPrice = (price * 0.9) * quantity;良好範例
1/* Good Example */
2function calculatePrice(price, quantity, discount = 0) {
3 return (price * (1 - discount)) * quantity;
4}
5
6let totalPrice = calculatePrice(price, quantity);
7let discountedPrice = calculatePrice(price, quantity, 0.1);- 將重複的邏輯整合到一個函式中，之後的變更與修正即可在單一處進行。在大規模開發中尤為重要。
讓函式保持單一職責並將副作用降到最低
每個函式都應有一個明確的目的。避免改變全域或外部狀態，以將副作用降到最低。
不良範例
1/* Bad Example */
2let total = 0;
3function addItem(price) {
4 total += price; // modifies external state
5 console.log('Item added');
6}良好範例
1/* Good Example */
2function calculateTotal(items) {
3 return items.reduce((sum, item) => sum + item.price, 0);
4}- 將函式設計為純函式（相同輸入必定回傳相同結果）可使其更易於測試且更可靠。這也能提升可重用性與除錯的便利性。
執行錯誤處理
確保應用程式不會因為非預期的輸入或例外而崩潰。使用 try...catch 語法來妥善處理錯誤。
不良範例
1/* Bad Example */
2let data = JSON.parse(inputData);良好範例
1/* Good Example */
2try {
3 let data = JSON.parse(inputData);
4} catch (error) {
5 console.error('Failed to parse JSON:', error);
6}- 由於
JSON.parse()可能拋出例外，請用try-catch安全處理。完善的錯誤處理有助於打造健壯的應用程式。
產生結構化日誌
以一致的格式輸出日誌，便於追蹤系統行為。使用 JSON 格式的日誌，有助於在分析與監控工具中處理。
不良範例
1/* Bad Example */
2console.log('Error occurred!');良好範例
1/* Good Example */
2console.log(JSON.stringify({
3 level: 'error',
4 message: 'Database connection failed',
5 timestamp: new Date().toISOString()
6}));- 純文字日誌可能遺失資訊；結構化日誌能讓日誌分析、視覺化與監控變得更容易。這在伺服器端 JavaScript（Node.js）中特別有效。
提升程式碼可讀性
程式碼會被他人（或未來的你）閱讀。使用適當的縮排、換行與空白，使程式碼易於閱讀。
不良範例
1/* Bad Example */
2if(a===b){doSomething();}良好範例
1/* Good Example */
2if (a === b) {
3 doSomething();
4}- 格式良好、可讀性高的程式碼更容易理解，也更容易發現錯誤。不要把所有東西擠在同一行；讓結構在視覺上清晰可辨。
務必重視安全性
由於 JavaScript 經常在網頁環境中執行，安全意識至關重要。務必驗證使用者輸入、防範 XSS 與 CSRF，並保持相依套件為最新。
不良範例
1/* Bad Example */
2// Directly inserting user input into HTML (vulnerable to XSS)
3element.innerHTML = userInput;良好範例
1/* Good Example */
2// Use textContent to prevent XSS attacks
3element.textContent = userInput;- 直接使用未處理的使用者輸入，可能引入如腳本注入等漏洞。使用安全的 API，並養成永遠驗證與淨化資料的習慣。
執行程式碼測試
導入自動化測試能更容易偵測並預防錯誤。在 JavaScript 中，常用的測試框架有 Jest 與 Mocha。
範例
1// Simple test using Jest
2function sum(a, b) {
3 return a + b;
4}
5
6test('adds 1 + 2 to equal 3', () => {
7 expect(sum(1, 2)).toBe(3);
8});- 具備測試可確保在新增功能或變更時不會讓錯誤死灰復燃。測試是持續品質保證不可或缺的一環。
結論
遵循最佳實踐能大幅提升程式碼的品質、可維護性與可靠性。在學習 JavaScript 時，不僅要學語法，更要養成「如何寫出好程式碼」的習慣。持續學習可讓你的程式碼更易讀、更安全且更高效。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。