biaoge's blog

淘宝2007年有这样一个面试题：

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

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

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

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

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

淘宝UED上给出的答案是：

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

经过我的测试发现：如果把self.wow后面的括号去掉，那么外面那层匿名函数也是可以去掉了，所以setInterval部分可以这么写：

setInterval(self.wow,500);

后来我又尝试了两外一种解法：

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

这种写法看上去要比淘宝上的答案要简单，经测试也是可以达到题目要求的。既然MadDog的yelp方法要变，那就就直接在后面把从Dog继承来的prototype属性覆盖一遍就OK了，不知道这种写法有没有什么不妥，毕竟人家都是高手，而我只是菜鸟一个。

《无懈可击的web设计》这本书讲了许多提高网站灵活性、可维护性和可访问性的一些小技巧，读过之后发现里面讲的许多方法都是以前没有注意到的，所以有必要对其中的一些内容做一个小小的归纳总结，一方面可以加深印象，另一方面也可以作为一个备忘录以便将来查阅。

1.用关键字和百分比来确定文字大小以便使用户也能控制其大小，并且最大化网页的灵活性。

在body上使用font-size:small来设置全局的文字大小，然后在其他地方全部用百分比来控制，这样不仅可以使得IE用户可以通过菜单栏的“查看>文字大小”来控制文字大小，而且以后要对文字大小进行调整的时候只需要调整一条声明就可以让整个网页的文字大小按比例缩放，使得灵活性大大提高。

2.让导航菜单能够适应任意的文字大小和任意多的内容。

对导航菜单既不要定宽也不要定高，对于菜单内文字和边缘之间的间隙则用padding来填充，这样就适应了任意的文字大小和任意多的内容，对于滑动门菜单也是如此，我以前在写滑动门的时候习惯把高度定死，这并不是一个好习惯。此处还要注意的是如果背景图是渐变效果则要将背景图适当地加长和加高以适应各种长度和高度的内容。

3.用em来作为line-height的单位，同样的，对于两行文字之间margin值也用em为单位。

用em做单位的好处是当文字大小改变的时候此处的line-height和margin也会相应地改变。

4.对一些水平的区块也不要定高，让其高度自适应。

一些水平区块如头部、登录区、搜索区和一些单行文字的区域也不要定高，一方面是为了适应文字大小的变化，另一方面也使得以后在该区块增加内容后不至于使页面变形，例如单行的文字有可能在以后增加到两行。所以以前通过定高度和行高来处理单行文字的做法要改为不定高度并用padding填充文字上下的空白区域。

5.确保页面在禁用图片和CSS的时候仍然不影响正常阅读。

背景图未加载有可能造成文字和下面的背景颜色太接近而使网页阅读困难，解决方法是在凡是有背景图的地方都写上一个背景颜色。作者把裸奔测试称为“十秒钟可用性测试”，就是禁用CSS之后再看页面结构是否清晰，这就要求做好HTML的语义化。一些方便做此类测试的小工具：

• FAVELETS 实际上就是一些JavaScript代码写成的书签
• Web Developer Toolbar For Firefox
• Web Accessibility Toolbar For IE

6.用border-collapse:collapse;实际上可以替代talble上的属性cellspacing=0，唯有IE/MAC不支持border-collapse，但是IE/MAC现在可以忽略掉了吧。

7.在使用百分比宽度的流体布局中为栏间设定固定像素间距的方法是在每栏的里面加入一个div并在这个里层的div上加上padding。

8.即便是对使用百分比宽度的流体布局也可以使用背景图垂直重复的方法来造成貌似两栏等高的假象，方法是将背景图的水平位置也用百分比来设置。

IE浏览器在打开本地文件的时候，如果文件内有JavaScript或者flash等活动内容，就会弹出一个安全警告：“为了有利于保护安全性，Internet Explorer已限制此网页运行可以访问计算机的脚本或ActiveX控件。请单击这里获取选项…”。对于普通用户来说这不会有太大的影响，但是对与一个经常需要调试JavaScript的网页开发者来说这个东西就相当令人烦恼了。不过幸好我在这里找到了解决办法。一位网友提出了三种解决方案：

方案一：用firefox作为你的默认浏览器。

方案二：让IE允许运行本地脚本文件：

• 在IE的工具菜单选择Internet选项；
• 在Internet选项窗口中选择高级选项卡；
• 在安全部分勾选“允许活动内容在我的计算机上的文件中运行”。

设置完毕之后重启IE就不再会出现烦人的安全警告了。

方案三（不推荐）：

在你的页面文件中加入如下代码：

<!-- saved from url=(0014)about:internet -->

或者

<!-- saved from url=(0016)www.yoursite.com -->

注意：括号中的数字是后面网址的长度，你可以把这段代码加入HTML文件的head区域。

问题是加入了这段代码的文件无法链接到不含这段代码的页面，所以只有在你确定没有外部链接时才推荐方案三。

很显然对一个开发人员来说，方案一是不可取的，因为即使默认用firefox，也不可避免要在IE中调试，方案三也不好，方案二则比较完美。