前端代码重构

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

---

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

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

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

2、前端代码规范化

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

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

4、前端代码模块化

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