如何加强前端代码的健壮性

前端页面的成功呈现，不只要求在理想状况下没问题，当一些后台接口访问异常、静态文件获取失败时，仍然须要尽量提供降级方案或给用户良好的反馈，不至于整个页面的奔溃。今天我将分享一些提升页面健壮性的技巧。

 

异常处理

　　主要指数据类型。这种状况最常出如今读取后台数据的时候，尤为是须要取数组、对象等引用类型时，可能后台已经保证会传给你固定的数据类型，但由于种种缘由或异常，可能出现原本应该是一个对象或数组的字段变成了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来限定小数点的位数等。