Web前端开发流程

布满荆棘的人生 2023-02-23 05:08 22阅读 0赞

## Web前端开发流程 ##

### 开发前准备 ###

### 了解产品和设计 ###

参加需求、交互、视觉会议，了解产品设计和项目成员。  
了解产品面向的设备和平台。  
了解产品对兼容性的要求以及是否采用响应式设计等。

### 提出疑问和见解 ###

按需求结合现有技术，提出疑问和见解。  
提出可能存在的问题（技术实现，性能问题等），协商解决方案（如优雅降级、渐进增强）并达成共识。  
提出当下已掌握新技术可能在项目中的应用场景，协助产品创新。不要采用未掌握的技术创新。

### 预算人力和时间 ###

根据项目工期要求及工作量，预算人力和时间。  
挑选前端成员组成前端小组，拟定技术选型。  
确定功能开发优先级，预算开发周期和阶段性产出。  
提醒需求方在项目管理平台（禅道）中创建项目并加入项目成员。  
提醒需求方在项目企业沟通工具（企业微信或钉钉）中创建项目交流群并加入项目成员。  
提醒项目负责人创建git仓库并设置成员权限。

## 开发过程 ##

### 职责任务 ###

确定前端小组长，负责对整个页面开发工作做统筹规划、分配协调等管理工作和主开发职责  
确认交互原型或视觉效果已经定稿，再开始开发工作。  
如果采取并行模式（视觉设计和页面开发同时进行），则以交互原型定稿为准（当视觉效果定稿后，页面工程师再补充细节），开始分配。  
按页面类型分配，同一类型页面分配给同一个人。  
每个人都要了解页面公共元素（多个页面中相同或相似部分），一个公共元素只分配到一个人，每人完成自身页面的同时完成“提取剥离”。  
在项目管理平台中细分开发任务，填写任务详情和时间，如果任务间存在关系，则设置好关联或从属关系。

### 页面开发 ###

由小组长创建前端目录，包含“页面开发”目录（如:js、css、html、images）及“提取剥离”目录（如：demo）。  
由小组长创建公共样式和引入js库版本以及工具包（如：reset.css、jquery3.2.1.js、resize.js、util.js）  
和交互、视觉及其他前端工程师或后端工程师保持良好的沟通。  
对交互原型和视觉设计有疑问，上报小组长，由小组长统一对外（需求方和设计师）反馈问题和建议。  
如果采取并行模式，前后端有数据交互的页面，先与后端小伙伴约定好API字段（如图片接口用imgorimg\_urlorimage）

### 提取剥离 ###

提取剥离相同或相似结构，封装成模板或组件。  
提取剥离公共js方法，保存到util.js。  
若要修改提取剥离出的公共部分，需小组讨论可行性后，方可由小组长修改。

## 开发产出 ##

### 自测联调 ###

首先对自己的代码进行全面的多设备测试和兼容性测试。  
多人协同项目，git先拉取再提交，如有冲突上报小组长解决冲突。  
自测过程中发现别人写的代码有问题，及时反馈。

### 提交验收 ###

当有阶段性产出后，小组长上报主管，安排经验丰富的前端工程师进行代码验收。  
代码验收将主要检查兼容性、HTML、CSS、JS规范。  
同时小组长将页面提交给设计师，进行效果验收。  
效果验收将主要检查视觉效果符合度（尺寸、位置、颜色、切图等）。

### 交接说明 ###

当完成验收后，通知并交给后端小伙伴，进行后续开发，前端需要交代可能需要他们注意的地方或者对代码的解释说明。  
如果你的工作需要与别人交接，也需要交代清楚整体架构部署和代码解释。

### 变更维护 ###

需求变更必须在项目交流群中提出，由小组长与需求方确认，如有必要，需求方召集项目组开会说明  
前端代码优化维护，必须上报主管，需小组讨论可行性后，方可由修改。