web前端：如何增强前端代码的健壮性

作者:陌上兮月更新于： 2020-03-10 22:35:12

　　代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。

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

　　异常处理

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

　　源代码是代码的分支，某种意义上来说，源代码相当于代码。现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可读文本翻译成为计算机可执行的二进制指令，这种过程叫编译，它由通过编译器完成。