分享程序员开发的那些事...
更新时间：2022-10-04 19:34:18
本节书摘来自华章计算机《Web前端开发***实践》一书中的第2章，第2.2节,作者:党 建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
代码重构是业内经常讨论的一个热门话题。重构指的是在不改变代码外部行为的情况下进行源代码修改，重构之前需要考虑的是重构后如何才能保证外部行为不改变。对于后端代码来说，可以通过大量的自动化测试来确保重构后的代码逻辑，可对于普遍缺乏自动化测试的前端代码来说，重构之前一定要考虑再三才能下手。
我曾经有一次不算太成功的前端重构经历，所幸的是没有导致太大的问题，但教训是惨痛的。此次重构的项目本身没有足够的自动化测试，尤其是针对前端的自动化测试，其实在重构之前也预想到了重构的风险。先来介绍重构之前项目存在的问题：项目的前端代码没有统一的规范，不同人员开发的模块对应的代码风格完全不同，即使有相同的逻辑也是由完全不同的代码实现的；而且，不同模块的代码写到了相同的代码文件中，使得文件的代码量很大；项目的功能较多，前端代码量大，代码的文件也多，又由于需求变更频繁，因此代码中的无用代码量较大；网站首页加载时间过长，平均加载时间超过5秒；部分动态模块的加载会导致页面“假死”。总体来说，项目代码存在的问题就是维护性差和性能差，如果要持续地添加新功能，就有必要重构现有的代码。
鉴于项目代码的实际情况，并且考虑到缺乏足够的自动化测试，因此，我权衡再权衡，最终决定先尝试对前端的部分代码进行重构。重构的过程主要分为如下几个步骤。
1）删除无用代码，精简代码。无用的代码主要集中在CSS和JavaScript文件中，包括已经不起作用的CSS样式和废弃的JavaScript函数。这个重构过程是比较麻烦的，因为修改的过程需要小心翼翼，不停地查看函数和变量在上下文的调用关系，以免错删代码。总体来说，这个阶段的重构还是利大于弊，虽然后续发现了一些由于误删而导致的Bug，但是删除了废弃的代码，提高了后续的可维护性。
2）前端代码规范化。页面的HTML标签中还有大量的内联CSS样式，有些页面的head部分也有CSS样式，需要把这些CSS放到独立的文件中；调整代码的层次缩进格式，不同层级按照4个空格来缩进；更改标准已不推荐的标签，如< center >、< b >等，改为由CSS样式控制；统一命名规则，这里主要涉及HTML中的id和class名称；另外，在JavaScript中集中定义局部变量，并把部分全局变量转变为局部变量，缩小变量的作用域。
3）整理基础类库。网站初期为了加快开发的进度而引入了多个框架，其中包括Ext JS、jQuery以及多个jQuery插件。Ext JS和jQuery中重复的功能较多，项目中很多相同的实现使用的是不同类库中的功能，如DOM选择、AJAX请求等。部分jQuery的UI插件的功能也和Ext JS中的功能重复。鉴于项目的状况，只能保守选择同时保留Ext JS和jQuery。重构的内容是统一UI插件的使用、统一基础方法的使用。
4）前端代码模块化。按照模块归类CSS代码，放到模块对应的单独CSS文件中；按照模块分离JavaScript代码，按照模块定义不同的命名空间；将JavaScript代码中的公共方法归类到独立的共通文件中，同时引入面向对象的思想来重构JavaScript代码，进一步明确公有接口和私有接口。
5）提高页面加载性能。将部分不影响首页展示的JavaScript文件延迟到页面加载后加载；删除页面中初始隐藏的区域，改为通过JavaScript按需动态生成；页面中的部分图片延迟加载；调整CSS和JavaScript文件的引用顺序，即CSS在前JavaScript在后；给静态文件设置缓存；使用CSS Sprite，合并首页背景图；合并和压缩发布后的CSS和JavaScript代码文件。
从上面的重构内容可以看到，这次重构的目的是明确的，即提高前端代码的可维护性和性能。从中也暴露了重构过程中的一些问题：最主要的问题还是低估了重构的风险，导致后续发现了不少新Bug；没有足够的自动化测试，而冒然去修改代码，很难保证最终修改代码的正确性；其次是对于性能优化，事先没有量化，没有做任何性能方面的监控，没有抓住性能主要的瓶颈，所以性能部分的重构就显得比较盲目。
有了这次的重构实践经历，再加上学习业内的一些经验，我归纳了如下的前端重构***实践。