4个你可能不知道的提升前端代码质量的tips

366 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第1天,点击查看活动详情

前言:

在中大型项目开发过程中,一份代码有多人接手是常态。即使有统一的团队规范,在紧张的排期下,不同程序员不可避免会生产出不同风格的代码,加上时间的推移,会逐渐堆积成为难以维护的庞大债务,这就是令无数英雄豪杰垂泪叹息跑路的屎山代码😂。

如何才能在前端项目开发中始终保证代码质量,减少屎山代码的出现呢?

对此,我将平日开发过程中的一些思考总结成以下几个tips,希望能对你有所帮助,也请多多指教。

如果你觉得本文对你有所帮助,请不要吝啬你的 赞👍 哦!你的认可是我持续写作的最大动力!谢谢!

1、有时可以为代码的可读性牺牲部分性能

不同于后端,前端代码中改善算法复杂度往往并没有那么重要。因为前端很少遇到处理大数据的情况,绝大多数大数据问题都可以采用分页解决。因此,前端代码更应该关注可读性和可维护性等,有时可以为代码的可读性牺牲算法复杂度。而在性能上,浏览器重排重绘才是导致性能下降的关键,前端应该关注减少重排重绘次数。

2、编写健壮的JavaScript

编写健壮的js代码,重点在于异常的捕获和处理,主要原则有:

  1. 尽早地抛出异常。例如有异步方法a、b、c,对于
a.then(b).then(c).catch(d);

如果a中出现异常但没有及时抛出,代码会继续执行b、c,出现我们预期外的结果。所以应该尽早用断言等方式发现问题,抛出异常。

  1. 尽晚地捕获异常。一般在UI层捕获,UI层可以灵活决定异常的处理方式,常见处理方式有:
  • 将错误信息反馈给用户,如弹窗提示用户"服务器异常,请稍后重试"
  • 将错误信息打印在控制台,方便开发人员调试
  • 将错误上报服务端
  1. 绝不能不捕获异常。对异常的疏漏不仅会使代码难以调试,不能及时发现bug,更可能导致白屏问题。

3、复杂的代码应拆分到多个文件中,控制单一文件中的代码行数

例如,应该避免单一函数太大,尽量多拆小函数。具体做法是用自然语言表达逻辑步骤,再把每个步骤拆分成函数(一般根据单一职责原则进行拆分),最后组织起来。因为编码是从自然逻辑到程序逻辑的映射过程,其本质是对问题的分解再组合。同样,对组件进行拆分和细化,一般超过300行的组件都考虑拆分成更小的组件进行维护。

4、经常的、逐步的重构代码

在实际开发中,我们常常会发现前人或者自己以前编写的代码已经不满足现在的需要,继续开发下去会造成难以维护的屎山堆积越来越多。但是,需求排期紧张,压根就没有把烂代码好好完全重构一遍的时间。

由于时间限制,优秀的我们可以进行部分性重构: 首先确定重构的边界,如一个组件,拒绝重构传染到边界外部。之后,在有限的时间内对边界内的代码进行重构,在确保重构后的代码是等价的之后,及时进行阶段性归档。

这样的逐步进行重构,可以让烂代码一天天减少,代码质量持续提高,避免一次重构大批代码耽误开发进度;另外,众所周知,屎山是不能随便碰的。有些代码牛跑是跑起来了,但是可能是以你根本想不到的方式🐶。

截屏2022-10-12 下午9.16.31.png

如果直接整个大刀阔斧进行修改,可能出现跑不起来又无法还原的尴尬局面。通过逐步重构的方法,可以对烂代码进行拆解,降低心智负担,每次等价替换其中一部分即可。

参考

前端异常的捕获与处理