专栏首页web前端教室前端新人在开发的时候,怎么做需求分析?

前端新人在开发的时候,怎么做需求分析?

昨天的文章《【逻辑】什么是前端开发中的业务逻辑?》,简单的聊了一下什么是业务逻辑,并且说明了业务逻辑是来自于客户的需求。那么今天就再说一下,怎么做需求分析?

客户?谁是客户?

- 真实的某个客户;

- 你的老板;

- 产品经理;

- 你自己;

这几个角色都可以算做是客户,因为他们都可以向你提出需求。其中也包括你自己,万一你是自己创业呢,但如果是这样的话,你就将面对二重客户了,一是你自己;二是你自己所要服务的客户。

<!-- -->

我们说,前端开发是看图说话。也就是说,没有UI设计图,前端基本上做不了什么事情。

那么可以明确一个基本事实,前端的需求,很大程度上来自于UI设计图

设计图就是客户脑子里的需求的图形式展示。那么对于UI设计图的有效解读,就成了需求分析的第一步。我在网上随意找一个图,来演示一下如何解读一张设计图上的需求。就像这样,

很眼熟对吧,这是京东的首页。来吧,咱们看看它有哪些需求,

我画了几个圈、框,这几个地方都是大的需求的点,具体的实现需要进一步细化。但我们可以发现,这些圈、框其实都是各种“功能”,

1、顶搜索框;

2、column栏目导航图;

3、leftSubNav左边导航图;

4、产品大轮播图;

5、竖排广告位;

6、rightLogWrap右侧用户框;

。。。更多

看,我通过一张图,分析了至少6个需求。那么,怎么实现呢?

<!-- -->

想想看,第一个搜索,你要怎么做?先用中文汉字来描述一下,

1、要有静态页面;

2、input输入框获得焦点时,里面的提示文字要消失;

3、输入文字,点击搜索按钮时,获取搜索框的内容并做为数据提交到搜索接口;

4、跳转页面至产品列表页面;

如果面对搜索框时,你能不假思索的把上面的至少4步骤写出来,那么我说你能够比较清晰的分析业务需求。那么要用js怎么实现呢?我们要把中文汉字翻译为js代码。就像这样,伪代码:

input.addEventListen('focus',function(){

this.value='';

});

searchBtn.addEventListen('click',function(){

var xxtxt = input.getAttribute('value');

axios.get('http://xx.xx.jd.com/xx/xx',{

params:{

xxval : xxtxt

}

}).

then( _d => {

location.href = xx.xx....

...更多具体实现...

})

});

明白了吗?

大体上就是这样的一个思路方式。其实我们前端开发所做的,

1、你把事情想清楚,用嘴说一遍;

2、把它翻译成js;

当然了,我也知道实际情况没这么简单,过程中会有许多问题、bug、反复、难关。但如果你能确定好需求与开发的大方向的话,这些小问题都真的只是些小问题而已。

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【逻辑】什么是前端开发中的业务逻辑?

    业务逻辑?呵呵,许多前端新人很困惑这个话题。当他们在面试当中被问到“这个业务逻辑你是如何处理的”的时候,他们经常会不知如何回答。

    web前端教室
  • 怎么能学透一个知识点

    其实我个人觉得新手不太应该追求彻底的学透每一个知识点。因为初学的时候,钻的太深并不太利于对JS有一个整体的理解。反而有可能钻牛角尖。但这种方法和心态却是必须有的...

    web前端教室
  • 【图片简历】Vue.js在线简历编辑器&生成图片简历(一)

    用vueJs做一个在线简历编辑器吧,应该很简单。可以保存、修改、复制简历的小应用。 <!-- 分析需求 --> 1、页面结构生成; 2、简历内容保存; 3、简历...

    web前端教室
  • ZLT-MP v3.1.0 发布

    https://gitee.com/zlt2000/microservices-platform

    陶陶技术笔记
  • Fiddler抓包5-接口测试(Composer)

    前言 Fiddler最大的优势在于抓包,我们大部分使用的功能也在抓包的功能上,当然fiddler做接口测试也是非常方便的。 对于没有接口测试文档的时候,可以直...

    上海-悠悠
  • 临界区、互斥量、信号量

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

    大黄大黄大黄
  • 大数据除了Hadoop,还有Scrapy

    互联网+概念的兴起,中国的创业者几乎把互联网+这趟车开进了所有领域,传统领域的商家人心惶惶,言必谈互联网+,仿佛不套点互联网的概念都不好意思宣传自家产品;而赶在...

    华章科技
  • 【Java】如果有个带铃铛的门,可以这样来定义抽象类和接口

    抽象类 门(开门、关门) 接口:门铃(叮咚)、猫眼(看人) 对于这种附件形式的类,我们就可以用接口来表示。 注意:单继承多实现

    瑞新
  • Genesis框架从入门到精通(14): 布局函数

    正如我之前在Genesis Explained系列文章中所承诺的那样,今天将要填 genesis/lib/functions/layout.php 这个文件的坑...

    丘壑
  • vue中组件的data为什么是一个函数

    组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,...

    小蔚

扫码关注云+社区

领取腾讯云代金券