2007淘宝UED web前端笔试题

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

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

function Dog() {

    this.wow = function() {

    alert(‘Wow’);

    }

    this.yelp = function() {

    this.wow();

    }

    }

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

请根据描述，按示例的形式用代码来实现（提示关键字: 继承，原型，setInterval）。

题解：

JS的语言基础及的面向对象开发。难点在于闭包的应用。

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();

这样写会不会在IE里面会不会内存溢出。MSDN给了个例子：

function AttachEvents(element)

{

// This structure causes element to ref ClickEventHandler

element.attachEvent(“onclick”, ClickEventHandler);



function ClickEventHandler()

{

// This closure refs element

}

}



function SetupLeak()

{

// The leak happens all at once

AttachEvents(document.getElementById(“LeakedDiv”));

}



function BreakLeak()

{

}

http://msdn.microsoft.com/en-us/library/Bb250448.aspx

 

使用纯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="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />

</div>

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

 

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

 

题解：

 

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

 

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

document 有个属性 compatMode 可以用来判断当前页面采用的何种渲染方式：
BackCompat — Standards-compliant mode is not switched on.
CSS1Compat — Standards-compliant mode is switched on.

官方说明：http://msdn2.microsoft.com/en-us/library/ms533687.aspx

基本对应关系：
CSS1Compat: Standards Mode
BackCompat: Quirks Mode

 

请给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());