如何加強前端代碼的健壯性

前端頁面的成功呈現，不只要求在理想狀況下沒問題，當一些後臺接口訪問異常、靜態文件獲取失敗時，仍然須要儘量提供降級方案或給用戶良好的反饋，不至於整個頁面的奔潰。今天我將分享一些提升頁面健壯性的技巧。

 

異常處理

　　主要指數據類型。這種狀況最常出如今讀取後臺數據的時候，尤爲是須要取數組、對象等引用類型時，可能後臺已經保證會傳給你固定的數據類型，但由於種種緣由或異常，可能出現原本應該是一個對象或數組的字段變成了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來限定小數點的位數等。