前端頁面的成功呈現，不僅要求在理想情況下沒問題，當一些後臺介面訪問異常、靜態文件獲取失敗時，仍然需要儘可能提供降級方案或給用戶良好的反饋，不至於整個頁面的奔潰。今天我將分享一些提高頁面健壯性的技巧。 異常處理 主要指數據類型。這種情況最常出現在讀取後臺數據的時候，尤其是需要取數組、對象等引用類型時， ...
前端頁面的成功呈現，不僅要求在理想情況下沒問題，當一些後臺介面訪問異常、靜態文件獲取失敗時，仍然需要儘可能提供降級方案或給用戶良好的反饋，不至於整個頁面的奔潰。今天我將分享一些提高頁面健壯性的技巧。
異常處理
主要指數據類型。這種情況最常出現在讀取後臺數據的時候，尤其是需要取數組、對象等引用類型時，可能後臺已經保證會傳給你固定的數據類型，但因為種種原因或異常，可能出現本來應該是一個對象或數組的欄位變成了null，這是非常之普遍的，如果前端直接取res.xxx或res.length，就會報錯，導致程式阻塞。
一般有兩種手法來處理這種情況：一種是判空處理，如(res || []).length，（res || {}).name等；另外一種是全部按理想情況寫，但是外層用try{...}catch(){...}包裹，一有異常就拋出去，通過過濾錯誤來確保try後面的代碼仍能正常執行。
數據檢驗
最常出現在表單輸入時，用戶可能輸入各種各樣奇怪的東西，比如有前後空格、負數、小數、很長很長的數，重覆的數等等，一般我們可以設置一些規則來限制用戶操作，比如設置最大輸入長度，不能輸入負數、小數等等，還有就是表單提交時對不合理的行為做出提示，阻止其進行下一步操作。
能應對怪異的用戶行為
我們很難去規範用戶使用系統或瀏覽頁面的行為，尤其是行為順序，可能用戶會完全不按照正常的順序去做一些操作，比如按照相反的順序來，或交叉順序操作系統，或瘋狂的點擊按鈕。這不是普遍的情況，但最好能保證你的程式在這種情況下仍然可用， 一般應對瘋狂的用戶行為，可以用防抖、節流、最大次數限制來做規範，而對於不按套路操作的用戶，要麼限制其行為，告訴他“請先選擇xxxx，再進行xxxx”，或者在程式方面做好相容。
響應式
這已經是一個很基礎的需求，考慮到大部分用戶的屏幕尺寸限制，很多高解析度屏幕都會出廠自帶一定的文本縮放，所以實際在瀏覽器中，視窗的寬度很少有超過1920px的；尤其是筆記本，就算是16英寸的屏幕，1080p全開字也是很小的，所以實際在PC端，做的好的話，會相容到到1024*768 ~ 1920*1080。同時做好最大最小寬度限制。
註意JS浮點數運算的坑
這是一個歷史遺留問題，0.1 + 0.2 !== 0.3是一個大家都知道的梗，所以如果涉及到前端運算的頁面，一定要註意浮點數的問題， 常見的手法有用+‘xxx’或parseInt或parseFloat來做字元串轉數字，用toFixed來限定小數點的位數等。
