- 浏览: 902538 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
qunhua1861:
我已做好准备,让您无可挑剔。白癜风常识http://www.4 ...
创业路上之谢谢王磊何公道丁凯李亚平黄小润张小兵 -
qunhua1861:
给我一份信任,还您一身健康。白癜风常识http://m.400 ...
创业路上之无尽感谢 -
qunhua1861:
以我真心、关心、耐心,换您放心、安心、舒心。<a hre ...
《博客园精华集》web标准分册第2论筛选结果文章列表 -
saieuler:
真的吗??
物理运动模拟引擎 -
saieuler:
每次都是学会了,过段时间又忘了
记录KMP算法,记录其经典之处。。。
看淘宝UED招聘题,思索FSE技能定位(附参考答案)
<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><br>
淘宝的审美眼光</div>
<h4>题目1:JavaScript方面</h4>
<p>小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象:</p>
<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;">
<span style="color: #008080;">1</span><span style="color: #0000ff;">function</span><span style="color: #000000;">Dog(){<br></span><span style="color: #008080;">2</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.wow</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){<br></span><span style="color: #008080;">3</span><span style="color: #000000;">alert(’Wow’);<br></span><span style="color: #008080;">4</span><span style="color: #000000;">}<br></span><span style="color: #008080;">5</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.yelp</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){<br></span><span style="color: #008080;">6</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.wow();<br></span><span style="color: #008080;">7</span><span style="color: #000000;">}<br></span><span style="color: #008080;">8</span><span style="color: #000000;">}</span>
</div>
<br><p>小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述,按示例的形式用代码来实现(提示关键字: 继承,原型,setInterval)。</p>
<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"><span id="Code_Closed_Text_103929" style="border-right: #808080 1px solid; border-top: #808080 1px solid; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;">先自己试试哦</span><span id="Code_Open_Text_103929" style="display: none;"><br><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008080;">1</span><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"><span style="color: #0000ff;">function</span><span style="color: #000000;">MadDog()</span><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"></span><span id="Codehighlighter1_18_155_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">2</span><span style="color: #000000;"><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"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.yelp</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">function</span><span style="color: #000000;">()</span><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"></span><span id="Codehighlighter1_47_153_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">3</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top"></span><span style="color: #0000ff;">var</span><span style="color: #000000;">self</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">;<br></span><span style="color: #008080;">4</span><span style="color: #000000;"><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(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">()</span><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"></span><span id="Codehighlighter1_105_140_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">5</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">self.wow();<br></span><span style="color: #008080;">6</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;">,</span><span style="color: #000000;">500</span><span style="color: #000000;">);<br></span><span style="color: #008080;">7</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">8</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">9</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">MadDog.prototype</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">new</span><span style="color: #000000;">Dog();<br></span><span style="color: #008080;">10</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #008000;">//</span><span style="color: #008000;">fortest</span><span style="color: #008000;"><br></span><span style="color: #008080;">11</span><span style="color: #008000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #0000ff;">var</span><span style="color: #000000;">dog</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">new</span><span style="color: #000000;">Dog();<br></span><span style="color: #008080;">12</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">dog.yelp();<br></span><span style="color: #008080;">13</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #0000ff;">var</span><span style="color: #000000;">madDog</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">new</span><span style="color: #000000;">MadDog();<br></span><span style="color: #008080;">14</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">madDog.yelp();</span></span>
</div>
<br><h6>淘宝招聘官评语</h6>
<blockquote>
<p>以上是较为规范的一个解法,我们希望通过此题,检查应聘者对JS的语言基础及的面向对象开发的理解程度。其中的难点在于闭包的应用。</p>
</blockquote>
<h4>题目2:CSS方面</h4>
<p>使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。</p>
<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="另存代码"><br><br>
</div>
<h6>淘宝招聘官评语</h6>
<blockquote>
<p>很遗憾,这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算,高度/字体大小的比值为1.14左右时IE可实现垂直居中。</p>
<p>当然还有很多其他的实现方案,但需要引入额外的标签。对于流量超大的淘宝网而言,我们经过权衡,倾向于在此问题上合理的使用hack。</p>
</blockquote>
<h4>题目3:XHMTL方面</h4>
<p>在不使用 border 样式的情况下,画出一条一px高的横线,在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果。</p>
<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="另存代码"><br><br>
</div>
<h6>淘宝招聘官评语</h6>
<blockquote>
<p>此题要点是要求在浏览器的 QuirksMode 和 CSSCompat 模式下效果一致。解法有很多,以上是我们认为的最为合理的一种。</p>
</blockquote>
<h4>题目4:JavaScript方面</h4>
<p>请给Array本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组。</p>
<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"><span id="Code_Closed_Text_115941" style="border-right: #808080 1px solid; border-top: #808080 1px solid; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;">先自己思考一下哦</span><span id="Code_Open_Text_115941" style="display: none;"><br><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008080;">1</span><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"><span style="color: #000000;">Array.prototype.distinct</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">function</span><span style="color: #000000;">()</span><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"></span><span id="Codehighlighter1_38_249_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">2</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top"></span><span style="color: #0000ff;">var</span><span style="color: #000000;">ret</span><span style="color: #000000;">=</span><span style="color: #000000;">[];<br></span><span style="color: #008080;">3</span><span style="color: #000000;"><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"></span><span style="color: #0000ff;">for</span><span style="color: #000000;">(</span><span style="color: #0000ff;">var</span><span style="color: #000000;">i</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #000000;">0</span><span style="color: #000000;">;i</span><span style="color: #000000;"><</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.length;i</span><span style="color: #000000;">++</span><span style="color: #000000;">)</span><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"></span><span id="Codehighlighter1_94_234_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">4</span><span style="color: #000000;"><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"></span><span style="color: #0000ff;">for</span><span style="color: #000000;">(</span><span style="color: #0000ff;">var</span><span style="color: #000000;">j</span><span style="color: #000000;">=</span><span style="color: #000000;">i</span><span style="color: #000000;">+</span><span style="color: #000000;">1</span><span style="color: #000000;">;j</span><span style="color: #000000;"><</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.length;)</span><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"></span><span id="Codehighlighter1_134_231_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">5</span><span style="color: #000000;"><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"></span><span style="color: #0000ff;">if</span><span style="color: #000000;">(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">[i]</span><span style="color: #000000;">===</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">[j])</span><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"></span><span id="Codehighlighter1_164_206_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">6</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">ret.push(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.splice(j,</span><span style="color: #000000;">1</span><span style="color: #000000;">)[</span><span style="color: #000000;">0</span><span style="color: #000000;">]);<br></span><span style="color: #008080;">7</span><span style="color: #000000;"><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">}</span></span><span style="color: #000000;"></span><span style="color: #0000ff;">else</span><span style="color: #000000;"></span><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"></span><span id="Codehighlighter1_212_227_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">8</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">j</span><span style="color: #000000;">++</span><span style="color: #000000;">;<br></span><span style="color: #008080;">9</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">10</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">11</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">12</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top"></span><span style="color: #0000ff;">return</span><span style="color: #000000;">ret;<br></span><span style="color: #008080;">13</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">14</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #008000;">//</span><span style="color: #008000;">fortest</span><span style="color: #008000;"><br></span><span style="color: #008080;">15</span><span style="color: #008000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #000000;">alert([</span><span style="color: #000000;">'</span><span style="color: #000000;">a</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">b</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">c</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">d</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">b</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">a</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">e</span><span style="color: #000000;">'</span><span style="color: #000000;">].distinct());</span></span>
</div>
<br><h6>淘宝招聘官评语</h6>
<blockquote>
<p>这是最为普通的解法。在数组元素数量不高的情况下,它的性能是可以接受的。相信一定有不少朋友有更好的解法,请告诉我们。 </p>
</blockquote>
<hr style="border-right: 0px; border-top: black 1px solid; border-left: 0px; border-bottom: 0px; height: 0px;">
<h4>我想说两句</h4>
<p>从taobao的这次2007考题来看,对web前台职位的技能要求,已经很明显——web标准设计。从4道题目来看,考结构的占了一题,考表现的站了一题,考行为的占了两题。从这个比重来看,JavaScript的重要性,不言而喻。但是恰恰现在很多的学习web标准设计的朋友,都一头扎进css的研究当中,甚至误以为css就是web标准设计的全部。这点还是比较值得思考的。</p>
<p>提到JavaScript,很多做前台的都比较恐惧。美工、页面都可以做到很漂亮,但是就是JavaScript的基础比较差。我想这个也是比较值得反思的点。页面的配色、风格、图片等设计应该属于美工的事情,而后面两层(以三层架构为例)又是程序员的事情,所以,如果将自己定位为一个“Frontend Software Engineer”的时候,我们到底应该学习和掌握一些什么。我想淘宝的这个份试卷,还是比较有指导意义的。(当然,如果能力和精力比较好的话,全能是最好的。)</p>
<p>当然,我的意思也不是说,作为FSE(Frontend Software Engineer),只要掌握这三个方面就可以了。其实还需要一些其他的相关知识,例如SEO(搜索引擎优化)、UE(用户体验)等方面,甚至软件设计模式等方面也需要一定的能力,才能建设出好的(强壮、易维护、易扩展)网站。对待知识,我认为:第一:要广,只要和自己的职业定位相关的,都要有一定的了解。第二:要深,对自己凭着吃饭的技能一定要深入。掌握一些别人没有掌握的知识和能力,才能更好地体现自己的价值。</p>
<p>顺便推荐一篇文章(仅供参考):<a title="WEB2.0的单手定则" href="http://www.twinsenliang.net/web/20080101.htm" target="_blank">《WEB2.0的单手定则》</a></p>
相关资料:
<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>
<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><br>
淘宝的审美眼光</div>
<h4>题目1:JavaScript方面</h4>
<p>小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象:</p>
<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;">
<span style="color: #008080;">1</span><span style="color: #0000ff;">function</span><span style="color: #000000;">Dog(){<br></span><span style="color: #008080;">2</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.wow</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){<br></span><span style="color: #008080;">3</span><span style="color: #000000;">alert(’Wow’);<br></span><span style="color: #008080;">4</span><span style="color: #000000;">}<br></span><span style="color: #008080;">5</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.yelp</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){<br></span><span style="color: #008080;">6</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.wow();<br></span><span style="color: #008080;">7</span><span style="color: #000000;">}<br></span><span style="color: #008080;">8</span><span style="color: #000000;">}</span>
</div>
<br><p>小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述,按示例的形式用代码来实现(提示关键字: 继承,原型,setInterval)。</p>
<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"><span id="Code_Closed_Text_103929" style="border-right: #808080 1px solid; border-top: #808080 1px solid; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;">先自己试试哦</span><span id="Code_Open_Text_103929" style="display: none;"><br><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008080;">1</span><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"><span style="color: #0000ff;">function</span><span style="color: #000000;">MadDog()</span><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"></span><span id="Codehighlighter1_18_155_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">2</span><span style="color: #000000;"><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"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.yelp</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">function</span><span style="color: #000000;">()</span><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"></span><span id="Codehighlighter1_47_153_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">3</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top"></span><span style="color: #0000ff;">var</span><span style="color: #000000;">self</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">;<br></span><span style="color: #008080;">4</span><span style="color: #000000;"><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(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">()</span><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"></span><span id="Codehighlighter1_105_140_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">5</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">self.wow();<br></span><span style="color: #008080;">6</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;">,</span><span style="color: #000000;">500</span><span style="color: #000000;">);<br></span><span style="color: #008080;">7</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">8</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">9</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">MadDog.prototype</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">new</span><span style="color: #000000;">Dog();<br></span><span style="color: #008080;">10</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #008000;">//</span><span style="color: #008000;">fortest</span><span style="color: #008000;"><br></span><span style="color: #008080;">11</span><span style="color: #008000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #0000ff;">var</span><span style="color: #000000;">dog</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">new</span><span style="color: #000000;">Dog();<br></span><span style="color: #008080;">12</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">dog.yelp();<br></span><span style="color: #008080;">13</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #0000ff;">var</span><span style="color: #000000;">madDog</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">new</span><span style="color: #000000;">MadDog();<br></span><span style="color: #008080;">14</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top">madDog.yelp();</span></span>
</div>
<br><h6>淘宝招聘官评语</h6>
<blockquote>
<p>以上是较为规范的一个解法,我们希望通过此题,检查应聘者对JS的语言基础及的面向对象开发的理解程度。其中的难点在于闭包的应用。</p>
</blockquote>
<h4>题目2:CSS方面</h4>
<p>使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。</p>
<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="另存代码"><br><br>
</div>
<h6>淘宝招聘官评语</h6>
<blockquote>
<p>很遗憾,这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算,高度/字体大小的比值为1.14左右时IE可实现垂直居中。</p>
<p>当然还有很多其他的实现方案,但需要引入额外的标签。对于流量超大的淘宝网而言,我们经过权衡,倾向于在此问题上合理的使用hack。</p>
</blockquote>
<h4>题目3:XHMTL方面</h4>
<p>在不使用 border 样式的情况下,画出一条一px高的横线,在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果。</p>
<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="另存代码"><br><br>
</div>
<h6>淘宝招聘官评语</h6>
<blockquote>
<p>此题要点是要求在浏览器的 QuirksMode 和 CSSCompat 模式下效果一致。解法有很多,以上是我们认为的最为合理的一种。</p>
</blockquote>
<h4>题目4:JavaScript方面</h4>
<p>请给Array本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组。</p>
<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"><span id="Code_Closed_Text_115941" style="border-right: #808080 1px solid; border-top: #808080 1px solid; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff;">先自己思考一下哦</span><span id="Code_Open_Text_115941" style="display: none;"><br><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008080;">1</span><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"><span style="color: #000000;">Array.prototype.distinct</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #0000ff;">function</span><span style="color: #000000;">()</span><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"></span><span id="Codehighlighter1_38_249_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">2</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top"></span><span style="color: #0000ff;">var</span><span style="color: #000000;">ret</span><span style="color: #000000;">=</span><span style="color: #000000;">[];<br></span><span style="color: #008080;">3</span><span style="color: #000000;"><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"></span><span style="color: #0000ff;">for</span><span style="color: #000000;">(</span><span style="color: #0000ff;">var</span><span style="color: #000000;">i</span><span style="color: #000000;">=</span><span style="color: #000000;"></span><span style="color: #000000;">0</span><span style="color: #000000;">;i</span><span style="color: #000000;"><</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.length;i</span><span style="color: #000000;">++</span><span style="color: #000000;">)</span><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"></span><span id="Codehighlighter1_94_234_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">4</span><span style="color: #000000;"><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"></span><span style="color: #0000ff;">for</span><span style="color: #000000;">(</span><span style="color: #0000ff;">var</span><span style="color: #000000;">j</span><span style="color: #000000;">=</span><span style="color: #000000;">i</span><span style="color: #000000;">+</span><span style="color: #000000;">1</span><span style="color: #000000;">;j</span><span style="color: #000000;"><</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">.length;)</span><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"></span><span id="Codehighlighter1_134_231_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">5</span><span style="color: #000000;"><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"></span><span style="color: #0000ff;">if</span><span style="color: #000000;">(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">[i]</span><span style="color: #000000;">===</span><span style="color: #000000;"></span><span style="color: #0000ff;">this</span><span style="color: #000000;">[j])</span><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"></span><span id="Codehighlighter1_164_206_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">6</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">ret.push(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.splice(j,</span><span style="color: #000000;">1</span><span style="color: #000000;">)[</span><span style="color: #000000;">0</span><span style="color: #000000;">]);<br></span><span style="color: #008080;">7</span><span style="color: #000000;"><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">}</span></span><span style="color: #000000;"></span><span style="color: #0000ff;">else</span><span style="color: #000000;"></span><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"></span><span id="Codehighlighter1_212_227_Open_Text"><span style="color: #000000;">{<br></span><span style="color: #008080;">8</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top">j</span><span style="color: #000000;">++</span><span style="color: #000000;">;<br></span><span style="color: #008080;">9</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">10</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">11</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">12</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif" align="top"></span><span style="color: #0000ff;">return</span><span style="color: #000000;">ret;<br></span><span style="color: #008080;">13</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top">}</span></span><span style="color: #000000;"><br></span><span style="color: #008080;">14</span><span style="color: #000000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #008000;">//</span><span style="color: #008000;">fortest</span><span style="color: #008000;"><br></span><span style="color: #008080;">15</span><span style="color: #008000;"><img alt="" src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top"></span><span style="color: #000000;">alert([</span><span style="color: #000000;">'</span><span style="color: #000000;">a</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">b</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">c</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">d</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">b</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">a</span><span style="color: #000000;">'</span><span style="color: #000000;">,</span><span style="color: #000000;">'</span><span style="color: #000000;">e</span><span style="color: #000000;">'</span><span style="color: #000000;">].distinct());</span></span>
</div>
<br><h6>淘宝招聘官评语</h6>
<blockquote>
<p>这是最为普通的解法。在数组元素数量不高的情况下,它的性能是可以接受的。相信一定有不少朋友有更好的解法,请告诉我们。 </p>
</blockquote>
<hr style="border-right: 0px; border-top: black 1px solid; border-left: 0px; border-bottom: 0px; height: 0px;">
<h4>我想说两句</h4>
<p>从taobao的这次2007考题来看,对web前台职位的技能要求,已经很明显——web标准设计。从4道题目来看,考结构的占了一题,考表现的站了一题,考行为的占了两题。从这个比重来看,JavaScript的重要性,不言而喻。但是恰恰现在很多的学习web标准设计的朋友,都一头扎进css的研究当中,甚至误以为css就是web标准设计的全部。这点还是比较值得思考的。</p>
<p>提到JavaScript,很多做前台的都比较恐惧。美工、页面都可以做到很漂亮,但是就是JavaScript的基础比较差。我想这个也是比较值得反思的点。页面的配色、风格、图片等设计应该属于美工的事情,而后面两层(以三层架构为例)又是程序员的事情,所以,如果将自己定位为一个“Frontend Software Engineer”的时候,我们到底应该学习和掌握一些什么。我想淘宝的这个份试卷,还是比较有指导意义的。(当然,如果能力和精力比较好的话,全能是最好的。)</p>
<p>当然,我的意思也不是说,作为FSE(Frontend Software Engineer),只要掌握这三个方面就可以了。其实还需要一些其他的相关知识,例如SEO(搜索引擎优化)、UE(用户体验)等方面,甚至软件设计模式等方面也需要一定的能力,才能建设出好的(强壮、易维护、易扩展)网站。对待知识,我认为:第一:要广,只要和自己的职业定位相关的,都要有一定的了解。第二:要深,对自己凭着吃饭的技能一定要深入。掌握一些别人没有掌握的知识和能力,才能更好地体现自己的价值。</p>
<p>顺便推荐一篇文章(仅供参考):<a title="WEB2.0的单手定则" href="http://www.twinsenliang.net/web/20080101.htm" target="_blank">《WEB2.0的单手定则》</a></p>
相关资料:
<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>
相关推荐
标题中的“淘宝的UED招聘试题”指的是淘宝用户体验设计团队(User Experience Design,简称UED)的招聘过程可能会涉及到的技术考核题目。UED团队主要负责网站或应用的用户界面设计、交互设计以及用户体验优化,因此...
【标题】"仿淘宝UED的WordPress主题"是一个专门为设计公司、个人相册和摄影网站定制的主题,它借鉴了淘宝用户体验设计团队(UED)的设计理念,旨在提供一个既美观又功能丰富的网站展示平台。 【描述】中提到的关键...
淘宝UED设计流程图
前端开发 可以学习 淘宝的前端页面是如何开发的
### 淘宝UED培训-前端调试工具概览 #### 一、引言 随着互联网技术的迅速发展,Web前端开发已成为IT行业中不可或缺的一部分。淘宝UED(User Experience Design)培训中提到的“前端调试工具”课程,对于提高前端开发...
淘宝前端UED资料-淘宝响应式WebUI设计实践.pdf 淘宝UED团队打造高质量开发PPT
### 淘宝UED前端技术系列课程之淘宝前端技术巡礼 #### 一、课程背景与目标 在淘宝北京研发中心的精心筹备下,“淘宝前端技术巡礼”作为一系列旨在培养和提升前端工程师技能的课程之一,面向新入职的员工及前端技术...
总的来说,通过深入学习和实践这个基于jQuery的模拟淘宝ued导航特效源码,不仅能够提升jQuery技能,还能增强对前端开发中交互设计和用户体验的理解。同时,阅读“使用须知.txt”可以帮助我们更好地理解和应用这个...
本项目名为“懒人原生jQuery模拟淘宝ued官网左侧动画导航”,旨在通过jQuery实现类似淘宝用户体验设计(UED)官网左侧的动态导航菜单。这个项目适合初学者学习和理解jQuery在实际项目中的应用。 首先,我们来深入...
根据提供的文件信息,我们可以深入探讨其中涉及的关键知识点,主要包括编码的基础知识、ASCII编码、国际化问题、Unicode以及HTTP中的编码方式等内容。 ### 编码之初 #### 摩尔斯码 摩尔斯码是一种早期的编码方式,...
在本项目中,我们主要探讨的是如何利用jQuery和CSS3技术来实现一个仿淘宝UED博客的导航效果。这个效果通常包括动态的菜单滑动、下拉列表展开、过渡动画等,旨在提升用户界面的交互性和视觉吸引力。接下来,我们将...
### 淘宝前端UED资料 JavaScript #### 概述 本文档主要针对具有一定JavaScript基础知识的读者,深入探讨淘宝前端使用的JavaScript技术要点及其在实际应用中的解析与分析。内容覆盖了JavaScript的基础特性、作用域...
UED(User Experience Design,用户体验设计)是互联网产品开发中的关键环节,它专注于创建易于使用、功能强大且视觉吸引力强的用户界面。UED设计插件则是设计师们为了提高工作效率、简化设计流程而开发的一类工具。...
### UCD UED淘宝用户体验报告知识点汇总 #### 第一章 用户体验设计在团队中的作用 - **用户体验设计的特性**: - **低调性**:用户体验设计应当是低调的,这意味着它应该融入背景之中,让用户几乎感觉不到它的...
### 淘宝前端UED资料-潜力无限的编程语言-javascript #### 淘宝UED团队打造高质量开发PPT **关键词**: 淘宝、前端、UED、javascript --- ### JavaScript语言概述 #### 一、JavaScript语言特性 **1.1 高阶函数*...
《腾讯网UED体验设计之旅》是腾讯网UED的十年精华输出,涵盖了丰富的案例、极富冲击力的图片,以及来自腾讯网的一手经验,通过还原一系列真实案例的幕后设计故事,从用户研究、创意剖析、绘制方法、项目管理等实体...
【标题】:“腾讯UED设计的提示插件”是一款由腾讯用户体验设计团队(User Experience Design,简称UED)开发的专门用于增强网站互动性的提示组件。它旨在通过优雅且易用的界面设计,提升用户在网站上的体验,使得...