从前一直再做前端,突然想到如果有一天领导让自己独立承担一个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修复的问题了。
八、项目总结。
项目完了总要总结一下,可以开一个内部的会议,将各自开发过程中的难题难点提出来,大家一起听听是怎么解决的,或者谁对别人开发的东西比较感兴趣,想要了解是怎么实现的及内部原理,在这个时候就可以进行沟通了交流了,这样的交流对提高团队人员的技能还是很有帮助的。然后一起聚个餐,增进下团队的友谊。
过程中如果一个开发人员做了太久了一个类似的功能,可能会感到枯燥,所以避免一个人对一个大块的内容进行开发,连个交流的人都没有,会很痛苦。因为我就有这样的经历。
以上就是我的一些总结,希望对大家能有些许的帮助。如有不同意见,欢迎提出。
———完结
- vue pc端网站项目开发坑点与难度记录
背景 在一pc端的web项目里,由于某些特性需要由动态语言处理,所以只在有需要使用vue来处理数据的页面,直接引入vue.js来处理.由于刚开始并没有打算使用前端来渲染数据和处理交互,所以使用了一些非 ...
- web项目开发流程
对于一个web项目,在实际编码之前,有一些通用的步骤来planning a website: 0.Defining the project (predr0->dr0) 对于外部项目,客户一般会发 ...
- Web项目开发流程 PC端
一.了解.明确需求. 这个应该是第一步了,不了解需求你就不知道为什么要做,要怎么去做这个项目的工作. (1)明确需求是相当重要的,很有必要去和产品经理.设计人员去沟通,需要明白每一个按钮,每一个开 ...
- 移动端web app开发学习笔记
移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...
- Web项目开发中用到的缓存技术
在WEB开发中用来应付高流量最有效的办法就是用缓存技术,能有效的提高服务器负载性能,用空间换取时间.缓存一般用来 存储频繁访问的数据 临时存储耗时的计算结果 内存缓存减少磁盘IO 使用缓存的2个主要原 ...
- SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。
熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...
- Web项目开发介绍及实战项目介绍
引言 本系列课程我们将学些Golang语言中的Web开发框架Iris的相关知识和用法.通过本系列视频课程,大家能够从零到一经历一个完整项目的开发,并在课程中了解实战项目开发的流程和项目设涉及的各个模块 ...
- web理论知识--网页访问过程(附有Django的web项目访问流程)
当我们闲暇之余想上网看看新闻,或者看个电影,通常的操作是:打开电脑.打开浏览器.输入网址.浏览页面信息.点击自己感兴趣的连接......那么有没有想过,这些网页从哪里来的?过程中计算机又做了什么事情了 ...
- flask实战-留言板-Web程序开发流程
Web程序开发流程 在实际的开发中,一个Web程序的开发过程要设计多个角色,比如客户(提出需求).项目经理(决定需求的实现方式).开发者(实现需求)等,在这里我们假设自己是一个人全职开发.一般来说一个 ...
随机推荐
- android开发学习——day3
关于android开发的详细过程了解 Android App程序的四种重要组成类型:1.Activity 2.Service 3.Content Provider 4.Broadcast Receiv ...
- AdaBoost 算法原理及推导
AdaBoost(Adaptive Boosting):自适应提升方法. 1.AdaBoost算法介绍 AdaBoost是Boosting方法中最优代表性的提升算法.该方法通过在每轮降低分对样例的权重 ...
- 从移动硬盘开机,引导VHD(Win10)
STEP 1 USB隨身碟能順利Boot Win10,點擊[主引導記錄]來設定Windows NT6.x引導程序與啟動記錄. STEP 2 事實上,格式化時MBR的類型預設就是Windows NT 6 ...
- mysql ++中文乱码问题
使用mysql++读取mysql数据库,数据表中字符集为utf8,但是读取的时候中文字符串不能够正常显示.下面是测试程序: #include <iostream> #include < ...
- 11.TCP的交互数据流
TCP报文段一般有两类,分别是成块数据和交互数据. 1.交互式输入 Rlogin连接上键入一个交互命令的数据流如下图所示. 每一个交互按键都会产生一个数据分组,每次从客户传 ...
- HNU 13081 Even Up Solitaire解题报告
题目大意:给定一个数组,若相邻的两个数之和为偶数,则将此两个数移除,通过这种方法将满足条件得数移除后数组还剩多少个数. 此题太水,不做解释.直接代码之: #include <stdio.h> ...
- 样式(Style)和主题(Theme)资源——主题资源
与样式资源非常相似,主题资源的XML文件通常也放在/res/values 目录下,主题资源的XML文档同样以<resources.../>元素作为根元素,同样使用<style.../ ...
- 各种浏览器开启JavaScript脚本方法
各种浏览器开启JavaScript脚本方法 随着网站设计技术的发展,为了用户友好体验,大部分网站使用了JavaScript脚本设计,如果您的浏览器禁用或关闭的JavaScript支持,那么可能造成网站 ...
- CentOS-6.6下Tomcat-7.0安装与配置(Linux)
CentOS-6.6下Tomcat-7.0安装与配置(Linux) 一.认识tomcat Tomcat是一个免费的开源的Serlvet容器,它是Apache基金会的Jakarta项目中的一个核心项目, ...
- jpg图片在开发板上显示
文件IO项目: 在开发板屏幕上循环显示目录里的图片 a.按照一定的间隔循环显示目录里的bmp图片 b.实现手指滑动来显示目录里的图片(bmp,jpg)上一张,下一张 d1: 1.能操控屏幕(查询开发板 ...