看淘宝UED招聘题，思索FSE技能定位(附参考答案)

saybody

浏览: 902562 次
性别:
来自: 西安

最近访客更多访客>>

morelily

juzhibest

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1052)

社区版块

存档分类

<div class="floatRPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="淘宝招聘题" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_1q/taobaoLogo.gif"></a> 
淘宝的审美眼光</div>
<h4>题目1：JavaScript方面</h4>
小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 70%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
1functionDog(){ 2this.wow=function(){ 3alert(’Wow’); 4} 5this.yelp=function(){ 6this.wow(); 7} 8}
</div>
 小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实现（提示关键字: 继承，原型，setInterval）。
<h5>参考答案，先自己思考一下哦！</h5>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<img id="Code_Closed_Image_103929" height="16" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif" width="11" align="top"><img id="Code_Open_Image_103929" style="display: none;" height="16" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif" width="11" align="top">先自己试试哦 1<img id="Codehighlighter1_18_155_Open_Image" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top"><img id="Codehighlighter1_18_155_Closed_Image" style="display: none;" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif" align="top">functionMadDog()<span id="Codehighlighter1_18_155_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;"><img alt="" src="http://www.cnblogs.com/Images/dot.gif">{ 2<img id="Codehighlighter1_47_153_Open_Image" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"><img id="Codehighlighter1_47_153_Closed_Image" style="display: none;" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif" align="top">this.yelp=function()<span id="Codehighlighter1_47_153_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;"><img alt="" src="http://www.cnblogs.com/Images/dot.gif">{ 3<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">varself=this; 4<img id="Codehighlighter1_105_140_Open_Image" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"><img id="Codehighlighter1_105_140_Closed_Image" style="display: none;" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif" align="top">setInterval(function()<span id="Codehighlighter1_105_140_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;"><img alt="" src="http://www.cnblogs.com/Images/dot.gif">{ 5<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">self.wow(); 6<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">},500); 7<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">} 8<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top">} 9<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">MadDog.prototype=newDog(); 10<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">//fortest 11<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">vardog=newDog(); 12<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">dog.yelp(); 13<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">varmadDog=newMadDog(); 14<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">madDog.yelp();
</div>
 <h6>淘宝招聘官评语</h6>
<blockquote>
以上是较为规范的一个解法，我们希望通过此题，检查应聘者对JS的语言基础及的面向对象开发的理解程度。其中的难点在于闭包的应用。
</blockquote>
<h4>题目2：CSS方面</h4>
使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
<h5>参考答案，先自己思考一下哦！</h5>
<textarea id="txtTestCode" rows="12" cols="65"> <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
</head>
<body>
<style type="text/css">
.box {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
/* hack for ie */
*display: block;
*font-size: 175px;
/* end */
border: 5px solid red;
}
.box img {
vertical-align:middle;
}
</style>
<div class="box">
<img src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/tb_m.PNG" alt="" />
</div>
</body>
</html>
</textarea><div style="clear: both;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"> 
</div>
<h6>淘宝招聘官评语</h6>
<blockquote>
很遗憾，这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算，高度/字体大小的比值为1.14左右时IE可实现垂直居中。
当然还有很多其他的实现方案，但需要引入额外的标签。对于流量超大的淘宝网而言，我们经过权衡，倾向于在此问题上合理的使用hack。
</blockquote>
<h4>题目3：XHMTL方面</h4>
在不使用 border 样式的情况下，画出一条一px高的横线，在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果。
<h5>参考答案，先自己思考一下哦！</h5>
<textarea id="txtTestCode2" rows="12" cols="65"> <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
</head>
<body>
<div style="height:1px;overflow:hidden;background:#000"></div>
</body>
</html>
</textarea><div style="clear: both;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"> 
</div>
<h6>淘宝招聘官评语</h6>
<blockquote>
此题要点是要求在浏览器的 QuirksMode 和 CSSCompat 模式下效果一致。解法有很多，以上是我们认为的最为合理的一种。
</blockquote>
<h4>题目4：JavaScript方面</h4>
请给Array本地对象增加一个原型方法，它的用途是删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
<h5>参考答案，先自己思考一下哦！</h5>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<img id="Code_Closed_Image_115941" height="16" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif" width="11" align="top"><img id="Code_Open_Image_115941" style="display: none;" height="16" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif" width="11" align="top">先自己思考一下哦 1<img id="Codehighlighter1_38_249_Open_Image" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top"><img id="Codehighlighter1_38_249_Closed_Image" style="display: none;" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif" align="top">Array.prototype.distinct=function()<span id="Codehighlighter1_38_249_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;"><img alt="" src="http://www.cnblogs.com/Images/dot.gif">{ 2<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">varret=[]; 3<img id="Codehighlighter1_94_234_Open_Image" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"><img id="Codehighlighter1_94_234_Closed_Image" style="display: none;" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif" align="top">for(vari=0;i<this.length;i++)<span id="Codehighlighter1_94_234_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;"><img alt="" src="http://www.cnblogs.com/Images/dot.gif">{ 4<img id="Codehighlighter1_134_231_Open_Image" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"><img id="Codehighlighter1_134_231_Closed_Image" style="display: none;" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif" align="top">for(varj=i+1;j<this.length;)<span id="Codehighlighter1_134_231_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;"><img alt="" src="http://www.cnblogs.com/Images/dot.gif">{ 5<img id="Codehighlighter1_164_206_Open_Image" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"><img id="Codehighlighter1_164_206_Closed_Image" style="display: none;" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif" align="top">if(this[i]===this[j])<span id="Codehighlighter1_164_206_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;"><img alt="" src="http://www.cnblogs.com/Images/dot.gif">{ 6<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">ret.push(this.splice(j,1)[0]); 7<img id="Codehighlighter1_212_227_Open_Image" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"><img id="Codehighlighter1_212_227_Closed_Image" style="display: none;" alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif" align="top">}else<span id="Codehighlighter1_212_227_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;"><img alt="" src="http://www.cnblogs.com/Images/dot.gif">{ 8<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">j++; 9<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">} 10<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">} 11<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">} 12<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">returnret; 13<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top">} 14<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">//fortest 15<img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">alert(['a','b','c','d','b','a','e'].distinct());
</div>
 <h6>淘宝招聘官评语</h6>
<blockquote>
这是最为普通的解法。在数组元素数量不高的情况下，它的性能是可以接受的。相信一定有不少朋友有更好的解法，请告诉我们。 
</blockquote>
<hr style="border-right: 0px; border-top: black 1px solid; border-left: 0px; border-bottom: 0px; height: 0px;">
<h4>我想说两句</h4>
从taobao的这次2007考题来看，对web前台职位的技能要求，已经很明显——web标准设计。从4道题目来看，考结构的占了一题，考表现的站了一题，考行为的占了两题。从这个比重来看，JavaScript的重要性，不言而喻。但是恰恰现在很多的学习web标准设计的朋友，都一头扎进css的研究当中，甚至误以为css就是web标准设计的全部。这点还是比较值得思考的。
提到JavaScript，很多做前台的都比较恐惧。美工、页面都可以做到很漂亮，但是就是JavaScript的基础比较差。我想这个也是比较值得反思的点。页面的配色、风格、图片等设计应该属于美工的事情，而后面两层（以三层架构为例）又是程序员的事情，所以，如果将自己定位为一个“Frontend Software Engineer”的时候，我们到底应该学习和掌握一些什么。我想淘宝的这个份试卷，还是比较有指导意义的。（当然，如果能力和精力比较好的话，全能是最好的。）
当然，我的意思也不是说，作为FSE（Frontend Software Engineer），只要掌握这三个方面就可以了。其实还需要一些其他的相关知识，例如SEO（搜索引擎优化）、UE（用户体验）等方面，甚至软件设计模式等方面也需要一定的能力，才能建设出好的（强壮、易维护、易扩展）网站。对待知识，我认为：第一：要广，只要和自己的职业定位相关的，都要有一定的了解。第二：要深，对自己凭着吃饭的技能一定要深入。掌握一些别人没有掌握的知识和能力，才能更好地体现自己的价值。
顺便推荐一篇文章（仅供参考）：<a title="WEB2.0的单手定则" href="http://www.twinsenliang.net/web/20080101.htm" target="_blank">《WEB2.0的单手定则》</a>
相关资料：
<ul style="margin: 0px 2px 0px 15px;">
<li>UED：User Experience Design 即：<a title="用户体验设计" href="http://www.baidu.com/s?wd=%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E8%AE%BE%E8%AE%A1" target="_blank">用户体验设计</a>
 </li>
<li>FSE： Frontend Software Engineer 即：<a title="前台软件工程师" href="http://www.baidu.com/s?wd=%E5%89%8D%E5%8F%B0%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B%E5%B8%88" target="_blank"> 前台软件工程师</a>
 </li>
<li>招聘网页源地址： <a title="招聘网页源地址" href="http://ued.taobao.com/blog/2007/11/20/job_test_explanation/" target="_blank">招聘网页源地址</a>
 </li>
<li>CSS hack： <a title="css hack" href="http://www.google.cn/search?q=css%20hack&ie=UTF-8&oe=GB2312&hl=zh-CN&domains=http://www.cnblogs.com/JustinYoung/&sitesearch=http://www.cnblogs.com/JustinYoung/" target="_blank">CSS hack资料</a>
 </li>
<li>QuirksMode和CSSCompat：诡异模式和标准模式（CSSCompat也叫Standards Mode） <a title="QuirksMode和CSSCompat" href="http://www.quirksmode.org/" target="_blank">QuirksMode和CSSCompat资料</a> </li>
</ul>

分享到：