搭建前端工程最主要的是技术选型,如果技术选型不够全面或不合适,会出现很多问题。技术选型通常会涉及基础框架、打包构建工具、网络库、组件库、CSS预编译语言、状态管理、IDE、代码质量检查工具、包管理工具、版本控制工具等
CSS预编译语言
搭建工程没有考虑css样式隔离,会出现css样式互相覆盖的问题。
1.react脚手架自带方案 文件名改成.module.scssimport styles from './Counter.module.css
代码质量
代码的质量包含复杂度、重复率、代码风格等,代码质量下降会导致恶性循环,比如在烂代码上继续写烂代码,好的代码不必花过多时间来修复bug优化代码逻辑,能帮开发者快速定位问题,也方便团队成员做交接。
烂代码常见原因是业务压力大开发者没时间追求代码质量,通常的做法是增加人力。
-代码重复率:定期对代码重复度检查是很有意义的一件事,建议封装成公共的方法和组件。
-可测试性:代码的可测试性同样反应出代码的好坏,可测试性查,很难写单元测试,基本上说明代码设计的有问题
-可读性
-可维护性
-编码规范:编码规范有助于提高团队协作的效率以及代码的可维护性
代码评审时从业务逻辑角度入手,评估需求还原度,针对异常边界提出疑问,编写人员自我审查
组件库
组件是对公共模块的封装,可有效解决使用频率高的模块的复用问题,减少重复代码提高开发效率。
开发组件应当遵循以下原则:
高内聚:每个组件只完成一件事
低耦合:组件与组件之间是低耦合的
按照复杂度组件可分为粒度最小的原子组件button、基于原子组件拼接的复合组件modaltable、视图组件、功能组件(状态管理)、业务组件
持续集成
持续集成是一种软件开发实践,通常开发成员每天至少集成一次自己的工作,持续集成遵循以下原则:
开发者每天至少向版本库提交一次代码
每天至少需要从版本库更新一次代码到本地
每次构建都要100%通过
修复失败的构建是优先级最高的事情
系统部署
随着互联网的发展,开发者可通过部署平台,通过可视化的方式进行一键部署,直接发布任务,平台会返回各个环节的运行信息和日志。
页面监控
请求监控
工程质量优化