Web项目开发流程 PC端

Web项目开发流程 PC端

转自  https://www.cnblogs.com/mdengcc/p/6475733.html
一直再做前端,突然想到如果有一天领导让自己独立承担一个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修复的问题了。
八、项目总结。
项目完了总要总结一下,可以开一个内部的会议,将各自开发过程中的难题难点提出来,大家一起听听是怎么解决的,或者谁对别人开发的东西比较感兴趣,想要了解是怎么实现的及内部原理,在这个时候就可以进行沟通了交流了,这样的交流对提高团队人员的技能还是很有帮助的。然后一起聚个餐,增进下团队的友谊。
过程中如果一个开发人员做了太久了一个类似的功能,可能会感到枯燥,所以避免一个人对一个大块的内容进行开发,连个交流的人都没有,会很痛苦。因为我就有这样的经历。
以上就是我的一些总结,希望对大家能有些许的帮助。如有不同意见,欢迎提出。
———完结

转载于:https://www.cnblogs.com/qishiwuyu/p/9456393.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/570554.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hibernate常用的Java数据类型映射到mysql和Oracle

研究了常用的Java基本数据类型在mysql和oracle数据库的映射类型。这里使用的是包装类型做研究,一般在hibernate声明的时候最好不要用基本类型,因为数据库中的null空数据有可能映射为基本类型的时候会报错,但是映射到包装类型的时候值为null&a…

Spring Cloud 之 Feign 使用HTTP请求远程服务

Feign是从Netflix中分离出来的轻量级项目,能够在类接口上添加注释,成为一个REST API 客户端,Feign默认集成了Ribbon。 Feign中对 Hystrix 有依赖关系。Feign只是一个便利的rest框架,简化调用,最后还是通过ribbon在注册…

UI控件之UISlider

一、创建 UISlider *slider [[UISlider alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width-100, 50)]; 二、设置最大最小值 slider.minimumValue 0; slider.maximumValue 1; 三、改变圆形前面和后面的颜色 slider.minimumTrackTintColor [UIColor orang…

Front End Accessibility Development Guide

Header Carefully write heading(h1,h2,h3) for screen reader. Alternative Image Provide alt text for both essential and functional images. Provide empty alt text (alt””) for decorative images. Don’t repeat the alt text of an image in the adjacent text. De…

详细的Windows下安装 binwalk

1. https://github.com/ReFirmLabs/binwalk到这里下载binwalk,下载后解压。 2. 找到下载后的文件夹, 在这里要进行安装步骤,一边按着shift,一边按着鼠标右键,点击在此处打开命令窗口。 输入python setup.py install 安…

各大浏览器清除缓存(cache)详细步骤

1. Firefox 1.1 选择“Options”: 1.2 选择“Advanced”->“Network”->“Cached Web Content”,点击“Clear Now”: 2. Chrome 2.1 选择“Settings”: 2.2 点击页面底部“Show advanced settings”: 2.3 选择…

python部分 + 数据库 + 网络编程

PS:附上我的博客地址,答案中略的部分我的博客都有,直接原标题搜索即可。https://www.cnblogs.com/Roc-Atlantis/第一部分 Python基础篇(80题)为什么学习Python?Omit通过什么途径学习的Python?OmitPython和J…

使用 angular directive 和 json 数据的 D3 带标签 donut chart示例

利用angular resource加载priorityData.json中的json数据,结合D3画出甜甜圈图。运行index.html结果如图所示: priorityData.json中json数据如下: { "priority":{ "Blocker":12,"Critical":18,"Major&qu…

第一个express app 详细步骤

1. 全局安装node.js(请参考网上教程)。 如何判断是否全局安装成功?打开命令行终端,进入任意文件夹,输入node,不报错。 2. 安装express 2.1 创建app文件夹。并在此文件夹下创建文件package.json如下&#…

【scarletthln 关于算法的一点总结】

1. 分解问题的角度: fix 某一维度,尝试另一维度上的所有可能 a. 可能是array的(i, j)pointers, b. 可能是矩形的长与宽, c. 可能是tree的每一个subtree, d. 可能是情景题的每一对pair...2. 求所有解的, 暴力上backtracking吧3. 如果问最短/最少的, 先想BFS、DP这对…

Angularjs Nodejs Grunt 一个例子

做了一个简单的示例,目的是记录环境配置以及这套框架的结构流程。 1.配置环境 默认nodejs已安装。 安装以下模块:express(nodejs框架),grunt(javascript task runner),grunt-contrib-watch(g…

【C#/WPF】用Thumb做可拖拽的UI控件

【C#/WPF】用Thumb做可拖拽的UI控件 原文:【C#/WPF】用Thumb做可拖拽的UI控件需求&#xff1a;简单的可拖拽的图片 使用System.Windows.Controls.Primitives.Thumb类 前台&#xff1a; <Canvas x:Name"g"><Thumb Canvas.Left"10" Canvas.Top"…

PHP 常用设计模式 (转载)

1.单例模式 单例模式顾名思义&#xff0c;就是只有一个实例。作为对象的创建模式&#xff0c; 单例模式确保某一个类只有一个实例&#xff0c;而且自行实例化并向整个系统提供这个实例。 单例模式的要点有三个&#xff1a; 一是某个类只能有一个实例&#xff1b;二是它必须自行…

Angularjs切换网站配色模式简单示例1(切换css文件)

一个网站可以有多种配色方案&#xff0c;例如正常模式&#xff0c;夜间模式等。 简单示例一个通过点击按钮&#xff0c;更换css文件&#xff0c;达到切换配色模式的angularjs 小app。 主要文件有三个&#xff1a;index.html&#xff08;主文件&#xff09;&#xff0c;white.…

【转】在树莓派上实现人脸识别

教程参考地址&#xff1a;http://shumeipai.nxez.com/2018/08/12/facial-recognition-identification-on-raspberry-pi.html 转载于:https://www.cnblogs.com/little-kwy/p/9481259.html

Angularjs切换网站配色模式简单示例2(切换body元素的class)

一个网站可以有多种配色方案&#xff0c;例如正常模式&#xff0c;夜间模式等。 简单示例一个通过点击toggle 按钮&#xff0c;切换body元素的class&#xff0c;达到切换配色模式的angularjs小app。 1. Live范例可以在以下Codepen网址查看&#xff1a; http://codepen.io/Chris…

Eclipse中Maven项目出现红色感叹号问题

在Eclipse环境下&#xff0c;有时我们会遇到Maven项目出现红色感叹号的情形&#xff0c;而一旦项目出现感叹号&#xff0c;Eclipse便无法帮我们进行自动编译等工作&#xff0c;尽管有时候不会影响运行&#xff0c;但每次只能手动启动Maven重新编译&#xff0c;非常不便&#xf…

GitHub 配置及简单使用

一. 初始化 1. 初始化 git 目录 终端中进入到项目文件夹&#xff0c;然后输入以下命令。 git init 命令执行后&#xff0c;文件夹中会多一个.git 文件夹 2. 设置本机关联 GItHub 的用户名和邮箱 git config --global user.name "<username>" git conf…

斐波那契数列 (C#)

斐波那契数列&#xff08;Fibonacci sequence&#xff09;&#xff0c;又称黄金分割数列、因数学家列昂纳多斐波那契&#xff08;Leonardoda Fibonacci&#xff09;以兔子繁殖为例子而引入&#xff0c;故又称为“兔子数列”&#xff0c;指的是这样一个数列&#xff1a;1、1、2、…

Javascript 处理 JSON 数据 示例

最近做了一个 MEAN stack 的 app 。后台用 NodeJS 从 Jira rest api 获得JSON数据并做处理&#xff0c;然后前端用 AngularJS Ajax call 获得处理后的 JSON 数据&#xff0c;显示到 App 上。处理了很多 JSON 数据&#xff0c;决定编一个例子&#xff0c;写一个总结。 JSON 数据…