前端代碼審查清單

是什麼？為什麼？

前端代碼審查清單是一個保證前端代碼品質的審查清單。當我們在開發寫代碼的時候，總會各種各樣的問題，自測的時候由于太熟悉自己的代碼邏輯往往測試不夠充分，無法發現問題。

前端代碼審查清單就是為了解決這個問題！清單存放了一些常見的問題，當我們開發完成之後，對照清單思考一下這些問題在代碼中是否遇到或者妥善處理，進而提高代碼品質。

前端

前端安全

• [ ] 所有的使用者可以在頁面中輸入資訊的地方，是否做了防 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 ？是否可以删掉或者完善功能？
• [ ] 可能産生意外情況的地方是否留下說明？

測試

• [ ] 代碼邏輯是否正确、可用、符合需求？
• [ ] 在進行各種操作的時候，是否有報錯出現？
• [ ] 是否有資源加載出錯或者失敗？
• [ ] 是否按照項目要求，使用相關裝置以及浏覽器進行測試和體驗？
• [ ] 是否對邊界條件以及看起來比較極端的情況做過測試？

故障處理

• [ ] 是否考慮過如果發生線上故障，如何做復原處理？處理什麼檔案？
• [ ] 功能與功能之間是否足夠獨立？是否設定開關？當某個功能發生故障是否可以通過開關關掉？

貢獻

由于本人才疏學淺，部分場景沒有覆寫，歡迎大家補充更多審查點，提高前端代碼品質！