码迷,mamicode.com
首页 > 其他好文 > 详细

前端开发的流程

时间:2017-04-14 14:14:14      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:代码   压缩图片   模式   不同   介绍   压缩   模块化   作文件   程序   

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

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

      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, 逐层开发,先整体后局部,先框架后细节。

前端开发的流程

标签:代码   压缩图片   模式   不同   介绍   压缩   模块化   作文件   程序   

原文地址:http://www.cnblogs.com/guanghuan521/p/6708560.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!