有效地重构代码

有效地重构代码

我曾经有一次不算太成功的前端重构经历，所幸的是没有致使太大的问题，但教训是惨痛的。这次重构的项目自己没有足够的自动化测试，尤为是针对前端的自动化测试，因此在重构以前也预想到了重构的风险。先来介绍重构以前项目存在的问题：项目的前端代码没有统一的规范，因此不一样人开发的模块对应的代码风格彻底不一样，即便有相同的逻辑也是由彻底不一样的代码实现的；并且，不一样模块的代码写到了相同的代码文件中，使得文件的代码量很大；项目的功能较多，因此前端代码量大，代码的文件也多，又因为需求变动频繁，因此代码中的无用代码量多；网站首页加载时间过长，平均加载时间超过5秒；部分动态模块的加载会致使页面假死。整体来讲项目代码存在的问题就是维护性差和性能差，若是要持续地添加新功能就有必要重构现有的代码。

鉴于项目代码的实际状况，而且考虑到缺少足够的自动化测试，因此我权衡了又权衡，最终决定先尝试对前端的部分代码进行重构，重构的过程主要分为以下几个步骤：

（1）删除无用代码，精简代码。

无用的代码主要集中在CSS和JavaScript文件中，包括已经不起做用的CSS样式和废弃的JavaScript函数。这个重构过程是最吃力不讨好的过程，修改的过程须要当心翼翼，不停地查看函数和变量在上下文的调用关系，以避免错删代码。整体来讲，这个阶段的重构仍是利大于弊，虽而后续发现了一些因为误删而致使的Bug，可是删除了废弃的代码，提升了后续的可维护性。

（2）前端代码规范化。

页面的HTML标签中还有大量的内联CSS样式，有些页面的head部分也有CSS样式，须要把这些CSS放到独立的文件中；调整代码的层次缩进格式，不一样层级按照4个空格来缩进；更改标准已不推荐的标签，如<center> <b>等，改成由CSS样式控制；统一命名规则，这里主要涉及HTML中的id和class名称；另外，在JavaScript中集中定义局部变量，并把部分全局变量转变为局部变量，缩小了变量的做用域。

（3）整理基础类库。

网站初期为了加快开发的进度而引入了多个框架，其中包括Extjs、JQuery以及多个JQuery插件。Extjs和JQuery中重复的功能较多，项目中不少相同的实现使用的是不一样类库中的功能，如：DOM选择、Ajax请求等。部分jQuery的UI插件的功能也和Extjs中的功能重复。鉴于项目的情况，只能保守选择同时保留Extjs和jQuery。重构的内容是统一UI插件的使用、统一基础方法的使用。

（4）前端代码模块化。

按照模块归类CSS代码，放到模块对应的单独CSS文件中；按照模块分离JavaScript代码，按照模块定义不一样的命名空间；将JavaScript代码中的公共方法归类到独立的的共通文件中，同时引入面向对象的思想重构JavaScript代码，进一步明确公有接口和私有接口。

（5）提升页面加载性能。

将部分不影响首页展现的JavaScript文件延迟到页面加载后加载；删除页面中初始隐藏的区域，改成经过JavaScript按需动态生成；页面中的部分图片延迟加载；调整CSS和JavaScript文件的引用顺序，即CSS在前JavaScript在后；给静态文件设置缓存；使用CSS Sprite，合并首页背景图；合并和压缩发布后的CSS和JavaScript代码文件。

从如上的重构内容能够看到，此次重构的目的是明确的，即提升前端代码的可维护性和性能。从中也暴露了一些重构过程当中的问题：最主要的问题仍是低估了重构的风险，致使后续发现了很多新bug；没有足够的自动化测试，而贸然去修改代码，很难保证最终修改代码的正确性；其次是对于性能优化，事先没有量化，没有作任何性能方面的监控，没有抓住性能主要的瓶颈，因此性能部分的重构就显得盲目。

有了此次的重构实践经历加上学习业内的一些经验，我概括了以下的前端重构最佳实践：

• 重构前必定要预估风险，若是没有足够的自动化测试，最好是先完善自动化测试代码。
• 重构的目的和范围要明确，切忌盲目修改。前端代码的重构目的主要是提升代码的可维护性、可读性和性能。
• 最好是先易后难，按部就班。先修改诸如命名、格式等不涉及具体逻辑的内容，而后再考虑模块化和性能提高等与具体逻辑相关的内容。
• 重构过程当中要持续测试，在多个浏览器中测试，确保重构的部分功能正确。切忌在大量重构后再进行测试，由于大量重构后基本很难记得重构的逻辑，也就有可能遗漏部分测试用例。
• 若是是性能提高，要事先检测网站的总体性能并量化，找出性能瓶颈。重构过程当中要持续监控性能，并对比性能提高的效果。