大公司移动前端开发面试题——做转盘[参考代码已放出]

 

"如果有个做转盘的需求，你准备怎么做？设计师只会提供一个转盘的图片，其余都需要你完成，不能用框架和类库。"

"这个转盘没有惯性的需求，只要求在手机上，用手指拖转盘，能让转盘跟随手指转起来即可。"（后注：可以理解为手指拖动一个DIV，能让这个DIV绕中点旋转）

 

这是我在面试前端开发人员时，经常会问到的一道题。转盘是类似上图的样子。

 

博主之前在M公司和C公司的时候，经常用这题面试移动前端开发工程师。M公司的产品和设计是美国团队，在个别项目上UI设计比较大胆脱俗，对前端开发人员有较高的要求。C公司的只会JS的前端开发人员占比较大，产品经理有时提出的让人眼亮的需求，但从前端开发口中得到的答复往往是：“这个我们实现不了。”，产品经理只能作罢。

于是我设计了这道题，希望能找到一些知识较全面，会综合应用的前端开发人员。在平时面试过程中，因为时间的关系，也不要求应聘人员将它用代码写出来，只和我聊下思路即可。在聊的过程中，我会就相关的一些技术细节深入问一下。

通过这道题，可以探知应聘人员在移动端的开发经验，以及前端知识综合应用能力。

这道题的需求很简单，但需要开发人员掌握较全面的前端知识。我们来看下这道题 涉及（或者延伸）到哪些知识点：

 CSS：

• 背景图URL，位置和大小的写法（素材图片的尺寸可能不合适）;
• 容器圆角属性；
• 旋转的实现；
• 硬件加速是什么，什么条件下会开启硬件加速；
• retina屏幕上为什么显示会模糊，如何避免？

JS:

• 触摸事件；
• 阻止浏览器默认行为；
• 触摸事件和鼠标事件的不同处有哪些；
• 触摸坐标获取；
• 如果要两指一起拖动，圆盘才能旋转，代码需要做什么改变？
• 为什么在移动设备最好用touch事件，而不用mouse事件？
• 原生JS如何取DOM的内嵌CSS属性，如何获取外部样式表文件定义的属性?

Html: 

• viewport 的参数和作用

数学:

• 角度和弧度的换算
• 向量计算
• 三角函数

 

面试题大多如此，需求看起来简单，但涉及到的知识却不简单。大家如果有兴趣的话，可以拿这道题练下手（大家可以先只用考虑webkit内核）。我觉得，对于常规前端开发人员，会有较大提升吧。

 

 参考代码已放出，网址是：http://www.cnblogs.com/arfeizhang/p/turntable_demo.html

 

 

 

本文是博主Arfei Zhang原创，欢迎转载。转载请注明转自博客园，并附上本文链接http://www.cnblogs.com/arfeizhang/p/turntable.html  ，谢谢！