blog 阿里巴巴无线前端团队

题目来自阿里巴巴无线前端团队，我们招聘Web前端工程师。

为什么会有这些题目？这些题目代表了我看重的技能和方向，如果你觉得自己有能力有才华，但是苦于自己没有大公司经历简历被筛掉，请试试发这些题目的答案给我。

为什么没有职位描述？这些题目就是职位描述。

选择下面题目中的一个或者几个回答，可以直接写在评论里，并请留下邮箱。也可以把回答写在简历里直接发到我的邮箱 csf178 [at] gmail.com

你对前端职业发展有何看法？
前端和后端程序员应该如何合作？
讲几个你在项目中解决的让你印象最深的问题（难、匪夷所思、解决方案有趣都可以）
在JavaScript面向对象方面，你有什么体会和实践？
谈谈JavaScript中的闭包，以及你的实践。
说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进。
谈几个有趣的html标签，以及它们的语义。
讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？
说几个你觉得有趣的CSS3选择器，以及他们有趣的用法。
自己问自己一道代表你水平的面试题，然后回答。

一些提示 :

一个深入的答案强过十个正确的答案。
展现你的能力，有时候只需要一句话，有时候需要一篇长文
可以google，但是没有任何题目有标准答案
我保证认真看你的答案，但是不保证一一回复

May 06 '13 14:05 wintercn

哈哈，沙发，说一点点感触，前端和后端我目前经历中最愉快的合作方式是后端只负责API，输出JSON，前端负责模板渲染

May 06 '13 14:05 youhua

嗯……似乎其中有些题目就是你跟贺老当时问过我的

May 06 '13 14:05 myst729

js面向对象的实现方式很多，有多种框架都有很完善的解决方案。但是出于越简单越好不引入庞大框架的目的，曾经写过一个非常简单的面向对象实现，在自己写的很多项目（虽然都不是成熟的商业项目，目前本人学生）中都会使用。为了和老师讨论，特地把代码放在了github上，https://github.com/YuhangGe/js-oo , 求老师鉴定～

May 06 '13 14:05 YuhangGe

@myst729 哈哈哈你别看这样的题目通过率很低的

May 06 '13 14:05 wintercn

好题帮顶。谈谈JavaScript中的闭包，以及你的实践。答不上来。CSS八百年没用过了，记得position跟float有点冲突，要重新做实验才知道。

代表我水平的面试题，“人类全基因组序列在Reference基础上拼接后点突变、增加/缺失变异的筛选”可以么？？？

May 06 '13 14:05 TRRrrr

@YuhangGe 谈谈思路比代码要好哦

May 06 '13 14:05 wintercn

@TRRrrr 你妹…… 不过这题真风骚啊

May 06 '13 14:05 wintercn

真事儿，我面试的时候真讲了这些。我之前面IBM、一家midwareJava、网络工程师时候公司的人脑袋上都带着问号的重点问了为什么我简历里有两篇Genomic的publication，都做了什么，然后我讲的就是这些。看过回我一条，我自觉删留言……咱哥们不捣乱的！

May 06 '13 14:05 TRRrrr

没有用到响应式布局，有些机型屏幕很大，页面区域就那么小；太多的小圆角很耗性能，在一些机型和一些低端配置机下滑动会很卡，一些大屏机也会的。UC的夜间模式下，这个页面完蛋鸟~还有，淘宝网的logo，基本上是几年不变的，怎么不用appcache呢？还有，localstorage的key命名太简单了，不怕冲突么？列表页的分页那块，中间的页码选择，点击一下，箭头朝上，下拉菜单出现，原点再点击，下拉菜单隐藏，箭头没反应；最最不能忍受的是：那个瀑布流图片显示的，点击进某个分类进去之后，展现一堆图片出来，其中有三张加载显示不出来，也没什么提示，这也就算了，当我进入首页的时候，本来可以判定我的UA和devicePixelRatio，然后加载相应宽高的图片，但是一律加载的是两倍的，太浪费流量了，最最最最不能忍受的是，点击那个红心赞的，竟然跳转去登录，好吧，我是没有耐心的用户，我也懒得点击赞了，我后退，结果，图片又要重新加载过了~~这个地方应该用hashchange的，这样图片才不会再去load一次。还有就是，box-shadow也是很耗性能的，一些微小的阴影可以用border代替，性能会大增！以上说的都是错的！

May 06 '13 14:05 zack-lin

@wintercn 其实我想说……就目前而言，前端的职业发展挺尴尬的，会不会直接被你挂了……

May 06 '13 14:05 myst729

前端和后端程序员应该如何合作，这个我想我可以写一个自己糟糕经历的心得体会。。

May 06 '13 15:05 michaeljayt

答题不如交谈，从谈话的过程中可以了解你需要的一切。从谈话的过程中可以展示你的风彩

May 06 '13 15:05 airen

@michaeljayt 若我是面试官的话我感觉我会很喜欢听这个以及事后你对这次槽糕经验的反思和解决方法。不都说“经验”就是一次次的教训嘛～

May 06 '13 15:05 TRRrrr

谈谈JavaScript中的闭包，以及你的实践。

闭包

说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进。

最烂就是点击还会重新请求整个页面。然后地址栏就出来了。改进的话就说做成SPA。

May 06 '13 15:05 AKIo0O

你对前端职业发展有何看法？前端其实就是页面、交互的开发者，如果不在大型、注重web产品形象气质的企业中，存在的价值就可以忽略，目前我就在这样一家公司，不过我始终认为，前端工程师要比产品经理懂技术，要比后端工程师懂产品，他是技术人员，更是产品经理和后端工程师之间的桥梁，技术好了可以转后端，感觉到了可以做产品，进可攻退可守，算是比较不错的前端职业生涯规划。
前端和后端程序员应该如何合作？如果是做基于后端某一框架（如SpringMVC, Django）的ERP或者进销存等管理软件，前端基本就是写界面的，js往往不需要特别的模块化，跟后端的合作也就是写好界面给他们、然后包装一些js或者css3的交互效果，不过前端开发者在这种项目中最好能懂一点后端代码，如果能承担后端MVC层中的C的编写就更好了，什么时候需要用ajax、什么时候跳转，懂前端的艺术家都会比纯后端感觉好一点（我现在就在团队中扮演这么一个角色），如果使用REST规范去做项目，那么前端与后端的耦合度就会降到很低了，这时候就是对页面展示的一些数据格式进行规范化定义，这个是需要前后端达成一致的。
讲几个你在项目中解决的让你印象最深的问题（难、匪夷所思、解决方案有趣都可以）工作经验不足，没有什么特别匪夷所思的，讲一下用jquery选中select吧，今天刚遇到的，一直以为是要设置$('option').attr('selected',true);可是总生效不了，结果我无意中发现$('select').val('value')；就可以选中val = value的option。
在JavaScript面向对象方面，你有什么体会和实践？ js不够oo,因为我java出身同时掌握python语言，这两个无论动态还是静态语言的类定义继承等都很方便，js就有点太麻烦了，直接把类的引用做为构造函数，然后在prototype中定义实例变量，总是不够方便，不过原型继承这个概念很通透，也很利于扩展。实践方面，我没有做过很复杂的应用项目，没有自己定义过很多类，然后去扩展，不过jquery的插件是我工作中常用的，$.fn扩展jquery这个类的实例方法，能够很方便的使用jquery特性，让oo很舒服。
谈谈JavaScript中的闭包，以及你的实践。闭包其实就是定义一个匿名函数，使其内部变量仅仅贡献于函数内上下文，无污染的代码始终维护都很方便。
说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进。不好找
谈几个有趣的html标签，以及它们的语义。传统的 h1-h6, 后来html5又加入了更多语义化标签的支持，header（页眉）, footer（页脚）, acticle（文章主体）, aside（非主体部分）, nav（导航）, section（章节）, hgroup（标题组）, address（地址声明区） b, i（强调部分）也被赋予了语义的角色。
讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？ position: static[absolute, relative, fixed]. float:none[left,right]. display: block[inline,inline-block,...相当多，常用的就这三个] position:static时float才有用，position:一旦不是static或者relative它就脱离文档流了（其实我不是特别清楚，relative时是否脱离文档流）
说几个你觉得有趣的CSS3选择器，以及他们有趣的用法。 attr *="" ^="" ~="" $="", E:nth-child(n), 关系选择符 E+F(相邻的)
【自定义问题】怎么能让前端开发的成本降低，让新手程序员快速融入团队？关键还是看体系，一个企业的技术架构体系，就像后端一样，有着完善的框架，一个刚毕业不久的java程序员很快就能上手基于SpringMVC的项目开发。前端之所以难上手，难做出高质量的应用，关键还是体系太乱，没有成型的技术体系，目前我就在公司内部推崇一套技术体系，主要基于Bootstrap + jquery + Modernizr + jquery.ui ，绝不随随便便就增减体系，然后针对这一套框架做二次开发，封装成插件，或者公用类库，整理成企业自己的前端技术体系，让很多小白程序员很简单就上手前端开发，写很少前端代码。

May 06 '13 15:05 lpgray

思路蛮简单的。比如C继承自P，其中P和C都是通过function定义（比如function P(){}, function C(){}）则：

检索P的prototype中出现的但C中prototype没有的，赋给C。
给C添加静态成员（而不是prototype）base_objects（Array Type），里面保存P（如果P还有父亲K则也保存，以此类推），这样就相当于保存了继承关系树。
为C的prototype添加函数base，该函数用于在构造函数中调用，相当于JAVA的this.super()，实现原理里在里面通过call或apply函数调用父亲的构造函数（P.call或P.apply）。
为C的prototype添加函数callBase，该函数用在任意地方，用来调用父亲的某个函数。（比如this.callBase("Func");）。实现原理也是使用call或apply。
为了实现多级继承，在每个C类的实例中添加成员inherit_base_deep和inherit_deep，依次用在base函数和callBase函数中，用来记录当前调用的继承深度，通过这两个成员在base_objects这个数组（继承关系树）中可以正确地找到当前应该执行到了第几层父亲的相关函数。

通过以上思路，则实现了一个简单的面向对象，支持多继承、重写、多态。通过使用闭包，使得这个思路很符合原生的js语言思想，代码没有额外过多的面向对象的影子（比如一些框架有明显的createClass函数），也没有真正的父亲类的实例的存在（有些框架是给prototype添加new Parent()的实例）。唯一的潜在问题是可能有闭包的性能问题，但似乎可以不用考虑在内。

May 06 '13 15:05 YuhangGe

呀这里就开始讨论起来了啊不过好几道题不好答啊

May 06 '13 15:05 Rayi

你对前端职业发展有何看法？ JS一统天下
前端和后端程序员应该如何合作？好基友什么都好说

我也来凑凑热闹～

May 06 '13 15:05 ibigbug

@Rayi 目测楼上有几个答题的哥们已经杯具了 <(￣▽￣)> 哇哈哈…

May 06 '13 15:05 myst729

m.taobao.com的搜索框莫名其妙。

直接在input上面加分类按钮不就好了，干嘛让我觉得是我浏览器坏了。。

May 06 '13 15:05 ibigbug

关于闭包的看法 http://www.cnblogs.com/lwzz/archive/2013/04/14/2953117.html

关于面向对象的看法 http://www.cnblogs.com/lwzz/archive/2013/03/03/2941743.html

前端后端没事干喝喝酒吃吃饭打打羽毛球啊，增进感情。

印象最深的就是script # 生成的js代码看起来真心不爽啊，居然还要维护。

最能代表我水平的面试题就是：越南语的变迁与两国之间的经贸关系

May 06 '13 15:05 langxue

@langxue "前端后端没事干喝喝酒吃吃饭打打羽毛球啊，增进感情。" 大赞！别忘了叫上QA/Test跟DBA

May 06 '13 15:05 TRRrrr

貌似题都不好答.... 话说觉得前端有意思也就是玩jqTouch那会，标准都还没定功能都用上了

May 06 '13 15:05 byteshijinn

小应届菜鸟也来玩玩。 1、页面仔——>高级页面仔——>页面佬 8、优先级position（除了relative和默认）>float>display。position中absolute和fixed都是可以触发BFC而且还是inline-block的效果，text-align有效。float也是触发BFC，包裹元素但是text-align无效。display可以用block，inline-block，table-cell等触发BFC。然后影响按照优先级来说话。问题：!important IE6认识吗？答：认识。 440362682[at]企鹅.com