前端开发的流程

    想分几篇文章来说说前端开发。

    一般的网站开发流程包括四个方面：

      1、 总结需求

      2、 设计界面

      3、 前端开发

      4、 后端开发

     开发完成后会进行内部测试以及后续的优化等，其中2,3,4可以并行开发。下面介绍前端开发的工作流程：

    1.分层开发

     在产品需求文档确定好后就可以进行分层开发的划分，根据项目内容的不同，来划分组员的工作。一般分为：总体结构搭建、模块制作、页面制作、底层js的搭建与交互等。

      2.代码编写

     前期工作准备好后，就开始进入代码编写阶段。大致流程为当原型图产出后，就进行前期的前端开发（搭建大致的HTML结构），然后美工设计出设计图后再进行页面样式的完善，最后完成正式的页面后交给开发，嵌套程序。确定了流程后还需要对产品原型进行分析、拆分，把复用性高的部分找出来制作成代码模块，方便以后的套用。美工拿到原型图后，就进行通用模块样式的设计（包括按钮、分页、默认字体颜色、连接颜色等），完成后并提交给前端，统一的搭建。在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML时候充分发挥想象尽可能的满足后期样式表现的需要。代码编写过程中让前端组提前进入开发流程中来，在原型图产出后就进行HTML结构的编写，页面设计完成后，再进行样式表的开发，这样不仅能节省很多的开发时间，提高开发效率，还能锻炼前端组的人员对全局页面的把控。在此同时也强调规范和模块化的重要性，在一个团队协同开发过程中，必须要严格按照规范执行，这样能便于后期维护，减少维护成本。而模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。

      3.内部测试与后续优化

    所有页面出完以后美工参与前端组的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面样式。让美工参与测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后，就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和减少外部HTTP请求。简单理解就是：产品经理产出产品需求文档（PRD）->交互设计产出原型图（prototype）->美工做出设计图->前端做出页面。由于后续环节受到前面的影响，并且前端介入项目的时间越早，当 PRD 和prototype 变动时，整体耗费的时间越多。解决此问题的关键不是流程顺序，而是保证流程产出物的稳定性。PRD, prototype，设计图的稳定性，是减少返工的关键因素。

       当规范和标准模式已经完成（包括全局样式、布局规范、标准盒模型等），这时开发项目的理想流程就是：

       a) 产品经理产出PRD

       b) 交互设计师统揽全局，将 PRD 中的可复用部分，拎取出来，产出 base-prototype.

       c-1). 视觉根据 base-prototype，产出 base-mockup.
       c-2). 前端根据 base-prototype 和 base-mockup 产出 page-demo.

       c-3). 交互继续具体页面的 page-prototype 产出工作。

     以上三步是并行和迭代进行的。
       d-1). 视觉根据 page-prototype 产出 page-mockup.
       d-2). 前端根据 page-mockup 产出 page-demo.
     以上两步迭代进行。

     最重要的一步是 base-prototype 的产出。交互要避免一个页面一个页面的产出顺序，而应该先有一个统揽全局、拎取通用部分的步骤。我们做一个页面时，需要 html 整体 -> 局部模块的 css/js, 逐层开发，先整体后局部，先框架后细节。