面试时对方问你,“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了。
- JDBC【介绍JDBC、使用JDBC连接数据库、简单的工具类】
- 019 单例模式的5种写法
- 图书管理系统【部署开发环境、解决分类、图书、前台页面模块】
- 图书管理系统【用户、购买、订单模块、添加权限】
- 04-02.总结switch,for,while,do。while跳转语句
- 图书管理系统【总结】
- JDBC【PreparedStatment、批处理、处理二进制、自动主键、调用存储过程、函数】
- JDBC【事务、元数据、改造JDBC工具类】
- JDBC【数据库连接池、DbUtils框架、分页】
- HTTP常见面试题
- Java基础-18(01)总结Map,HashMap,HashMap与Hashtable区别,Collections工具类
- 一个oracle查询引起的bug (r4笔记第59天)
- Java基础-18(02)总结Map,HashMap,HashMap与Hashtable区别,Collections工具类
- 特殊的物化视图刷新 (r4笔记第77天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 移植SDL到JZ2440显示BMP图片
- Vue图片验证码-自定义组件高级版
- Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue
- 19个JS超有用的简写技巧
- 【教程】移植web server到Ubuntu就是这么简单!
- 为什么采用Proxy重构响应系统 | Vue3源码系列
- 制作Linux嵌入式系统开机LOGO(图片)
- R语言奇淫巧技之pdftools包
- 14个Spring MVC超实用技巧!
- 想要成为前端Star 吗?一首歌时间将React / Vue 应用Docker 化
- 初识Pandas
- 【教程】从零制作文件系统到jz2440,使其支持telnet , ftp 和tftp
- Mybatis源码学习第六天(核心流程分析)之Executor分析
- EasyPoi导出Excel
- 盘点 15 个好用的 API 接口管理神器