前端代码重构

重构指的是在不改变代码外部行为的情况下进行源代码修改。
重构的目的主要是提高代码的可维护性、可读性和性能。
重构之前需要考虑的是重构后如何才能保证外部行为不改变。

---

重构的过程主要分为如下几个步骤：

1、删除无用代码，精简代码

修改的过程需要注意，不停地查看函数和变量在上下文的调用关系，以免删错代码。

2、前端代码规范化

• 将css代码放到独立的文件中
• 调整代码的层次缩进格式，不同层级按照4个空格缩进
• 更改标准已不推荐的标签，如<center>、<b>，改为由css控制
• 统一命名规则
• 缩小变量作用域，尽量将全局变量变为局部变量

3、整理基础类库
对于引入的多个框架，相同的实现可能使用的是不同类库中的功能，如DOM选择、AJAX请求等。需要统一基础方法的使用。

4、前端代码模块化

• 按照模块归类css代码，放到模块对应的单独css文件中
• 按照模块分离JavaScript代码，按照模块定义不同的命名空间
• 将JavaScript代码中的通用方法归类到独立的共通文件中，同时引入面向对象的思想重构JavaScript代码，进一步明确公有接口和私有接口
• 提高页面加载性能
  1）将不影响首页展示的JavaScript文件延迟到页面加载后加载
  2）删除页面中初始隐藏的区域，通过JavaScript按需动态生成
  3）页面中的图片延迟加载
  4）css文件放到JavaScript文件前面
  5）静态文件设置缓存
  6）使用css sprite，合并首页背景图
  7）合并和压缩发布后的css和JavaScript代码文件

---

前端重构最佳实践

• 重构前预估风险。若没有足够的自动化测试，先完善自动化测试代码。
• 明确重构的目的和范围，不要盲目修改。
• 先易后难，循序渐进。首先修改例如命名、格式等不涉及具体逻辑的内容，然后考虑模块化和性能提升等与具体逻辑相关的内容。
• 重构过程中要持续测试。在多个浏览器中测试，确保重构的部分功能正确。不要在大量重构后再测试，可能遗漏部分测试用例。
• 如果是性能提升，则事先检测网站的整体性能并量化，找出性能瓶颈。重构过程中持续监控性能，对比性能提升的效果。