前端工程搭建:

搭建前端工程最主要的是技术选型,如果技术选型不够全面或不合适,会出现很多问题。技术选型通常会涉及基础框架、打包构建工具、网络库、组件库、CSS预编译语言、状态管理、IDE、代码质量检查工具、包管理工具、版本控制工具等

CSS预编译语言

搭建工程没有考虑css样式隔离,会出现css样式互相覆盖的问题。

1.react脚手架自带方案 文件名改成.module.scss

import styles from './Counter.module.css

代码质量

代码的质量包含复杂度、重复率、代码风格等,代码质量下降会导致恶性循环,比如在烂代码上继续写烂代码,好的代码不必花过多时间来修复bug优化代码逻辑,能帮开发者快速定位问题,也方便团队成员做交接。

烂代码常见原因是业务压力大开发者没时间追求代码质量,通常的做法是增加人力。

-代码重复率:定期对代码重复度检查是很有意义的一件事,建议封装成公共的方法和组件。

-可测试性:代码的可测试性同样反应出代码的好坏,可测试性查,很难写单元测试,基本上说明代码设计的有问题

-可读性

-可维护性

-编码规范:编码规范有助于提高团队协作的效率以及代码的可维护性

代码评审时从业务逻辑角度入手,评估需求还原度,针对异常边界提出疑问,编写人员自我审查

组件库

组件是对公共模块的封装,可有效解决使用频率高的模块的复用问题,减少重复代码提高开发效率。

开发组件应当遵循以下原则:

高内聚:每个组件只完成一件事

低耦合:组件与组件之间是低耦合的

按照复杂度组件可分为粒度最小的原子组件button、基于原子组件拼接的复合组件modaltable、视图组件、功能组件(状态管理)、业务组件

持续集成

持续集成是一种软件开发实践,通常开发成员每天至少集成一次自己的工作,持续集成遵循以下原则:

开发者每天至少向版本库提交一次代码

每天至少需要从版本库更新一次代码到本地

每次构建都要100%通过

修复失败的构建是优先级最高的事情

系统部署

随着互联网的发展,开发者可通过部署平台,通过可视化的方式进行一键部署,直接发布任务,平台会返回各个环节的运行信息和日志。

页面监控

请求监控

工程质量优化