日期:2014-03-08  浏览次数:21280 次

史上最酷的招聘曾经结束,效果还是不错的。我们发现了很多颇有潜力的人才。他们的一些聘题的解法也开辟了我们的视野,让我们收获良多。感激所有参与招聘及所有关注淘宝UED博客的朋友。

以下是该次招聘前端开发工程师的聘题解答:

小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。

从这段描述可以得到以下对象:

function Dog() {
this.wow = function() {
alert(‘Wow’);
}
this.yelp = function() {
this.wow();
}
}

小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。

请依据描述,按示例的方式用代码来实现(提示关键字: 承继,原型,setInterval)。

题解:

function MadDog() {
    this.yelp = function() {
        var self = this;
        setInterval(function() {
            self.wow();
        }, 500);
    }
}
MadDog.prototype = new Dog();
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

以上是较为规范的一个解法,我们希望通过此题,检查应聘者对JS的言语基础及的面向对象开发的理解程度。其中的难点在于闭包的使用。

使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方描述器中水平和垂直居中。

题解:

<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: 1px solid #eee;
}
.box img {
    vertical-align:middle;
}
</style>
<div class="box">
    <img src="/web/UploadPic/2011-10/201110173751730.jpg" />
</div>

很遗憾,这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。依据我们的计算,高度/字体大小的比值为1.14左右时IE可实现垂直居中。

当然还有很多其他的实现方案,但需求引入额外的标签。对于流量超大的淘宝网而言,我们经过权衡,倾向于在此问题上合理的使用hack。

在不使用 border 款式的情况下,画出一条一px高的横线,在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果。

题解:

<div style="height:1px;overflow:hidden;background:#000"></div>

此题要点是要求在浏览器的 QuirksMode 和 CSSCompat 模式下效果分歧。解法有很多,以上是我们认为的最为合理的一种。

请给Array本地对象添加一个原型方法,它的用途是删除数组条目中反复的条目(可能有多个),前往值是一个包含被删除的反复条目的新数组。

题解:

Array.prototype.distinct = function() {
 var ret = [];
 for (var i = 0; i < this.length; i++) {
 	for (var j = i+1; j < this.length;) {
 		if (this[i] === this[j]) {
 			ret.push(this.splice(j, 1)[0]);
 		} else {
 			j++;
 		}
 	}
 }
 return ret;
}
//for test
alert(["a","b","c","d","b","a","e"].distinct());

这是最为普通的解法。在数组元素数量不高的情况下,它的功用是可以接受的。

置信一定有不少朋友有更好的解法,请通知我们。