第一题:重构
- 原页面很少使用
<ul>
,更多的是用<div>
和<a>
,重构时将这些标签根据情景更换成了<ul>
或<dl>
;
原因:对搜索引擎更友好。并且更符合语义化。 - 原页面很多装饰性标签。比如slide,购物车的上下两条横线就使用了单独的
<div>
。重构时使用border
做线条。
原因:减少无意义的dom元素。 - 原页面布局多使用
float
。个人不喜欢使用float
。重构时,如果需要并排显示,则多用:diplay:inline-block;
原因:根据float
诞生的原意:使文字包裹在图片周围。则说明我们不应该过多的使用float
来做布局排版。并且display
,就是用来排版的。 - 原页面清除浮动的方式有这么几种:
1:加dom,将其设置为clear:both
(添加多余标签,不推荐)
2:加:before :after 伪元素将其设置为clear:both
3:加clearfix
类。
由于重构减少了float
的使用。所以并没有很多的clear方法。所以最终还是要减少使用float
啊。
个人不足
hack技巧不够。对IE并不友好。然后就对饿了么产生了崇高的敬意!!好吧 ,未来我会花时间在学习hack技巧上的。
第二题:「幻灯片」切换组件
实现了鼠标切换,实现了无限滚动。
第三题:利用所学知识,从 ele.me 网站(包括 m.ele.me)中找出 3 个可改进的点;
要求:至少 3 个,技术不限,也可以是交互方面的内容,并说明改进原因;
- 恩。。刚刚重构的那几个问题算吗?
- 然后我说一点点的交互问题:首页登录,使用手机验证码登录的话,点击发送验证码会弹出一个确认发送验证码的弹框。然后呢…如果输入错误并不是在这个弹框内提示,而是弹框消失,在原页面提示。我觉得这个可以改成在弹框内提示可能会更好一些呢~或者就不要弹框,原页面上输入验证码确认发送手机验证码也是不错的。
- http://ele.me/support/question/hotissue 这个页面右侧导航可以固定在视口内,内侧标签随内容的滚动而显示高亮。
- 还有一个就是…我不太喜欢每点一次
<a>
链接就弹出一个新窗口。so,点一会菜就会开很多个窗口。 - 商家菜品图片显示,我觉得可以换一个大小,因为多数商家的图片都不能完整的展示出来…本来店主用心拍的照片,放上去却显得不那么好看。我们是否可以考虑换个布局方式?比如像花瓣网一样的瀑布流布局?支持不同大小的图片?
第四题 说说为什么选择做一个前端(少于300字)
这真是百问不厌的问题啊。最初做前端是因为它很美(那些H5动画,SVG,WebGL做出来的东西多酷炫)。学了一段之后发现它很有用。(比如我可以自定义一些chrome插件来使生活更有趣和便捷)更多的学习之后我发现,学前端的都是活泼可爱的程序员,这些小伙伴真的太有趣了。然而,当我技术达到,我还是希望我可以回报社会,能写出有利于残障人士浏览的网页~
后记
做这套题是意料之外的。本以为发个简历就好了。没想到小鱼给了一个链接说做完发给他。奈何!!我周六周日时间已经安排好了。周一又要实习。(目前在一家小公司实习,更加坚定了我需要一个有活力,团队氛围超级棒的平台。所以开始寻找下一个实习。刚好看到饿了么,那么这就是缘分,希望可以一切顺利~)于是加了两天夜车,做了下题。
根据自己的理解,第一题应该是考察语义化,和一些常见的布局技巧,hack技巧。第二题应该考察的是对JS面向对象编程的理解,以及相关的dom操作,事件操作。第三题考察的是对自己未来所在的公司是否有足够的了解。第四题应该是看你这个人是不是公司合适的人~