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

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

客户？谁是客户？

- 真实的某个客户；

- 你的老板；

- 产品经理；

- 你自己；

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

<!-- -->

我们说，前端开发是看图说话。也就是说，没有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、反复、难关。但如果你能确定好需求与开发的大方向的话，这些小问题都真的只是些小问题而已。