前端頁面的成功呈現，不僅要求在理想情況下沒問題，當一些后臺介面訪問例外、靜態檔案獲取失敗時，仍然需要盡可能提供降級方案或給用戶良好的反饋，不至于整個頁面的奔潰，今天我將分享一些提高頁面健壯性的技巧，
例外處理
主要指資料型別，這種情況最常出現在讀取后臺資料的時候，尤其是需要取陣列、物件等參考型別時，可能后臺已經保證會傳給你固定的資料型別，但因為種種原因或例外，可能出現本來應該是一個物件或陣列的欄位變成了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來限定小數點的位數等，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/169437.html
標籤：JavaScript
上一篇：vue計算屬性和偵聽器
下一篇：js基礎題