Web前端开发最佳实践(2):前端代码重构

前言

代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变。对于后端代码来说,可以通过大量的自动化测试来确保重构后的代码逻辑,可对于普遍缺乏自动化测试的前端代码来说,重构之前一定要考虑再三才能下手。

有效地重构代码

我曾经有一次不算太成功的前端重构经历,所幸的是没有导致太大的问题,但教训是惨痛的。此次重构的项目本身没有足够的自动化测试,尤其是针对前端的自动化测试,所以在重构之前也预想到了重构的风险。先来介绍重构之前项目存在的问题:项目的前端代码没有统一的规范,所以不同人开发的模块对应的代码风格完全不同,即使有相同的逻辑也是由完全不同的代码实现的;而且,不同模块的代码写到了相同的代码文件中,使得文件的代码量很大;项目的功能较多,所以前端代码量大,代码的文件也多,又由于需求变更频繁,所以代码中的无用代码量多;网站首页加载时间过长,平均加载时间超过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;没有足够的自动化测试,而贸然去修改代码,很难保证最终修改代码的正确性;其次是对于性能优化,事先没有量化,没有做任何性能方面的监控,没有抓住性能主要的瓶颈,所以性能部分的重构就显得盲目。

有了这次的重构实践经历加上学习业内的一些经验,我归纳了如下的前端重构最佳实践:

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

附录

posted @ 2015-01-19 09:52 dangjian 阅读(...) 评论(...) 编辑 收藏