前端代码风格统一规范手册

前端代码风格统一规范手册【排版与格式标准】1.层级标记体系：一、总则说明（一）适用范围。本规范适用于公司所有前端开发项目，包括但不限于Web应用、移动端H5页面及小程序开发。所有参与前端代码编写的工程师必须严格遵守本规范，确保代码风格统一，提升团队协作效率。（二）规范目的。通过标准化代码风格，降低代码阅读成本，减少因风格差异导致的Bug，促进代码复用，强化团队技术沉淀。（三）生效日期。本规范自发布之日起正式生效，所有存量项目逐步迁移至新规范标准。二、命名规范（一）文件命名。项目根目录下所有文件必须使用小写字母，单词之间用中划线分隔，例如`user-profile.js`。（二）变量命名。使用驼峰式命名法，局部变量首字母小写，全局变量首字母大写，例如`userInfo`、`GLOBAL_CONFIG`。（三）函数命名。动词开头，描述具体操作，例如`fetchData（）`、`validateInput（）`。三、代码结构（一）模块划分。组件代码必须遵循“单一职责原则”，每个文件仅包含一个功能模块，例如`Button.js`、`ModalComponent.vue`。（二）文件组织。按功能模块分层存放，禁止随意放置，例如`src/components/`、`src/utils/`。（三）代码分层。React项目需遵循`const`/`let`/`var`顺序声明变量，Vue项目需按`data`/`computed`/`methods`顺序组织逻辑。四、注释规范（一）文件头注释。所有文件首行必须包含版权信息及作者，例如：```/*@fileOverview用户信息管理模块*@author张三*@date2023-01-01*/```（二）逻辑注释。对复杂算法或特殊处理必须添加解释性注释，例如：```//防抖处理，避免频繁触发事件lettimeoutId=null;functionhandleResize（）{clearTimeout（timeoutId）;timeoutId=setTimeout（（）=>{//执行布局计算},300）;}```五、格式统一（一）缩进规范。使用4个空格代替Tab，禁止混合使用。（二）换行规范。函数声明后强制换行，条件语句需换行书写。（三）分号使用。JavaScript项目必须使用分号终止语句，Vue模板中按需使用。【一级标题创作规范】一、命名规范二、代码结构三、注释规范四、格式统一五、组件开发六、性能优化【公文语体规范】1.禁止口语化。例如，用“必须”代替“要”，用“应”代替“可以”。2.禁止主观抒情。例如，用“需达到XX标准”代替“应该写得很好”。3.禁止非规范时间表述。例如，用“2023年1月1日”代替“前阵子”。4.禁止非规范称谓。例如，用“工程师”代替“大神”。5.动词规范。使用“应”“必须”“需”等指令性动词。6.禁止AI虚词。例如，删除“通过XX可以”“旨在”等冗余表述。【硬性约束与负面清单】1.严禁假大空。例如，禁止使用“赋能团队”“打造生态”等套话。2.严禁教科书式解释。直接输出操作步骤，例如：```//正确示范：functioncalculateTotal（price,count）{returnprice*count;}//错误示范：“计算总价时，需将单价与数量相乘，例如：price*count”```3.一级标题数量6个。4.只输出纯中文内容。【组件开发】（一）组件拆分。复杂组件必须按功能拆分，例如`UserProfile`拆分为`Avatar`、`InfoList`、`EditForm`。（二）Props传递。使用`props`接收参数时，必须添加类型声明及默认值，例如：```constButton=（{type='primary',size='medium'}）=>{//...};```（三）插槽使用。Vue组件最多使用3个具名插槽，超过需重构。（四）状态管理。小型项目使用`useState`，大型项目使用`Redux`或`Vuex`，禁止全局混用。【性能优化】（一）首屏加载。图片必须使用`loading="lazy"`，组件按需加载，例如：```<React.lazy（（）=>import（'./DetailComponent'））/>```（二）渲染优化。避免`inline`样式滥用，使用CSS模块或StyledComponents。（三）资源压缩。发布前必须执行`webpa