《Web前端开发最佳实践》——2.2前端代码重构

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第2章&＃xff0c;第2.2节,作者:党　建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.2　前端代码重构

代码重构是业内经常讨论的一个热门话题。重构指的是在不改变代码外部行为的情况下进行源代码修改&＃xff0c;重构之前需要考虑的是重构后如何才能保证外部行为不改变。对于后端代码来说&＃xff0c;可以通过大量的自动化测试来确保重构后的代码逻辑&＃xff0c;可对于普遍缺乏自动化测试的前端代码来说&＃xff0c;重构之前一定要考虑再三才能下手。
我曾经有一次不算太成功的前端重构经历&＃xff0c;所幸的是没有导致太大的问题&＃xff0c;但教训是惨痛的。此次重构的项目本身没有足够的自动化测试&＃xff0c;尤其是针对前端的自动化测试&＃xff0c;其实在重构之前也预想到了重构的风险。先来介绍重构之前项目存在的问题&＃xff1a;项目的前端代码没有统一的规范&＃xff0c;不同人员开发的模块对应的代码风格完全不同&＃xff0c;即使有相同的逻辑也是由完全不同的代码实现的&＃xff1b;而且&＃xff0c;不同模块的代码写到了相同的代码文件中&＃xff0c;使得文件的代码量很大&＃xff1b;项目的功能较多&＃xff0c;前端代码量大&＃xff0c;代码的文件也多&＃xff0c;又由于需求变更频繁&＃xff0c;因此代码中的无用代码量较大&＃xff1b;网站首页加载时间过长&＃xff0c;平均加载时间超过5秒&＃xff1b;部分动态模块的加载会导致页面“假死”。总体来说&＃xff0c;项目代码存在的问题就是维护性差和性能差&＃xff0c;如果要持续地添加新功能&＃xff0c;就有必要重构现有的代码。
鉴于项目代码的实际情况&＃xff0c;并且考虑到缺乏足够的自动化测试&＃xff0c;因此&＃xff0c;我权衡再权衡&＃xff0c;最终决定先尝试对前端的部分代码进行重构。重构的过程主要分为如下几个步骤。
1&＃xff09;删除无用代码&＃xff0c;精简代码。无用的代码主要集中在CSS和Javascript文件中&＃xff0c;包括已经不起作用的CSS样式和废弃的Javascript函数。这个重构过程是比较麻烦的&＃xff0c;因为修改的过程需要小心翼翼&＃xff0c;不停地查看函数和变量在上下文的调用关系&＃xff0c;以免错删代码。总体来说&＃xff0c;这个阶段的重构还是利大于弊&＃xff0c;虽然后续发现了一些由于误删而导致的Bug&＃xff0c;但是删除了废弃的代码&＃xff0c;提高了后续的可维护性。
2&＃xff09;前端代码规范化。页面的HTML标签中还有大量的内联CSS样式&＃xff0c;有些页面的head部分也有CSS样式&＃xff0c;需要把这些CSS放到独立的文件中&＃xff1b;调整代码的层次缩进格式&＃xff0c;不同层级按照4个空格来缩进&＃xff1b;更改标准已不推荐的标签&＃xff0c;如