前端开发的流程与规范.pdfVIP

.. 前端开发的流程与规范 在团队不断成长的过程中， 需要处理的需求也在逐渐增长， 团队中成员如何分工 配合决定了开发的效率、产品的质量，在这个时候我们就需要一个流程来规范、 指导我们， 下面就将咱们前端组的一些经验跟大家分享一下， 有不足之处欢迎大 家指出来。 当 PRD确立下来后，前端组的同学们就需要做好准备，好应对 高强度的开发工作。 在今年年初的时候前端组经过激烈的讨论针对新产品的开发 做了一些约定。制定 了前端开发的一些相关的规范， 包括不同产品的命名规范， 前端文件存放目录等等一系列的前期准备。 别看这些只是小事， 但做好万全的准 备，是敏捷开发中所必 的。 下面讲讲前端开发组的流程。 1、分层开发 在 PRD确定后就需要进行分层开发的划分，根据项目内容的不 同，划分组员的工作。大致分为，总体结构搭建、模块制作、页面制作、底层 JS 搭建、 JS 交互效果、内部测试、代码优化。 这样做的好处是能根据项目的不同，划分出不同的功能模块， 合理的进行人员分配，让合适的人做合适的事。降低开发成本，提高开发效率。 2、代码编写 前期工作准备好后，就开始进入代码编写阶段，我们采用 LSM 方式进行，大致流程为 prototype 产出后，就进行前期的前端开发（搭建大致 的 HTML结构），然后设计出完设计稿后再进行页面样式的完善，最后完成正式 的页面后交给开 发，嵌套程序。这样做的好处不仅能有效的提高开发效率，实 ,. .. 现逐层开发， 让前端提前介入， 减少整体消耗的时间， 确保产品有更多的时间修 改和完善。 确定了流程后还需要对产品原型进行分析、拆分，把复用性高 的部分找出来制作成代码模块， 方便以后的套用。 确认二、 三级页面的风格搭建 统一框架。 设计拿到 prototype 后，就进行通用模块样式的设计（包括按 钮、分页、默认字体颜色、连接颜色等），完成后并提交给前端，统一的搭建。 在代码的编写过程中，最重要的是标准和规范的执行遵守，在 编写 HTML时候充分发挥想象尽可能的满足后期样式表现的需要。 代码编写过程中让前端组提前进入开发流程中来，在 prototype 产出后就进行 HTML结构的编写，页面设计完成后，在进行样式表的 开发，这样不仅能节 省很多的开发时间，提高开发效率，还能锻炼前端组的同 学对全局页面的把控。 在此同时也强调规范和模块化的重要性， 正所谓无规矩不 成方圆，在一个团队协同开 发过程中，必须要严格按照规范执行，这样能便于 后期维护，减少维护成本。而模块化，是敏捷开发所必需的，重要性在这里也不 做过多的描述。 3、内部测试与后续优化 所有页面出完以后设计参与前端组的内部测试，指出页面与设 计稿不匹配的地方， 优化部分细节页面样式。 让设计参与测试不仅能提高内测的 质量，还能更早的发现 问题并及时的修改，否则当页面提交开发以后再做修改 是一件很麻烦的事情。 当所有细节修改完毕后， 就需要进行制作文件的优化以确 保代码的最优化，尽可能地压 缩图片和减少外部 HTTP请求。 总的流程结构图 ,.