本文是html5tricks原創翻譯，轉載請看清文末的轉載要求，謝謝合作！

1.首先仔細分析問題

2.接著好好想想如何解決這個問題

3.收集整理所有需求。

花點時間將最終產品要實現的目標寫下來，並且明確哪些是我們的目標使用者群。如果這一步能做好的話，將會給後面節約大量的時間，正所謂磨刀不誤砍柴工。

4.寫一個全面的實施計劃（或模型）。

如果是個小專案，這一步出來的可能只是一個基本的流程或者一個簡單的等式。

如果是個比較大的專案，這一步有助於我們將它切割成幾個模組，然後再按下面的問題思考：

• 各個模組需要執行什麼任務
• 模組之間如何傳遞資料
• 如何呼叫模組中的資料

雖然比起直接入手去寫程式碼，收集和規劃需求又枯燥又無趣，但是如果這一點沒有做好，後面的除錯工作就會特別繁瑣。如果我們能花點時間，設計出一個正確的程式流程和結構，那麼我們其實在寫第一行程式碼之前就相當於已經成功了一半。

 5.註釋我們的程式碼。

如果你認為你的程式碼可能需要做個解釋，那就去註釋它。每個函式都應該提前一兩行就先描述一下它的引數和返回結果。比起告訴你what，註釋應該說明的是why。還有記得在更新程式碼的時候也要更新註釋。

6.使用統一的命名規則定義變數。

這將有助於我們追蹤各個型別的變數，並且對每個變數的用途一目瞭然。這一條的好處可不僅僅是方便我們打X = A+ B * C這麼簡單，它會讓我們的程式碼更便於除錯和維護。目前普遍受歡迎的一種命名方法是匈牙利命名法，它採用的是型別字首於變數的做法。例如，對於整體變數，我們可以使用intRowCounter，字串就是strUserName。無論你的命名規則是什麼都沒關係，只要保持一貫，並能簡單描述變數就行。

7.格式化編輯程式碼，程式碼結構視覺化。

例如，碰到條件語句（if、else等）和迴圈語句（for、while等）縮排程式碼。還有，可以在變數名和運算子號之間加個空格，運算子號指的是“+”、“-”、“*”、“/”，以及“=”（舉例，myVariable = 2 + 2）。這不但讓你的程式碼更直觀更優雅，還能使得我們的程式流程更加一目瞭然。

8.全面測試。

首先通過輸入我們期望的值來測試每個模組能否獨立運作。然後試著輸入一些可能但是很少見的值，繼續測試。這基本上能暴露所有隱藏的bug。測試也有所謂的技巧，通過練習和實踐，我們誰都可以逐步建立起適合自己的技能。測試應包含下列情況：

• 極端值：正值用0和大於預期的最大值；文字用空字串，引數用null。
• 無意義的值。雖然使用者不大可能會輸入亂碼，但是我們自己無論如何先測試一下為好。

不正確的值。在除法中輸入0，或者在預期是正數以及開平方根的情況下輸個負數。當輸入型別是一個字串的時候，輸入非數字，然後看看是否會被解析為數字值。

9.練習、練習、還是練習。

程式設計也會隨著時代的前行而不斷進步。所以總有新的東西需要我們學習，——甚至更加有用、更加重要——當然，也總有一些內容值得我們溫故而知新。

10.減少需求改變的風險。

在現實的工作環境中，需求總是在不斷變化的。然而，如果前期我們對需求收集得非常全面，一開始的實施計劃就很有針對性，那麼後期因需求改變導致的計劃不周和雙方產生誤會的可能性就會小得多。

我們可以在開始寫程式碼之前，通過展示需求文件和實施計劃，以提高程序的清晰度。這將有助於確保我們的計劃是真正按照客戶的要求去完成的。

如果將專案比作是一系列的里程碑，那麼一次只要完成一個就可以了。記住，在任何特定的時刻需要考慮的東西越少，那麼我們想得就越詳盡越完美。

11.由易到難，從簡入繁。

如果你的軟體複雜，那麼我建議你最好先從簡單的模組入手。例如，有這樣一個專案：請設計一個程式，要求能出現一個跟著滑鼠方向走的漸變圖形，並且還能根據滑鼠滑動速度改變形狀。

首先，設計一個正方形，寫一段能做到讓它跟隨滑鼠的程式碼，這樣就把運動追蹤問題先單獨拎出來解決掉了。當然這才是第一步。

接下來，將這個正方形的大小與滑鼠的速度相關聯，即解決了形狀隨速度而變的問題。

最後，建立你想要的實際形狀，並把這三個元件連線在一起即可。

運用這種方法自然而然地就編寫出來了模組化的程式碼。並且每個元件都有它自己獨立的功能。這對程式碼重用是非常有用的（例如，你完全可以在其他專案中應用第一步驟（用於實現滑鼠跟蹤）的程式碼），並讓我們的程式更容易除錯和維護。