软件开发行业前端部·前端工程师页面开发手册（企业正式版）

软件开发行业前端部·前端工程师页面开发手册（企业正式版）一、手册总则1.1编写目的统一前端团队页面开发标准、代码风格、工程流程、交付规范，解决代码混乱、页面样式不统一、兼容性问题、性能冗余、安全漏洞、交付不规范等问题，提升团队协作效率、页面可维护性、项目稳定性，适用于公司所有Web端、H5、管理后台、可视化页面开发工作。1.2适用范围前端部所有前端工程师、实习前端、外包前端人员；所有新增页面、迭代页面、改版重构页面、活动页、后台功能页、数据可视化页面开发全流程。1.3核心开发原则规范统一、结构清晰、样式解耦、逻辑分层、兼容适配、性能最优、安全合规、可复用、可维护、可迭代。二、前端工程与目录规范（强制执行）2.1文件命名规范强制规则：所有HTML、CSS、SCSS、JS、图片资源文件统一小写、中划线分隔，禁止驼峰、禁止拼音、禁止中文命名。✅正确示例：login.html、user-info.scss、render-dom.js、company-logo.png❌错误示例：loginPage.html、用户信息.scss、UserInfo.js2.2项目目录结构规范所有页面必须遵循统一分层目录，禁止随意新建文件、散落代码：PlainText

src

├──views//页面视图层（所有业务页面）

│├──login//登录页模块

│├──user//用户中心模块

│└──dashboard//数据看板模块

├──components//公共复用组件

├──assets//静态资源（图片、图标、全局样式）

├──styles//全局公共样式、重置样式

├──utils//工具方法

├──api//接口请求统一管理

├──router//路由配置

└──store//状态管理2.3页面文件拆分原则单页面禁止超大文件、代码堆砌，严格执行结构、样式、逻辑、数据分离：1.页面结构：仅负责DOM结构搭建，不写复杂逻辑、不写内联样式；2.样式文件：独立scss/css文件，页面样式与全局样式隔离；3.业务逻辑：独立js/ts文件，通用逻辑抽离至utils；4.接口请求：统一放入api文件夹，禁止页面内直接写请求。三、HTML页面结构开发规范3.1基础文档规范（强制）1.必须声明标准文档类型<!DOCTYPEhtml>，禁止小写、省略；2.页面强制设置UTF-8编码，保证中文不乱码；3.标签语义化优先，禁止全部使用div堆砌结构；4.所有标签属性统一使用双引号，禁止单引号、无引号；5.属性名全部小写，禁止大小写混合。3.2语义化标签使用规则1.页面头部：<header>、导航：<nav>；2.主体内容：<main>、区块：<section>；3.列表内容：统一使用<ul/ol>，禁止div模拟列表；4.表单元素必须绑定label，提升可访问性与点击体验；5.页面底部：<footer>。3.3页面开发禁止规则1.禁止大量使用内联style样式；2.禁止冗余嵌套DOM，层级尽量不超过6层；3.禁止空标签、无意义占位标签；4.图片必须添加alt属性，完善页面容错与SEO；5.禁止链接地址不带后缀斜杠，避免页面重定向损耗性能。四、CSS/SCSS页面样式开发规范4.1类名命名规范1.统一小写、中划线分隔，语义化命名；✅正确：container、user-info-card、submit-btn❌错误：pageContainer、用户卡片、btn12.禁止使用随机命名、无意义命名（box1、div2）；3.页面私有样式加页面前缀，避免全局样式污染。4.2CSS属性书写顺序（强制统一）所有样式必须按固定顺序书写，保证全网页面样式结构统一：1.布局属性：display、visibility、float、clear2.定位属性：position、top、right、bottom、left、z-index3.盒模型：width、height、margin、padding、border4.文本样式：font、color、line-height、text-align5.背景样式：background6.动画交互：transition、transform、animation4.3样式开发核心规则1.全局通用样式统一抽离，页面只写个性化样式；2.禁止!important滥用，优先通过权重层级解决样式覆盖；3.统一使用flex/grid布局，禁止大量使用浮动布局；4.颜色、字号、圆角、间距统一使用全局变量，保持全站UI一致性；5.所有页面必须做响应式适配，兼容PC、平板、主流手机尺寸。五、JavaScript/TypeScript页面逻辑规范5.1命名规范1.变量、函数：小驼峰命名，语义化、见名知意；2.常量：全大写、下划线分隔；3.类、构造函数：大驼峰命名；4.禁止拼音命名、禁止简写乱命名。5.2页面逻辑编写规范1.禁止全局变量泛滥，页面变量尽量局部作用域；2.页面初始化、数据请求、渲染、事件、销毁逻辑分层书写；3.重复逻辑抽离公共方法，禁止代码冗余复制；4.所有接口请求增加加载状态、异常捕获、失败提示；5.页面销毁时清除定时器、监听事件、请求中断，防止内存泄漏。5.3禁用语法与风险代码1.禁止使用eval、with等危险函数；2.禁止硬编码接口地址、密钥、敏感参数；3.禁止未做参数校验直接提交数据；4.禁止控制台日志残留上线（console.log清理）。六、组件化页面开发规范（Vue/React通用）6.1页面组件拆分原则1.公共通用模块：按钮、弹窗、表单、卡片、表格抽离全局公共组件；2.页面私有模块：仅当前页面使用的模块，拆分为页面子组件；3.严格遵循单向数据流、最小权限原则；4.组件只负责视图展示，复杂业务逻辑抽离工具或hooks。6.2组件开发规范1.组件命名语义化，禁止简写、模糊命名；2.组件props严格定义类型、默认值、校验规则；3.禁止组件内直接修改父级数据；4.复用组件保证高扩展性，支持传参配置样式、文案、状态；5.组件样式隔离，避免全局污染。七、页面兼容性适配规范7.1兼容范围（公司统一标准）1.PC端：Chrome、Edge、Firefox最新版，兼容至IE11（后台系统）；2.移动端：微信内置浏览器、抖音浏览器、主流手机系统浏览器；3.所有页面必须完成多尺寸适配，无横向滚动、无错位、无塌陷。7.2兼容处理规则1.flex布局自动补全兼容前缀；2.移动端禁止固定死宽高，使用自适应、百分比、flex适配；3.特殊兼容问题统一记录、统一公共处理，不重复造轮子。八、页面性能优化开发规范所有页面开发完成必须满足基础性能标准，上线前自查：8.1资源优化1.图片压缩、懒加载，大图片使用webp格式；2.静态资源统一CDN部署；3.无用JS、CSS、废弃资源全部清理。8.2渲染优化1.减少DOM频繁操作、减少重排重绘；2.长列表使用虚拟滚动，禁止一次性渲染大量DOM；3.动画使用transform/opacity，不触发布局刷新。8.3代码性能1.接口数据缓存，避免重复请求；2.防抖、节流处理高频触发事件（输入、滚动、点击）；3.页面按需加载、路由懒加载、组件异步加载。九、前端页面安全开发规范（强制合规）严格遵循OWASPTop10安全规范，杜绝前端常见安全漏洞：9.1XSS防御1.所有用户输入内容做转义处理；2.禁止直接拼接用户内容至DOM；3.开启CSP内容安全策略。9.2数据安全1.禁止前端硬编码密钥、token、接口隐私参数；2.敏感数据禁止本地明文存储；3.页面展示敏感信息做脱敏处理（手机号、身份证、账号）。9.3代码安全审计1.所有代码必须通过SonarQube静态扫描；2.杜绝危险函数、弱校验、代码漏洞；3.组件严格最小权限原则，不暴露多余接口与数据。十、页面交互与UI还原规范10.1UI还原标准1.1:1精准还原设计稿，字号、颜色、间距、圆角、阴影、对齐无偏差；2.所有按钮、弹窗、表单、卡片状态齐全（默认、hover、点击、禁用）；3.空数据、加载中、请求失败、网络异常、无权限状态全覆盖。10.2交互体验规范1.所有点击区域尺寸合规，无过小点击区域；2.操作反馈及时，加载loading、成功/失败提示齐全；3.表单校验实时触发，错误提示清晰易懂；4.禁止重复提交、重复点击，所有按钮做防抖处理。十一、页面开发流程与交付规范11.1标准开发流程需求评审→设计稿确认→目录搭建→结构搭建→样式还原→逻辑开发→联调接口→兼容性适配→性能优化→自查自测→提交代码→交付验收11.2代码提交规范1.提交前格式化代码、清理冗余代码、清除调试日志；2.提交备注清晰：页面新增、样式修复、逻辑优化、bug修复；3.禁止合并提交大量无关代码，做到小步提交、按需迭代。11.3交付验收标准1.UI完全还