前端开发技术规范强制标准

前端开发技术规范强制标准一、总则（一）适用范围。本规范适用于公司所有前端开发项目，涵盖需求分析、设计、编码、测试、部署等全生命周期环节。各业务部门及研发中心必须严格执行本规范，确保前端开发质量与效率。（二）基本原则。坚持标准化、规范化、模块化、可维护性原则，统一技术栈，优化开发流程，提升用户体验。二、技术选型与依赖管理（一）框架规范。React、Vue、Angular为首选框架，需根据项目复杂度选择。React适用于组件化程度高的项目，Vue适用于中小型应用，Angular适用于大型企业级应用。禁止擅自引入未经评估的新框架。（二）版本控制。所有项目必须使用npm或yarn进行包管理，禁止手动安装依赖。版本号需遵循语义化规范，主版本号每年更新一次，次版本号每季度更新一次，修订号每次构建时更新。三、代码结构与命名规范（一）目录层级。项目根目录下必须遵循以下结构：/src/components/views/assets/utils/api/store/hooks。禁止随意创建目录，所有新增目录需提交技术委员会审批。（二）命名规则。组件名必须使用PascalCase命名法，如UserInfoComponent；函数名使用camelCase，如getUserData；变量名首字母小写，如userData；常量名全大写，如MAX_PAGE_SIZE。四、编码规范（一）组件开发。组件必须遵循单一职责原则，每个组件只负责一项功能。组件间通过props传递数据，禁止使用全局状态管理进行跨组件通信。组件文件必须包含类型声明，如React需使用PropTypes。（二）API调用。所有API请求必须封装在/api目录下，使用Axios进行网络请求。请求参数必须进行类型校验，错误处理需遵循统一的错误码体系。如：401错误统一处理为跳转登录页。（三）代码格式化。必须使用ESLint和Prettier进行代码格式化，配置文件需统一存储在项目根目录/.eslintrc.js。提交代码前必须运行格式化检查，如：`npmrunlint`。五、性能优化标准（一）首屏加载。首屏加载时间不得超过3秒，需通过以下手段优化：图片懒加载、代码分割、CDN加速、字体加载优化。使用Lighthouse进行性能检测，得分需达到85分以上。（二）渲染性能。禁止使用大量DOM操作，推荐使用虚拟DOM框架。组件更新时需遵循shouldComponentUpdate规则，避免不必要的重渲染。如：使用React.memo进行组件缓存。六、测试规范（一）单元测试。所有核心组件必须编写单元测试，测试覆盖率不得低于80%。使用Jest或Mocha进行测试，测试用例需覆盖正常流程、异常流程、边界值。如：登录组件需测试用户名密码错误、账号不存在等场景。（二）集成测试。大型项目需进行集成测试，测试主要业务流程的连贯性。使用Cypress或Selenium进行自动化测试，测试用例需覆盖用户登录-操作-登出全流程。七、部署与运维（一）环境管理。项目需区分开发、测试、生产三种环境，环境变量存储在根目录/.env文件中。禁止在生产环境使用console.log，需通过环境变量控制日志输出。（二）发布流程。发布流程必须遵循以下步骤：代码提交-自动化测试-静态检查-灰度发布-全量发布。每次发布需填写发布记录表，记录发布时间、发布版本、操作人、异常处理措施。八、文档管理（一）需求文档。需求文档必须包含用户故事、交互原型、接口文档三部分，使用Confluence或Jira进行管理。需求变更需经过技术委员会评审，评审通过后方可开发。（二）技术文档。每个项目必须包含技术设计文档、API文档、部署手册，文档需与代码同步更新。使用Swagger自动生成API文档，技术设计文档需包含架构图、组件图。九、附则（一）责任追究。违反本规范导致严重后果的，将追究相关责任人责任，包括但不限于：代码重构、绩效扣减、岗位调整。技术委员会负责制定违反规范的处罚标准。（二）持续改进。本规范每半年修订