原文：https://github.com/yujiangshui/front-end-code-checklist
front-end-code-checklist
前端代碼審查清單。
是什麼？爲什麼？
前端代碼審查清單是一個保證前端代碼質量的審查清單。當我們在開發寫代碼的時候，總會各種各樣的問題，自測的時候由於太熟悉自己的代碼邏輯往往測試不夠充分，無法發現問題。
前端代碼審查清單就是爲了解決這個問題！清單存放了一些常見的問題，當我們開發完成之後，對照清單思考一下這些問題在代碼中是否遇到或者妥善處理，從而提高代碼質量。
前端
前端安全
- 所有的用戶可以在頁面中輸入信息的地方，是否做了防 XSS 以及特殊字符的過濾處理？
- 與後端接口交互，獲取信息使用 GET 方式，傳送信息使用 POST 方式。後端接口應對各項參數做校驗。前端也要判斷接口是否返回合法、正確。
- 開發與 DOM 操作有關的代碼時，是否對 DOM 不存在或者被人爲修改的情況做處理？
- 獲取數據和信息時，是否對類型做過處理和轉換並設置爲空時的默認值？比如：var num = parseInt(Str);
- 在所有會發生錯誤的地方，是否編寫了錯誤處理邏輯？比如：阻止繼續執行、顯示錯誤信息、記錄錯誤日誌和信息等。
- 代碼裏獲取 window.location 相關屬性的地方，是否對裏面的 XSS 字符做了過濾處理？
前端性能
- JS 代碼是否儘量放在底部？CSS 代碼是否儘量放在了頂部？
- 是否部署 CDN 或者開啓了緩存功能？
- 上線或者發佈前，是否對靜態資源進行打包、壓縮處理？
- 正確使用預加載、懶加載等技術手段提高性能。
- 是否對圖片等資源進行壓縮以及 CSS Sprite 處理？
代碼質量
- 你的代碼是否遵循團隊要求的代碼規範？
- 是否有冗餘代碼沒有註釋掉或者刪掉？例如：刪除或者註釋 console.log 避免低端 IE 報錯等。
- 關鍵功能是否還有優化的空間？
- 代碼是否簡單易懂，邏輯清晰，模塊化？
- 變量名是否簡單易懂？是否拼寫正確？
- CSS 屬性是否有拼寫錯誤？
- HTML 標籤是否書寫正確，是否嵌套正確？
- JS 代碼是否經過 JSLint 或者 ESLint 等工具校驗？
- 是否將核心功能儘可能獨立，從而避免其他功能出現問題影響到核心功能？
註釋
- 是否在重要功能附近添加合適的註釋？
- 註釋是否包含了開發人員信息、開發時間、開發者聯繫方式以及相關功能說明？
- 換位思考，你能根據你的註釋推斷出下面代碼的功能嗎？
- 代碼裏是否還存在 TODO ？是否可以刪掉或者完善功能？
- 可能產生意外情況的地方是否留下說明？
測試
- 代碼邏輯是否正確、可用、符合需求？
- 在進行各種操作的時候，是否有報錯出現？
- 是否有資源加載出錯或者失敗？
- 是否按照項目要求，使用相關設備以及瀏覽器進行測試和體驗？
- 是否對邊界條件以及看起來比較極端的情況做過測試？
故障處理
- 是否考慮過如果發生線上故障，如何做回滾處理？處理什麼文件？
- 功能與功能之間是否足夠獨立？是否設置開關？當某個功能發生故障是否可以通過開關關掉？
貢獻
由於本人才疏學淺，部分場景沒有覆蓋，歡迎大家補充更多審查點，提高前端代碼質量！