面试时对方问你,“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了。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2017-06-01

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python中文社区

利用人工智能实现小程序自动答题

之前有看到有人用python实现自动运行微信小程序《跳一跳》,后来看到别人用hash码实现《加减大师》的自动答题领取娃娃,最近一直在研究深度学习,为啥不用机器学...

1.3K20
来自专栏瓜大三哥

实现(Implement)

1.翻译过程 在翻译过程中,设计文件和约束文件将被合并生成NGD(原始类型数据库)输出文件和BLD文件。 1) Translation Report:用以显示翻...

22950
来自专栏Golang语言社区

【go语言】Goroutines 并发模式(二)

摘要 接上一篇博客,主要是对GO语言中的并发编程模式做一个粗略的归纳总结,文中示例参考自golang conference中的一些演讲和博客,go涉及到的Go语...

25130
来自专栏ThoughtWorks

GEEK的心思你别猜

#ThoughtWorkers好声音#第十二期(图片:网络) 都说Geek的世界高深莫测,无法轻易探究。有多高深? 就是写幻灯片都用文本格式,更Geek的做法...

26140
来自专栏AI研习社

Github 项目推荐 | 真实全景图像强化学习 AI 平台 —— Matterport3DSimulator

Matterport3DSimulator 可以使用视觉信息(RGB-D 图像)开发与真实 3D 环境交互的 AI Agent,它主要应用于深度强化学习的研究以...

521120
来自专栏Golang语言社区

有限状态机FSM的原理与GO的实现

有限状态机(Finite-state machine, 简写FSM)又可以称作有限状态自动机。它必须是可以附着在某种事物上的,且该事物的状态是有限的,通过某些触...

66270
来自专栏大数据文摘

手把手|在Python中用Bokeh实现交互式数据可视化

3.7K50
来自专栏IMWeb前端团队

LaTex数理化公式展示方案简介

本文作者:IMWeb jerytang 原文出处:IMWeb社区 未经同意,禁止转载 LaTex 是什么 LaTex 是基于 Tex 的排版系统,常用...

89260
来自专栏华章科技

Excel技巧篇:嘿!别说你会复制粘贴

有时,我们用函数公式计算出了某个结果,把结果复制到表格其它地方后,却发现数据变成错误值了。。。把公式结果粘贴成数值,立马搞定这个问题。

15430
来自专栏腾讯NEXT学位

简单三步做出微信h5表情包

25840

扫码关注云+社区

领取腾讯云代金券