面试时对方问你，“xxx需求你是怎么做的”？你可以这样回答

如何去分析一个需求？这两天在给零基础课的同学们讲课的时候，正好讲到了，产品详情页的图片展示这里，ui是这样的，

跟京东那个的ui交互操作是一样的，我跟他们讲，这个东西如果不太清楚怎么做，可以先用笔在纸上画出来，从“属性”、“方法”、“事件”这三个角度去拆分这个需求，就这样做，

这个xMind的思维导图很清晰的把上面设计图中所包含的操作，都列出来了。

先写事件，那左右按钮肯定是事件，大图的局部细节图肯定会有一个鼠标移入事件，每个小图肯定会有一个点击事件，用以切换上面的大图。

然后是需要的方法，我们是按OO的工厂模式来写。那咱们零基础课前几天讲设计模式的时候，提到工厂模式是“构造器 + prototype”，那么肯定有一个init方法，然后是一个获得json的方法，然后是大图和小图的dom生成的方法。

再接下来的属性那一列，这个需求没什么具体的属性，就先随便写几个东西上去，什么接口啊，dom之类的。

////////

然后，我跟他们讲，，我现在写出来也给现在你们这些读者们讲，这个图画出来之后，接下来就像填空一样写js了。前面刚写到工厂模式是“构造器 + prototype”，那么伪代码示意：

// 这就是构造器了

function imageSwitch(){
 this.ida = $('#ida');
 this.idb = $('#idb');
 this.idc = $('#idc');
 ...
 this.init()
}
imageSwitch.prototype = {
 init:function(){
 var _self = this;
 },

// 刚才图里画了各种事件，先是左按钮

 leftBtn:function(){
 var _self = this;
 },

//然后是右按钮

 rightBtn:function(){
 var _self = this;
 },

// 然后是大图的局部

 bigImageMouse:function(){
 var _self = this;
 },

//然后是getJson的

 getAjaxJson:function(){
 var _self = this;
 },

//然后是小图点击切换大图

...

//然后是生成大图，

...

//然后是生成小图

}

new imageSwitch();

////////

看看，是不是和填空一样很类似，上面那个属性方法事件的图，还可以进一步再细画，就是在里面加上它们之间的相互调用关系，就这样，

上面的虚线就标明了这些方法与事件之间的调用关系，其中就包括了一些事件需要在获得json生成dom之后的回调之中才能进行。不能画的再多了，因为xmind的免费版不太稳定，画的太复杂文件容易损坏。

在面试的时候，就是这样的一张图，再加上用笔在纸上写的上面的伪代码，就能够很完美的回答对方问你某个东西是如何做的，这个问题了。

希望大家都能学会这个小方法，虽然它不是最有效的，但却是最简单的。只有三个维度，“属性，方法，事件”，写出来，就ok了。