初入前端,面对一个项目应注意哪些?

前言:

对于初入职场的前端小白来说,一整个项目来了,顿时感觉压力山大,张皇失措,也总会感到手忙脚乱。其实不用怕,拆分步骤,把每个步骤做好,做细,一切都迎刃而解,犹如顺藤摸瓜般畅快淋漓。

目录:

  • 概念的介绍(可略)
  • 项目分哪几个阶段(每个阶段注意什么)
  • 如何排期
  • 解决问题的方法

概念的介绍:

PM(产品经理)
负责需求的提出和项目的引导。PM根据产品特点和发展目标提出一定的需求,并协调各方资源投入开发。
若需求层面有不清晰的地方,应当向PM沟通确认,如:需要做什么、希望达到什么效果、哪些内容应重点保证、哪些效果可以适当取舍等;

RD(后端)
负责后端接口和数据逻辑。一般复杂逻辑和内部数据会交由后端处理,并通过接口与前端交互。

FE(前端)
负责Web页面(M页)的界面展示和用户交互。一般样式、交互、动效等用户侧的效果/体验由前端负责,并通过接口与后端进行数据交互。

QA(测试)
负责整体质量把控。在开发人员开发联调完成后,一般需要由QA进行系统性的测试,从而纠偏纠错&查缺补漏,保证上线质量。
若QA误提bug或误给人员,应协助处理:若为QA环境/测试方式问题可协助定位说明、若为接口问题可协助定位转发、若为需求理解不一致可找PM确认;
若问题已解决,应及时关闭bug,使QA可以尽早验证。

Native(客户端,Android&iOS)
负责客户端APP的界面展示、用户交互等,并向M页提供WebView容器。转转APP、58APP、赶集APP等开发人员即为native开发人员,当页面运行于这些APP中时,对应native就是浏览器环境的提供者,比如我们想在原声的app中设置title就需要调用native提供的方法。

ui(用户界面)
负责项目的页面样式,动画效果的设计。

项目分哪几个阶段:

通常一个项目简单分为 四步:

  • 需求阶段
    ? 收集需求 ? 分析需求 ? 产出需求 ? 需求文档 ? 评审需求 ? 分配资源 ? 技术调研 ? 评估工作量 ? 制定排期
  • 开发阶段
    ? 接口评审 ? 测试用例评审 ? Coding ? 自测 ? 联调 ? 提测
  • 测试阶段
    ? 冒烟测试 ? 功能测试 ? 兼容性测试 ? 性能测试 ? 回归测试
  • 上线阶段
    ? 总结
需求阶段

PM明确需求并协调好各方人力之后,一般会发起需求评审,将开发、测试等相关人员聚集在一起,阐述需求具体内容并接受反馈和建议。
需求评审主要意义在于:

  • 明确需求,确保各方理解一致。避免实现过程与预期效果背道而驰。
  • 风险评估,问题及早暴露。若PM预期方案中存在较大的技术问题,技术人员可在评审时予以指出,从而及早思考对策。
  • 交流碰撞,方案权衡。技术人员反馈各内容实现难度和实现成本,PM权衡哪些内容优先实现,哪些内容采用替代方案,哪些内容予以舍弃。

需求评审环节FE应做的事:

阅读、梳理需求文档。PM一般会先发需求文档,后进行需求评审。评审前应先阅读好文档,并梳理其中的疑惑点和技术难点。
明确需求。评审过程应充分理解自己所需要完成的内容,不清晰之处应向PM确认、明确。
沟通反馈。有潜在的技术问题/风险,应及时向PM反馈,使其提前思考应对/替代方案。
理解目的。理解PM此次需求的主要目的,明白需求中哪些内容应重点保证,哪些内容可以适当取舍,避免在某些棘手却无关紧要的小功能上面浪费过多精力。
注意:
需求评审主要目的在于需求,具体实现细节应在会后相关人员自行沟通,避免耽误其他人时间。

排期

需求明确之后,然后排期,即:预期什么时候开始投入开发、什么时候能达到什么进度、什么时候可以上线等。

开发阶段

梳理需求,对整体效果进行功能拆分和模块拆分,包括:样式、动效、交互、数据接口、native接口、外部资源等,把功能细化。
兼容性测试:多为样式兼容性。尽可能在各终端下进行测试,尤其是低端安卓机下,出现问题的可能性比较大。

测试阶段

有些难点逻辑以及测试点及时和QA同学沟通,反馈

上线阶段

主动把“测试用例”(也就是所有的功能点)在 重新走一遍

如何排期:

签到活动排期.jpg

一个项目的工作量约五天,你最好把排期细化,假如你5天没有做完,那大家会觉得你不靠谱久而久之,觉得你能力不行,如果你订了五天,但是四天就搞定了,在同事之间大大增加信任 也会增加自己的信心,可见一个好的排期多么重要。
通常情况下,FE需要等UI出图然后排期,但排期前也可以做些整理

理清需求中:
依赖哪些外部资源,如:需要rd提供哪些接口、需要pm提供哪些数据(埋点、分享文案、分享图片...)、ui图中哪些需要切图,如何布局,哪部会后期可能频繁改动,是否需要sdk新增native接口支持等等。

需要实现哪些效果,如:下拉刷新、无限加载、tab吸顶、动画特效等
有哪些交互,如:按钮点击响应、下拉响应等
有哪些模块,如:Banner模块、分类入口模块、商品列表模块等

时间&风险评估
评估各模块各功能的工作量和可能存在的风险,工作量估算为时间,风险项预留一定时间,累加得到大概的整体所需工时。
结合自身其它工作安排和其它项目进度,估算可投入新项目的时间段,得到初步排期。

推动依赖资源
对于需要依赖的外部资源,应当提前联系相关人员,使其提前做好准备,避免需要时缺失影响后续流程。
根据依赖资源的预期就绪时间,调整排期。

技术调研
对于需求中较不熟悉较无把握存在较大风险的内容,优先进行技术调研。
这样,一是可以更科学地评估工作量,及早修正排期;二是可以避免无谓的支出,比如若将难题留到最后,可能会发现难题实在无法解决,不得不调整需求修改方案,导致此前开发全部都要推倒重来。

解决问题的方法

1.对于新手来讲编码中我们要关心两件事,一,数据的变化 。二,数据变化后结构样式的变化。
2.很多看似很棘手的问题,往往都是自己粗心所导致的比如变量名字不对啊,少打个符号,环境问
题也不容忽视,二分法要常用,简单讲就是先拿掉一部分代码,看另一部分有没有误。
3.若开发过程中发现项目工作量与预期有严重出入,或遇到高优先级项目介入等特殊情况,导致无法按照预期时间点完成项目内容,应当尽早向项目其他人员反馈,方便其修改时间安排。
4.事情一件一件做,最好不要多线程容易漏掉事情,专心做一件才会做的更好。
5.把每天要做的事情写在有道或者印象笔记里,也知道哪些需要做,哪些不需要做,到最后周报也不会忘记。
6.多用google搜索,到最后你会发现google搜索的人,技术就是比百度搜索的人要好一点。
7.沟通方法很重要,在讲述一个问题时要把问题的背景以及目的等说清楚,可以很快让听者明白你的意图。

作者:嘿黑蜗牛
链接:http://www.jianshu.com/p/750d6ec53bd5
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

时间: 2024-10-16 19:16:07

初入前端,面对一个项目应注意哪些?的相关文章

初入前端框架bootstrap--Web前端

Bootstraps是一种简洁.直观.强悍的前端开发框架,它让web开发更迅速.简单.对于初入Bootstrap的小白,高效进入主题很重要,能为我们节省很多时间,下面我将对使用Bootstrap开发前应该做什么做出详细指引,初学者可以围观一下,大神可以忽略哦! 1.下载Bootstrap框架 Bootrap:http://getbootstrap.com/2.3.2/getting-started.html Bootrap中文网:http://v3.bootcss.com/getting-sta

初入前端8

sass路径不能带中文 sass用混合值时,前面用固定名称@mixin(名称){}  @include(调用) bootstrap 1.12列式:每格60px  间距20px  3 6 3版  三格式布局 2.16列式:每格40px  间距20px  3 3 6 4版  四格式布局 注:在bootstrap下载压缩包后有三个文件夹(css.js.fonts)切勿改动,(.min.*为压缩版,.*为未压缩版)

初入前端7

一.Less技术是css的一种扩展技术 1.变量.混合(mixin).函数.运算 2.简化css代码,降低维护成本 3.解析器(koala)(后缀名.less文件需要用koala转换为css) 二.变量(值可变) [email protected]变量名+值 [email protected]是变量名(后面可自定义):后接值 [email protected](引入)(.less可变)(.css不可变) 三.混合(mixins)(值固定) 选择器有三种(class..名称(可自取).#名称(可自

初入前端10

web css原生代码响应式布局@media  scree bootstrap  移动端优先  自带框架 兼容性    不同的屏幕尺寸 (还原布局)    css原生代码响应式布局@media scree(手机屏幕) js文件自适应 app css原生响应式 1.宽高→用百分比 2.用rem [email protected]针对foot-size→heml 4.marigr.padding用百分比 5.meta.width

初入前端9

bootstrap css响应式布局 1.自适应(%) [email protected]媒体查询 3.1em=16px→浏览器的默认值(相对body,会继承) 4.1rem=16px→浏览器默认值→只针对app端而且只针对字体大小(相对html值,不会继承) css布局 [email protected] sreen and(min-width:1000px){} pc端 [email protected] sreen and(min-width:768px)and(max-width:999

初入前端2

input中的元素 1.form 表单(提交数据丶交互) 2.text 创建个输入文字的框 3.password 创建个密码框 4.image 插入图片 5.reset 创个按钮 6.file 选择电脑文件 7.date 日期框 8.email 邮件 9.numaber 数字 10.search 搜索框 11.url 地址 12.datetime-local 时间+日期框 13.autofocus 自动对焦 14.selected 自动对焦 15.multiple 创建多选选项 16.size

初入前端3

1.Video 视频元素 video只支持三种格式 ogg→ MP4→ webm 2.Audio 音频元素 Audio只支持三种元素oggvorbis→MP3→ wav 3.img 是个特殊的行列元素 4.div内加style是内联 → 谁的位置在前谁的优先级最高 head开头加style是内部样式 5.head开头加 link-href=html.file 是外部链接方式   (这三种方式内嵌最高) 6.<*>通配符选择器

初入前端4

1. 权重值 第一等:内嵌样式 如;style" ",权重值为1000 第二等:ID选择器 如:content,权重值为0100 第三等:类,伪类选择器 如content,权重值为0010 第四等:元素选择器,为元素选择器 如div丶p,权重值为0001 通配符选择器(*),子选择器(>)和相邻同胞选择器(+)权重值都为0000 注:imporant 本身没有权重值,其权重值为0000,但如果有它的存在,他会使得所有的权重值失效,须自己的权重值达到最高. 2.transparen

初入前端

基础的一些标签 1.<img=src" "> 插入图片(最好不要超过两个点) 2.<h1>_<h6> 标题文本 3.<a href=" "></a> 网站链接丶实现跳转 4.<a href=" "></a>  <a name=" ">创建锚点(缺点每次跳转后会刷新网页) 5.<div> </div> 创建盒