"如果有個做轉盤的需求，你准備怎么做？設計師只會提供一個轉盤的圖片，其余都需要你完成，不能用框架和類庫。"
"這個轉盤沒有慣性的需求，只要求在手機上，用手指拖轉盤，能讓轉盤跟隨手指轉起來即可。"（后注：可以理解為手指拖動一個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 ，謝謝！