JavaShuo
栏目
标签
前端代码重构
时间 2020-03-25
标签
前端
代码
繁體版
原文
原文链接
1、代码规范化
整理一套vscode中格式化配置,在页面保存时自动格式化,团队成员格式统一(搭配eslint)。
整理项目中的命名(不要嫌长,但也不能过于冗长,尽可能能让人一眼看明白)
html
私有变量前加'_'
方法使用驼峰命名
组件大写开头的驼峰命名
样式'-'链接
文件名统一
html嵌套尽可能少于5层,标签语义化。
规范项目中的注释(可稍晚点进行)
2、删除冗余代码
删除项目中没有用到的代码
去掉页面中引入了却没有使用的组件
删掉项目中用不到的文件
3、重构样式(sass)
通用样式中的代码需适当合理放置(基础样式、颜色样式、边距样式、字体样式等)。
无需大批量生成基础样式,用到的放上就行了。
组件及页面内的独立样式使用scoped区别开。
布局统一,不要em/rem/px混合使用。
少用或不用通配符。
4、修复一些逻辑或代码错误
项目中出现一些js异常报错问题(例如,遍历接口返回的数据,可是接口返回的是null,这时就须要兼容下)
由于前开发者的逻辑问题,致使代码异常难改,各类混乱引用。
对于可能出现问题的地方,须要尽行异常捕获,并处理异常状况。
对于定时器,在离开页面的时候必须清理掉。
5、抽离公共方法
基础方法需抽离出来,放到公共模块。
项目中,两次及以上用到的同一功能方法,都需提取出来。
一个方法超过一屏幕,基本就要考虑抽离了。
6、抽离公共组件
基础组件需抽离出来。
两次及以上用到同一功能的代码,都应该抽离成组件的形式,便于重复使用。
组件能够引用组件,可是必须防止死锁。
7、优化组件内部代码
组件内部代码,若有不合理或者冗余的地方,必须进行优化。
props中参数,补全类型及默认值。
8、优化公共方法实现
方法内,若有不合理的实现,必须优化掉。
简单逻辑简单化,不要过于复杂实现。
公共方法,尽可能通用,解偶。
9、接口相关优化
请求接口功能统一封装。
请求url统一管理。
错误信息必须捕获并提示。
10、提升页面加载性能
这里主要涉及到前端优化的一些工做,不展开。
相关文章
1.
前端代码重构和解耦
2.
Web前端开发最佳实践(2):前端代码重构
3.
重构之前的代码
4.
phalcon 前端代码结构
5.
前端 | 重构 gulpfile.js
6.
代码重构
7.
重构代码
8.
代码 重构
9.
前端代码考(算)古(帐)与翻(重)新(构)
10.
重构,第一个案例,重构前的代码
更多相关文章...
•
Markdown 代码
-
Markdown 教程
•
Eclipse 代码模板
-
Eclipse 教程
•
IntelliJ IDEA代码格式化设置
•
使用阿里云OSS+CDN部署前端页面与加速静态资源
相关标签/搜索
代码重构
前端+后端代码
前端构建
代码架构
前端编码
附前、后端代码
重构
前端
代码
前端+后端(java)
SQLite教程
Spring教程
MyBatis教程
代码格式化
架构
后端
0
分享到微博
分享到微信
分享到QQ
每日一句
每一个你不满意的现在,都有一个你没有努力的曾经。
最新文章
1.
springboot在一个项目中启动多个核心启动类
2.
Spring Boot日志-3 ------>SLF4J与别的框架整合
3.
SpringMVC-Maven(一)
4.
idea全局设置
5.
将word选择题转换成Excel
6.
myeclipse工程中library 和 web-inf下lib的区别
7.
Java入门——第一个Hello Word
8.
在chrome安装vue devtools(以及安装过程中出现的错误)
9.
Jacob线上部署及多项目部署问题处理
10.
1.初识nginx
本站公众号
欢迎关注本站公众号,获取更多信息
相关文章
1.
前端代码重构和解耦
2.
Web前端开发最佳实践(2):前端代码重构
3.
重构之前的代码
4.
phalcon 前端代码结构
5.
前端 | 重构 gulpfile.js
6.
代码重构
7.
重构代码
8.
代码 重构
9.
前端代码考(算)古(帐)与翻(重)新(构)
10.
重构,第一个案例,重构前的代码
>>更多相关文章<<