从前一直再做前端,突然想到如果有一天领导让自己独立承担一个web 项目的话是否有足够的能力去接这个任务,要学会自己去搭建一些基础的工具信息。所有的这一切在心里都要有个大致的流程,不然真正做的时候难免会手忙脚乱起来,接不了这个活难免失去了一个表现自己的机会,接下来做的差了,则更影响了钱途,前途啊。所以本文对做PC端的项目进行了一个过程的总结。
  一、了解、明确需求。
  这个应该是第一步了,不了解需求你就不知道为什么要做,要怎么去做这个项目的工作。
  (1)明确需求是相当重要的,很有必要去和产品经理、设计人员去沟通,需要明白每一个按钮,每一个开关存在的意义,这个需要设计人员足够的了解项目的需求。之前做的一个项目就是这样,工资花了好多钱请了一个UI设计公司设计了一个十分高大上的产品,各种页面各种炫酷,领导觉得很满意,赶紧让我们去做,结果,真正到了我们开发人员手里去开发的时候,才发现有些东西虽然在这里很炫酷,但是根本不应该存在在这里啊,例如你把添加人员的按钮放在人员分组的管理下面,而不是人员管理下面有什么意义呢?结果可想而知,不仅一些功能白设计了而且由于项目时间关系还得我们开发去担任设计,重新设计功能的展示位置,这无疑耽误了项目的进度。
  (2)后台接口问题,一般大的公司前台和后台是分离的,如果分离需要去跟后台确定各种接口的方式,要有一个文档去管理这些后台接口,要有示例、测试数据。现在的一般都是Restful风格的API方便调用。管理的平台第一家公司用的是一个内部的叫OSG的接口管理系统,这里是一个所有接口的中转站,各个部门的接口都从这里走,还有的用的是showdoc尽心给管理。要是前后端不分离的话,后台便要自己开发,这个用node还是其他语言,也要做好相应的处理。
  (3)、明确功能点,做好任务分配。
  如果你是一个leader,那这一部分工作可能需要你去做了,列举好所有的业务功能点,列成一个Excel文件,明确每个功能的负责人,完成时间,技术难度等。这一步也是很重要的一步。
  (4)开发时间确定
  这个要确保开发时间的充足,不然匆匆忙忙做完一堆的bug改起来也是很痛苦的。这个而且前后台一起进行确认,不然前端做完了,发现后端的接口还没有完善,也是很耽误时间的。
  二、明确技术选型。
  这一步也非常重要,需要去根据设计人员设计,去确认这个工作到底应该去用什么框架去做。
  (1)最基本的页面布局工作,是用bootstrap、flex还是手写css进行布局或者其它,需要去一开始就确定,不然真正做的时候,不同的开发人员用的不同的东西,显然会造成项目代码的混乱。
  (2)页面的Css 是纯手写的还是使用Less或者Sass?这个根据项目的情况酌情处理,一旦使用的话就需要对这些脚本进行编译工作,这个工作可以用一些自动化工具例如Gulp webpack进行,也可以用Sublime(我用习惯这个了)、webstorm 等编辑器自带的插件进行,再或者使用考拉编译进行编译。
  (3)、js的模块化是用sea.js还是require.js ?还是不进行模块化。不进行模块化当项目很大的时候,代码将变得很难维护,所以建议进行模块化,至于到底是用sea.js还是require.js这个就看自己的喜欢的,两者的区别主要是一个是异步一个是同步的,具体区别问问度娘、谷歌。
  (4)、图表模块、table等用什么实现。图表有:echarts、highCharts等、table有bootstrap table 、jgGrid,datatables等等。
  三、自动化工具的使用。
  现在各种自动化的工具很多,例如:webpack, gulp, grunt等等,(技术更新实在太快了),到目前我只会gulp有点low了,感觉跟不上时代的感觉。这一步工作主要是减少一些重复的工作,比如压缩js、css、页面实时刷新等工作。我最近的一个项目是使用的gulp进行项目里的html、js文件进行多语种的处理,用gulp读取了language.js里的每句话对应的变量,然后再页面里进行替换后变成一个英文版和中文版的两份,这样的工作肯定也必须是要自动的工具去处理的,不然写两份的话不得痛苦死。
  四、基础代码的模块化。
  以上都是准备工作,但也是很重要的部分。这一步开始就可以真的开始就进行工作了。
  (1)、如果使用了自动化,自动化的脚本是要写的,具体去如何实现你需要的自动化工作,如何减少重复的,枯燥的工作将极大的提高开发效率,缩短开发时间。
  (2)、再者就是页面的 alert、对话框(confirm)、模态窗(layer,boostrap modal)、验证模块(例如:邮箱,电话号码的验证,不为空的验证等),日期处理(如:date add 、format等),这些需要有人去专门的进行模块化,而且一定要在真正的业务代码开始之前完成,否则后面修改起来将十分费劲。
  (3)还有就是要有人对项目里比较棘手的技术难题提前进行攻关,确保真正的业务开始开发时,技术已经可以实现了。
  五、业务代码的模块化。
  这一步开始就要真正的开始接触业务的东西了。开始这一步之前当然得要有设计的文档,假设你已经有了。功能代码也可以进行模块化进行,将项目设计文档里的出现的比较多的展示的内容进行抽离,例如表格,展示图,共用样式,页面布局等等、抽离出来,指定专门的一个两个开发人员进行开发,进行模块化,然后有一个人进行对这些模块的调用,组装。这部分工作让最熟悉的人去做相应的工作,可以提高开发效率。这部分里面包括和后台进行的接口,所以确保要有接口进行调用。
  六、零碎任务分配。
  大块的功能完了之后就是各个功能点了,这个应该在分配任务的时候分配好,当然也可以当前面的工作完了之后看开发人员的工作情况进行分配,保证每个人都有工作,保证项目不会拖沓。
  七、当上面的工作进行完了之后,整个项目的功能基本就完成了。最好还要让各自的开发人员测试下自己的功能。自测完成后再交由测试进行测试,后续就是bug修复的问题了。
  八、项目总结。
  项目完了总要总结一下,可以开一个内部的会议,将各自开发过程中的难题难点提出来,大家一起听听是怎么解决的,或者谁对别人开发的东西比较感兴趣,想要了解是怎么实现的及内部原理,在这个时候就可以进行沟通了交流了,这样的交流对提高团队人员的技能还是很有帮助的。然后一起聚个餐,增进下团队的友谊。
  过程中如果一个开发人员做了太久了一个类似的功能,可能会感到枯燥,所以避免一个人对一个大块的内容进行开发,连个交流的人都没有,会很痛苦。因为我就有这样的经历。
以上就是我的一些总结,希望对大家能有些许的帮助。如有不同意见,欢迎提出。
———完结
 
 

PC端Web项目开发流程的更多相关文章

  1. vue pc端网站项目开发坑点与难度记录

    背景 在一pc端的web项目里,由于某些特性需要由动态语言处理,所以只在有需要使用vue来处理数据的页面,直接引入vue.js来处理.由于刚开始并没有打算使用前端来渲染数据和处理交互,所以使用了一些非 ...

  2. web项目开发流程

    对于一个web项目,在实际编码之前,有一些通用的步骤来planning a website: 0.Defining the project (predr0->dr0) 对于外部项目,客户一般会发 ...

  3. Web项目开发流程 PC端

      一.了解.明确需求. 这个应该是第一步了,不了解需求你就不知道为什么要做,要怎么去做这个项目的工作. (1)明确需求是相当重要的,很有必要去和产品经理.设计人员去沟通,需要明白每一个按钮,每一个开 ...

  4. 移动端web app开发学习笔记

    移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...

  5. Web项目开发中用到的缓存技术

    在WEB开发中用来应付高流量最有效的办法就是用缓存技术,能有效的提高服务器负载性能,用空间换取时间.缓存一般用来 存储频繁访问的数据 临时存储耗时的计算结果 内存缓存减少磁盘IO 使用缓存的2个主要原 ...

  6. SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

    熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...

  7. Web项目开发介绍及实战项目介绍

    引言 本系列课程我们将学些Golang语言中的Web开发框架Iris的相关知识和用法.通过本系列视频课程,大家能够从零到一经历一个完整项目的开发,并在课程中了解实战项目开发的流程和项目设涉及的各个模块 ...

  8. web理论知识--网页访问过程(附有Django的web项目访问流程)

    当我们闲暇之余想上网看看新闻,或者看个电影,通常的操作是:打开电脑.打开浏览器.输入网址.浏览页面信息.点击自己感兴趣的连接......那么有没有想过,这些网页从哪里来的?过程中计算机又做了什么事情了 ...

  9. flask实战-留言板-Web程序开发流程

    Web程序开发流程 在实际的开发中,一个Web程序的开发过程要设计多个角色,比如客户(提出需求).项目经理(决定需求的实现方式).开发者(实现需求)等,在这里我们假设自己是一个人全职开发.一般来说一个 ...

随机推荐

  1. WebForm和MVC中都可以使用的路由

    1.在global.asax void Application_Start(object sender, EventArgs e) { // 在应用程序启动时运行的代码 // RouteConfig. ...

  2. UVa 10041 - Vito's Family

    题目大意:给出一些点,找到一个位置使这个位置到所有的点的距离的和最短. 很明显,排序,找中位数.关于中位数:有n个从小到大的数,k=(n+1)/2,若n为奇数,k为中位数,若n为偶数,k为中间那两个数 ...

  3. SQL四种语言

    1.DDL(Data Definition Language)数据库定义语言statements are used to define the database structure or schema ...

  4. ExportExcel

    package cn.com.jansh.core.util; import java.awt.print.Book; import java.io.BufferedInputStream; impo ...

  5. 关于bootstrap的modal弹出层嵌套子Modal所引发的血案(转)

    原文地址 http://blog.csdn.net/liuxiaogangqq/article/details/51821359 bootstrap的弹出层嵌套有一个问题 ,当子modal关闭时父的m ...

  6. --@angularjs--理解Angular中的$apply()以及$digest()

    $apply() 和 $digest() 在 AngularJS 中是两个核心概念,但是有时候它们又让人困惑.而为了了解 AngularJS 的工作方式,首先需要了解 $apply() 和 $dige ...

  7. 选项卡(TabHost)的功能与用法

    TabHost是一种非常实用的组件,TabHost可以很方便地在窗口上放置多个便签页,每个标签页相当于获得了一个与外部容器相同大小的组件摆法区域.通过这种方式,就可以在一个容器里放置更多组件,例如手机 ...

  8. JS属性操作

    一.属性读操作:元素.属性名   ( 获取.找到属性值 ) 属性写操作:元素.属性名 = 新的值   ( 替换.修改属性值 ) 二.没有属性名的,也可进行读.写操作: 读操作:元素.innerHTML ...

  9. Bootstrap入门(九)组件3:按钮组

    Bootstrap入门(九)组件3:按钮组   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link h ...

  10. 作为测试人员,我是这么报BUG的

    在测试人员提需求的时候,大家经常会看到,测试员和开发一言不合就上BUG.然后开发一下就炸了,屡试不爽,招招致命. 曾经看到有个段子这么写道: 不要对程序员说,你的代码有BUG. 他的第一反应是:1.你 ...