当前位置: 首页 > Web前端 > CSS

前端代码重构

时间:2023-03-30 17:17:01 CSS

1.代码标准化和编排vscode中的一套格式化配置,页面保存时会自动格式化,统一团队成员的格式(配合eslint)。整理一下项目中的命名(不要太长,但也不能太长,尽量做到一目了然)私有变量前面加'_'方法使用驼峰命名component大写驼峰casenamedstyle'-'connectfilenameunifiedhtml嵌套要少于5层,标签要有语义。规范项目中的注释(以后可以做)2、删除冗余代码删除项目中不用的代码删除页面中引入的不用的组件删除项目中不用的文件3、重构样式(sass)通用样式中的代码需要放置得当(基本样式、颜色样式、边距样式、字体样式等)。不需要生成大量的基础样式,放你需要的就可以了。页面中的组件和独立样式是通过scoped来区分的。统一布局,不要混用em/rem/px。少用或不用通配符。4.修复部分逻辑或代码错误。项目中存在一些js异常报错的问题(比如遍历接口返回数据,但是接口返回null,需要兼容)。由于原开发者逻辑问题,导致代码异常。难改,各种乱引用。对于可能出现问题的地方,需要捕获异常,处理异常。对于定时器来说,离开页面的时候一定要清理干净。5.提取公共方法需要提取基本方法放在公共模块中。项目中,需要提取两次或多次使用的相同功能方法。如果一个方法超过一屏,基本就要考虑提取了。6、抽取公共组件需要抽取基础组件。两次或多次使用相同功能的代码应该分成组件以便于重用。组件可以引用组件,但必须防止死锁。7.优化组件内部代码。如果组件内部代码中存在不合理或冗余的部分,则必须对其进行优化。道具中的参数,完成类型和默认值。8、优化public方法在实现方法中,如果有实现不合理的地方,一定要进行优化。简单的逻辑简化了,不要使实现过于复杂。公共方法,尽可能通用,解耦。9、接口相关优化请求接口函数统一封装。请求url统一管理。必须捕获并提示错误消息。10.提升页面加载性能这主要涉及到一些前端的优化工作,就不展开了。