web前端代码重构

一、代码规范化

1. 整理一套vscode中格式化配置，在页面保存时自动格式化，团队成员格式统一（搭配eslint）。

2. 整理项目中的命名（不要嫌长，但也不能过于冗长，尽量能让人一眼看明白）

1. 私有变量前加'_'
2. 方法使用驼峰命名
3. 组件大写开头的驼峰命名
4. 样式'-'连接
5. 文件名统一

3. html嵌套尽量少于5层，标签语义化。

4. 规范项目中的注释（可稍晚点进行）

 

二、删除冗余代码

1. 删除项目中没有用到的代码

2. 去掉页面中引入了却没有使用的组件

3. 删掉项目中用不到的文件

 

三、重构样式(sass)

1. 通用样式中的代码需适当合理放置（基础样式、颜色样式、边距样式、字体样式等）。

2. 无需大批量生成基础样式，用到的放上就好了。

3. 组件及页面内的独立样式使用scoped区别开。

4. 布局统一，不要em/rem/px混合使用。

5. 少用或不用通配符。

 

四、修复一些逻辑或代码错误

1. 项目中出现一些js异常报错问题（例如，遍历接口返回的数据，但是接口返回的是null，这时就需要兼容下）

2. 因为前开发者的逻辑问题，导致代码异常难改，各种混乱引用。

3. 对于可能出现问题的地方，需要尽行异常捕获，并处理异常情况。

4. 对于定时器，在离开页面的时候必须清理掉。

 

五、抽离公共方法

1. 基础方法需抽离出来，放到公共模块。

2. 项目中，两次及以上用到的同一功能方法，都需提取出来。

3. 一个方法超过一屏幕，基本就要考虑抽离了。

 

六、抽离公共组件

1. 基础组件需抽离出来。

2. 两次及以上用到同一功能的代码，都应该抽离成组件的形式，便于重复使用。

3. 组件可以引用组件，但是必须防止死锁。

 

七、优化组件内部代码

1. 组件内部代码，如有不合理或者冗余的地方，必须进行优化。

2. props中参数，补全类型及默认值。

资源搜索网站大全 https://www.renrenfan.com.cn

八、优化公共方法实现

1. 方法内，如有不合理的实现，必须优化掉。

2. 简单逻辑简单化，不要过于复杂实现。

3. 公共方法，尽量通用，解偶。

 

九、接口相关优化

1. 请求接口功能统一封装。

2. 请求url统一管理。

3. 错误信息必须捕获并提示。

 

十、提高页面加载性能

1. 这里主要涉及到前端优化的一些工作，不展开。