FENIX BLOG

感激

Fenix — Mon, 07 May 2012 16:45:40 +0000

本来打算车展完了之后，对期间工作中遇到的问题做个总结，不料随后又紧跟着是车友论坛和网上4S店的开发工作。我对自己说，既然不能喘口气，那就忙死吧！

还记得去年九月份去南京见了晓波，他问我们公司的产品开发流程如何，我一时不知道该怎么回答。时间已经过去了半年多，真正体验之后，觉得只能用“小作坊”三个字来形容。前端人员没有开发机，没有合理的前后端联调模式，只能C+U拷贝网页源码并下载相应的js和css文件，然后本地做好之后，又通过邮件发给专门负责发布的同学。最痛苦的是，发布到测试环境之后，假如运营人员要求改变某处字体颜色，手握测试机权限的发布同学又不懂css，我们前端人员只能把相应的页面C+S到本地，调好css之后又通过邮件发给他们让他们发布，如此反复，不是小作坊是什么！

现在我深刻体会到“一张白纸的人更容易塑造”是怎么一回事，我也在竭力说服自己适应目前的单兵作战模式，其它的我无法改变。尽管我时常把当前的产品开发模式和在淘宝时的做比较，静下来时我又在想，门户作为资讯载体，与淘宝产品线的技术驱动和业务驱动有着根本区别，对技术的重视程度也就没有了可比性。

释然之后，只能安慰自己说，事在人为，进步了就好，只要有进步，就应该感激自己的团队，感激帮助过自己的每一个人。

抱怨，被同化，逃离

Fenix — Mon, 30 Apr 2012 18:22:57 +0000

晚上看了一同行的博客，终于鼓起勇气写下面的文字。

距上次更新已经整整五个月，本应该有所改变，但还是落魄如初。二月份升级过空间，域名也续了费，之后还是没更新，就好比从亚马逊买的《不能承受的生命之轻》和《晚安，北京》已经几个月了还没拆封一样。

有时候真想活的简单，像机器一样不断重复着来自人类的指令。世事看的越透彻越懊恼，装疯卖傻也应是一种境界，自命不凡带给自己的只有更多的痛苦。这大半年以来，我就像正弦波一样，不断地爬到波峰再跌落波谷，直至振幅缩减为零变为一潭死水，而我就像这潭死水里还在竭力蹦嗒的一条咸鱼，等待甘露降临时翻身的那一刻。我害怕被同化，来到这个世上，就应该弄出点动静再回去。

思维太活跃不一定就是好事，以至于我经常恐惧工作之余的那段空闲。一个月前买了Kindle，一连看完了《浪潮之巅》和《达芬奇密码》，《王小波全集》也被列入计划。能够安静地沉浸在文字里是一件幸福的事，也许只有这样，大脑才能不胡思乱想。后悔学生时代没看太多的书，只记得大学的借书记录里，90%是技术方面的书籍。当一个人摄取的信息一大半来自网络的时候，他就会变得无比烦躁，本来工作就整天对着电脑，下班之后还要继续从电脑里摄取辐射和人生阅历，很难会有营养。

偏执的我，总会以一个人是否读书，读什么样的书，喜欢听什么类型的歌，来判断他的性格和阅历，也越来越觉得“耐得寂寞拥得繁华，要么读书要么旅行，身体和灵魂总要有一个在路上”这句不知是谁说的名言特有道理。不确定能否成行的川藏线之旅，我就只能让灵魂先行，在书中打发寂寥，顺便寻找宠辱不惊的那般气魄。

隐忍没有什么不好，任何事情迟早都会有一个出口。下个月打算给自己放个小长假，回家看看再去趟西安，但愿也能凑巧参加哥们的婚礼。

不知道乱七八糟写了些什么，只希望下次更新不要等到五个月后吧。

也谈iframe高度自适应

Fenix — Fri, 02 Dec 2011 10:55:52 +0000

先描述下我在最近项目中遇到这个问题的场景。

我们的项目是对某款产品的评测，网页下半部分是用户关于这个产品的微博讨论，评论等等，后台开发同事决定将这部分内容全部放在一个iframe里，通过传入不同的产品ID参数就可以在整个项目中共用这部分代码，但这个内嵌框架里的内容全部是动态加载，并且高度不能确定，这就引出了下边要说的iframe高度自适应问题。

主页面iframe代码：

iframe内部代码：

JS控制iframe高度自适应方法：
方法一：JQuery选择器。仅在主页面中使用下列代码，这也是代码量最小的一种方法。

    document.domain="sina.com.cn";
    jQuery("#ifr_cmnt").load(function(){
        var set_height = jQuery(this).contents().find("#wrap").height();
        jQuery(this).height(set_height);
    });

方法二：hash传值。
主页面代码：

        document.domain="sina.com.cn";
        jQuery("#ifr_cmnt").load(function(){
            var temp_height = window.frames['ifr_cmnt'].location.hash;
            var set_height = parseInt(temp_height.slice(temp_height.lastIndexOf("#")+1));
            jQuery(this).height(set_height);
        });

内嵌页面代码：

        var ifr_height = jQuery("#wrap").height();
        document.location.href+=("#"+ifr_height);

方法三：传统JavaScript。
主页面代码：

        document.domain = "sina.com.cn";
        jQuery("#ifr_cmnt").load(function(){
            var set_height = document.getElementById("ifr_cmnt").contentWindow.document.body.scrollHeight;
            document.getElementById("ifr_cmnt").height = set_height;
        });

内嵌页面代码：

        var ifr_height = jQuery("#wrap").height();
        parent.document.getElementById("ifr_cmnt").height = ifr_height;

整个过程需要注意几个细节：

a、当页面中包含来自其他子域的框架或内嵌框架时，通过设置document.domain来实现页面间的JavaScript通信。

b、因为浏览器在渲染页面时存在一些差异，比如内嵌页面中有异步加载的数据块，在IE中，首次渲染不会考虑异步加载内容是否成功，导致数据加载完成后iframe区域由于内容高度增加出现滚动条，在Firefox和Chrome等现代浏览器中不会出现这个问题。

十月份微博整理

Fenix — Tue, 08 Nov 2011 16:23:13 +0000

今天刚好入职三个月，成长缓慢，甚为心慌。任何时候我都先在自身找问题，但不是任何时候都是因为我不争气！前路漫漫，只求自己能排除一切外界因素，练好内功，然后才有资本做自己想做的任何事情。故写下这段话来勉励自己！

自从用上安卓，有了Gmail的实时推送，就完全抛弃了QQmail，用户体验做的再好我都不会用了，尤其是看到一些互联网业内人士在网上给别人留@qq.com的邮箱，我就全身的鸡皮疙瘩//对不起，我装逼了。无意冒犯用QQmail的同学，只是个人习惯

这应该只是屏蔽了产品评价信息？记得之前就有人讨论过为何京东的商品价格要用图片而不是文字，其实就是为了防止竞争对手的爬虫抓取自己的商品价格，难道现在一淘获取京东的商品价格用的是OCR技术？

比价对顾客是好事，但对商家更容易促发价格战，尤其是在一些质量不是很重要或者小商品上，顾客一般只认准价格低的那家，这势必影响销售额//@小猪嫣儿: 我不明白的是，现在是在争夺入口么？那么京东、当当最终希望的是不是用户转化为成交用户呢？销售额是不是更重要呢？比价的话，又会影响多少转化呢？

@快盘尝试了下用快盘同步QQ消息记录，发现一个问题，那就是QQ消息数据库文件Msg2.0.db大概200M左右，并且只要聊天产生记录都向这个文件里累加，快盘检测到文件一有变化就自动上传，这样势必会占用带宽，强烈建议快盘增加指定时间段定时同步功能

Dropbox被GFW认证，无奈只得选用其中国版的金山快盘，安卓最新版增加了相片和文档的自动备份功能，未来也许能将联系人和短信等备份到云端。如果其功能不断完善同时使其在各终端上的服务更加稳定，所谓的云手机也就不存在了，因为任何一款可以使用该服务的手机都可以称之为云手机。

人这一辈子在不同的场合不知道要拍多少张合影，但又能相识多少，意义何在？

还是老一辈的传统想法，文化在于民间，不应该规定要发扬什么要摒弃什么，但话又说回来，在无宗教无信仰无主旋律的今天，少了约束会威胁到政权，也许政府就是这么想的。转 @枕霞mm 昨天外公跟我聊起了传统文化和文化传统说是要发扬前者摒弃后者是否略有偏激？求讨论……

看到这样的图片很是心寒，本来命运就不公，再加上后天的各种潜规则，以穷养富的社会保障制度，言论的封锁和奴化的教育，我们只能寄望于民智渐开社会缓慢的进步，然后这样的镜头越来越少。转: @于建嵘要想办法为这些孩子准备冬衣了啊！//@天佑中华A:社会主义的花朵盛开在大凉山深处

今晚有两件大事值得纪念一下，一是老卡挂了，二是微博出搜索（s.weibo.com）了，但看了下weiso.com，好像被狗爸爸的一个马甲公司注册了，曹老板赶紧把这域名收了吧！

每当看到一些愤愤们大谈国事就怒火中烧，说什么国无愤青必亡，不是没有道理。但在当下，这个肮脏的社会暴露出来的问题已经够多了，如果再加之青年一代都这样丧失理性看到问题就喷来喷去，失去冷静思考的空间，一个连老人跌倒都不敢扶起的民族，谈何崛起？中国需要新式五四运动！！！

任何与我价值观相左的人，我都会嗤之以鼻，我非常不屑或者不忍心与之争辩，尤其是我的家人和朋友，因为在视野局限的人眼中，生活才会一直美好！

#反淘宝联盟#中小卖家认为淘宝卸磨杀驴，错就错在商城当初定位不明确，总有要第一个吃螃蟹的人，再看前两天上线的QQ网购平台一开始定位就高端。而如今淘宝商城以提升质量的理由来提高门槛，为何不采取循序渐进的手段逐步过滤掉一些商家，或者严格执行平台现有的评价体系，而是提高费用，马云穷疯了？

假如你是一个Web开发者，你通过一个API 找到你附近哪些地方会有犯罪。然后你访问Google 地图API，把这两个内容整合在一起，那么你就得到了一个标有犯罪纪录的地图。这个新的地图就叫Mashup。因为开发者通过来自多个网站的APIs，把他们合并在一起，成为了一个新的很cool的应用程序。#Mashup#

马云怕个毛，他老人家要在国外待一年！阿里要多捞点为收购雅虎补充点能量，俺也觉得大卖家是无辜的，伤了中小卖家的筋骨他们就要拼命地闹，法律治的了不？砖家赶紧去屎！无良媒体越抹越黑。总之，阿里提高商城入驻门槛是应该的，对电规范行业秩序和消费者都有好处。BTW，腾讯拍拍可以暗度陈仓一把了！

新浪整体的强媒体性质，决定了其之前的博客到现在的微博，并不是一个与外界平等交流，而是强制输出价值观的平台，其中的价值观很大一部分是由运营干预产生的，理想状态下的产品生态，应该引导用户和前瞻挖掘用户需求，按目前来看，这种强制输出价值观的博客和微博都取得了成功，但是，能一直成功下去？

去掉了微博上所有与身份有关的标识，这样就可以肆无忌惮的说想说的话了，以前新浪封过我一个账号，期待这个账号再次被封！我在饭否腾讯网易twitter都还有账号，这边以后就闹着玩的。最关键的是不喜欢强SNS性质的社区产品，over！

盲人农民#陈光诚#，1971年生于山东省沂南县双堠镇东师古村。一岁时双目失明，18周岁前未上学。1989年开始就读于临沂盲校；2000年毕业于南京中医药大学，同时自学法律。1996 年开始走上依法维护民权之路。

一睁眼就看到微博满屏都是乔布斯逝世的消息，是他让苹果产品风靡全球，科技伟人选在4S发布之后辞世，无不令人哀叹。印象中也许只有杰克逊的谢世能让全球的追随者为之痛惜，走好！

“青年是祖国的未来。鉴于中国官员许多都是团委、学生干部出身，这项改革便具有了更为重要的社会意义。因为，这些面目丑恶的团委、学生会干部，未来可能就是我们的领导人。”

第一次用返利网购物，返利之后差不多是64折了。这不就是当年的淘宝客么，引导顾客去购物，然后获得佣金。返利网与淘宝客有两大不同，一是全面撒网不再局限与淘宝，再者将获取的佣金和顾客分成也就是所谓的返利，盈利模式很清晰，顾客和商家都很乐意，正所谓的一箭三雕，怪不得获得风投了，强

惩罚

Fenix — Mon, 31 Oct 2011 17:59:14 +0000

现在的时间是2011年10月31日23点59分，意味着这篇文章发表上去就11月了。

上个周末回武汉参加张老师的婚礼。还记得去年暑假在学校的时候，他让我们一起帮他布置求婚现场，很可惜当时我和楚客要去校外上PHP培训课，没能见到那个场面。当时的他还是一个小伙子，而如今结婚多了一份责任，有了责任也就能称得上是真正的男人。而当时的我们，虽然已经知道毕业将至，也有针对性地学习一些生存技能，但对未来同样是充满期待和忐忑，更多的是一无所知。转眼间，已经离毕业证上的六月三十日已经过去了四个月，离初次来京也七个月了。

这段时间所经历的，大多都充满着挑战，对于不甘寂寞勇于折腾的我很合胃口。我也常对自己说，趁着年轻就要折腾，我不想也不会在一个波澜不惊的环境下一直无为惨淡下去。在学生时代，自己的生活还不能完全说是属于自己，因为其中还掺杂着父母亲朋的血汗和期待，而一旦毕业，自己选择的路，就完全是自负盈亏，要时刻准备着为自己做出的每一个决定买单。经济独立，随之而来的应该是生活和思想的独立。

过去的四年，读了湖工，在湖北本省基本被人知晓，而在外地基本无人知晓的这么一所大学。之前在淘宝实习的时候，周围的同事基本都毕业或者在读于京城名校，以至于他们问我是哪所大学毕业的时候，我总是小心翼翼地说，我在武汉的湖北工业大学读的书，总是下意识地强调武汉二字，生怕别人不知道我来自哪个城市。我很庆幸能和名校毕业生一起共事，我的性格也决定着我不会坐视平庸，我跟自己较劲，只要给了我们同样的平台，我就要比别人做出同样或者更好的成绩。当时在淘宝的同事张翼飞（花名羽昊），大家都叫他昊哥，同时也是我在公司唯一的烟友。还记得进公司的第一天，我在邮件列表里发了自我介绍之后，昊哥就跟帖回复问你抽烟吗，你蹲在马桶上抽烟吗，我回复的是偶尔抽（已经过去半年多时间记不大清楚了），然后心里想的是这哥们肯定是没人和他一起抽烟，接着就想，大家如果不刻意回避一些私人话题，这就应该是一个开放的团队。后来我们就成了烟友，每天都会在工作间隙，找时间到楼下抽根烟聊聊天，正是这样，他也是第一个知道我要离职去新浪的人。尽管在淘宝只工作了不到两个月，但留给我的财富，也许会影响到我往后的职业生涯，淘宝的企业文化，团队氛围和技术氛围，我至今都非常怀念，只因我现在的工作的确不大顺心。和朋友聊天的时候，他说正是因为有了之前在淘宝的经历，才导致对目前的环境有诸多不满，的确是这样，先入为主的观念到底是害死人，还是促使我不断朝着这个方向努力，我想当然是后者。

在新浪，三个月没参加过一次集体会议，而去淘宝的第一天上午，定球带我和北邮大三的一个小姑娘认完部门人之后，就带我们去参加了一个产品讨论会，当时就接触了前端组件化的概念，尽管自己基本没发言，但一想起以后每天都会接触这些自己极其感兴趣的事物，就有点兴奋。在新浪，也没有针对应届生应该有的技术方面的培训（应该我们部门是特例），而在淘宝，内网上有针对入职新人非常丰富的学习资源并且有专门的师兄有针对性地指导，还有每周不下两次的各种分享会，再加上一周一次的前端周会和两周一次的部门工作汇报会议，还有日报和周报等各种督促自己成长的手段，感觉无时无刻不在成长。总之，互联网产品能涉及到的各个环节的资源应有尽有。在新浪，不仅仅这些方面资源匮乏，还有某些人根本没有对新人应该加以引导的胸怀，取而代之的是贬低和嘲讽，我就只能自己加班加点多看书学习，以至于几个月以来，每次晚上下班的时候，回头一看早就空空如也。顿时心生悲凉，我这种自学成材的路何时是尽头。

去淘宝的第一天上午参加的产品讨论会所做的笔记

本来应该想写上周末回武汉时发生的一件大事，不知不觉就写到了工作，为什么会这样，聪明人都懂得。要说的这件大事就是，我用了刚好半年的HD2又丢了，真TM想切腹以谢我之大意。在HD2之前，也就是今年四月中旬的样子，当时和CB和小丁去圆明园瞎逛上厕所就将我的i7500掉进了马桶，在i7500之前的半年，去年十一回家的时候丢了一台诺机6300。一年多点时间，丢了加起来一共价值五六千块钱的手机。现在我罚自己戒烟，罚自己用两个月小灵通，罚自己苦练技术做兼职然后弥补经济上的损失。这样说来，这次丢手机也许对我并不见得就是坏事，我TMD又无耻地自我安慰了。

最后，用羽泉《惩罚》中的几句歌词来结束这篇文章：

这次是我让你伤了心
才会被惩罚断了情
让你找到一个确凿的理由
宣判我俩的死刑

一个人的生活两个人的梦

Fenix — Tue, 18 Oct 2011 18:37:30 +0000

今晚又失眠了，索性给手机装了wp客户端。以后尽可能把琐碎时间都利用起来，少刷刷微博，多锤炼反思，多记录沉淀，关于生活的，关于技术的，关于梦想的，关于一个人的。

这段时间以来，经历了太多，直到现在趋于平淡，甚至对这样的日子有点厌烦。失去紧迫感，失去挑战，就意味着失去成长机遇，失去与他人同台竞技获胜的筹码。消磨了斗志，挥霍了理想，仅存一副酒囊饭袋，何以对得起自己当初夸下的海口，何以为家人创造安逸的生活。

北漂已将近七个月，一切才刚刚开始。当初误打误撞来了北京，没想到真在这里落了脚。母亲在电话里说，工作后不像在学校里那么有负担，肯定发胖了吧，我说确实有点儿。在自然科学领域，整天不运动就会累积脂肪，不胖才怪，心理负担更多影响的是一个人的容颜，是发质，是气息。

步入社会之后，需要考虑的问题比做学生时要多得多，并且要在各种现实的问题之间来回抉择，还不能过分考虑个人问题，要不我会觉得自己是为了不堪生活压力，把人家女孩子当做调味剂，再者也不愿两手空空画大饼给两个人充饥。红尘滚滚，迟早会有属于你的那颗萝卜来找你这个坑，也许是明天，也许三五年。

时常对自己这么说，算是自我排遣，人的情绪需要出口，暂时不谈个人问题，幸好还有事业。无论现在工作怎么样，毕竟才刚上路，只要不虚度时日，好好准备，等着机遇上门便是了。

多年以前梦想上大学，认为那样就能远离父母的约束步入象牙塔，去了之后才觉得并不是这样。上大学之后想着赶快毕业，白花花的票子都在朝我们招手，毕业之后才真正懂得个中辛酸，现实和理想总是在无情地撕扯着你的躯壳和灵魂，要多难受，有多难受。毕业，意味着步入了另一所大学，现在，我正读大一，犹如当年在学校里那般懵懂无知，稍有不同的是知道自己想要什么，并且不容犯错，还有些老是和现实较着劲的梦。

扯归扯，正事不能忘。鄙人所在的互联网行业，人才是第一资源，只要努力使自己成为人才，那就不怕没饭吃。再加上视野和魄力，摇身一变成为大老板也不是没有可能。回首学生时代走过的路，虽甚是坎坷，但终有所获，偏执伴随着我的过去，也许将伴我一生，为自己想要的会付出所有的努力，在现实中生活，逐步缩小现实和理想中的我的差距，这就是我的梦！

微博来临，你准备好了吗？

Fenix — Thu, 09 Jun 2011 22:24:07 +0000

又很久没更新博客了，再这样下去，真感觉对不住空间和域名的那点费用了。

写这篇文章之前，我难产了好长时间，到底是写呢，是用键盘写，用手机写，还是用笔在本子上写。写点什么呢，那就写我最近干了些什么吧，于是，就有了下边的文字。

很长时间没更新博客，罪魁祸首其实是微博。随着国内微博的兴起，几十个字的想法会手到擒来，我们不用再去花费时间去更新几百上千字的博文，主要还是生活工作节奏的加快，平日只有一些时间的边角料可供我们支配。

这段时间，我几乎连时间的边角料也找不到。从三月开始，一直忙于投简历面试，面试通知接过一大箩筐，百度淘宝完美时空等等，最后决定主动出击，就在15号去了上海，面试了51、淘米，还有几家不知名的小公司，最后决定留在徐汇的一家创业公司。就在这时，北京淘宝又对我进行了第二轮电话面试和最终的视频面试，完了之后就要我马上过去。这时，我犹豫了。上海的这家创业公司，主要业务是细分SNS领域，用他们的话说，这个项目的创意生命力无限，技术方面也有之前在淘宝的一个架构师牵头。如果以外包的身份去淘宝，尽管在许多方面和正式员工并无多大区别，但在归属感、权限和待遇方面，都和正式员工相差甚多。后来这些也都得到了一一印证。

经过和Alipay的FIG，南安留学的CB，还有南京的晓波的商量，我觉得应该去感受一下国内大牌C2C公司的工作氛围，最后还是决定了去北京淘宝。在这之间，CB和我对上海那家公司的技术牵头人进行了并无恶意的人肉，最后确认了他以前的确是淘宝的架构师。但为了求稳，我终究没经得住淘宝这个金字招牌的诱惑，就信誓旦旦地开赴北平。

没去北京之前，对这个做为首都的国际化大都市，充满着无限向往。幻想着是不是随便摔一跤就能捡到金元宝，幻想着是不是遍地美妞，幻想着是不是高楼大厦直入云霄。是幻想，就一定会破灭。皇城聚全民之力后，硬件设施还算可以，尤其是花费了几千亿的鸟巢建筑群，更加彰显了大国气派。常住人口2000万加之流动人口共4000多万，也足以说明这是有着14亿人口大国的首都。

—–

未完待续，困了先睡觉！

悟透JavaScript(转)

Fenix — Wed, 23 Feb 2011 05:40:24 +0000

引子

编程世界里只存在两种基本元素，一个是数据，一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。

数据天生就是文静的，总想保持自己固有的本色；而代码却天生活泼，总想改变这个世界。

你看，数据代码间的关系与物质能量间的关系有着惊人的相似。数据也是有惯性的，如果没有代码来施加外力，她总保持自己原来的状态。而代码就象能量，他存在的唯一目的，就是要努力改变数据原来的状态。在代码改变数据的同时，也会因为数据的抗拒而反过来影响或改变代码原有的趋势。甚至在某些情况下，数据可以转变为代码，而代码却又有可能被转变为数据，或许还存在一个类似E=MC2形式的数码转换方程呢。然而，就是在数据和代码间这种即矛盾又统一的运转中，总能体现出计算机世界的规律，这些规律正是我们编写的程序逻辑。

不过，由于不同程序员有着不同的世界观，这些数据和代码看起来也就不尽相同。于是，不同世界观的程序员们运用各自的方法论，推动着编程世界的进化和发展。

众所周知，当今最流行的编程思想莫过于面向对象编程的思想。为什么面向对象的思想能迅速风靡编程世界呢？因为面向对象的思想首次把数据和代码结合成统一体，并以一个简单的对象概念呈现给编程者。这一下子就将原来那些杂乱的算法与子程序，以及纠缠不清的复杂数据结构，划分成清晰而有序的对象结构，从而理清了数据与代码在我们心中那团乱麻般的结。我们又可以有一个更清晰的思维，在另一个思想高度上去探索更加浩瀚的编程世界了。

在五祖弘忍讲授完《对象真经》之后的一天，他对众弟子们说：“经已讲完，想必尔等应该有所感悟，请各自写个偈子来看”。大弟子神秀是被大家公认为悟性最高的师兄，他的偈子写道：“身是对象树，心如类般明。朝朝勤拂拭，莫让惹尘埃！”。此偈一出，立即引起师兄弟们的轰动，大家都说写得太好了。只有火头僧慧能看后，轻轻地叹了口气，又随手在墙上写道：“对象本无根，类型亦无形。本来无一物，何处惹尘埃？”。然后摇了摇头，扬长而去。大家看了慧能的偈子都说：“写的什么乱七八糟的啊，看不懂”。师父弘忍看了神秀的诗偈也点头称赞，再看慧能的诗偈之后默然摇头。就在当天夜里，弘忍却悄悄把慧能叫到自己的禅房，将珍藏多年的软件真经传授于他，然后让他趁着月色连夜逃走…

后来，慧能果然不负师父厚望，在南方开创了禅宗另一个广阔的天空。而慧能当年带走的软件真经中就有一本是《JavaScript真经》！

回归简单

要理解JavaScript，你得首先放下对象和类的概念，回到数据和代码的本原。前面说过，编程世界只有数据和代码两种基本元素，而这两种元素又有着纠缠不清的关系。JavaScript就是把数据和代码都简化到最原始的程度。

JavaScript中的数据很简洁的。简单数据只有 undefined, null, boolean, number和string这五种，而复杂数据只有一种，即object。这就好比中国古典的朴素唯物思想，把世界最基本的元素归为金木水火土，其他复杂的物质都是由这五种基本元素组成。

JavaScript中的代码只体现为一种形式，就是function。

注意：以上单词都是小写的，不要和Number, String, Object, Function等JavaScript内置函数混淆了。要知道，JavaScript语言是区分大小写的呀!

任何一个JavaScript的标识、常量、变量和参数都只是unfined, null, bool, number, string, object 和 function类型中的一种，也就typeof返回值表明的类型。除此之外没有其他类型了。

先说说简单数据类型吧。

undefined: 代表一切未知的事物，啥都没有，无法想象，代码也就更无法去处理了。
注意：typeof(undefined) 返回也是 undefined。
可以将undefined赋值给任何变量或属性，但并不意味了清除了该变量，反而会因此多了一个属性。

null: 有那么一个概念，但没有东西。无中似有，有中还无。虽难以想象，但已经可以用代码来处理了。
注意：typeof(null)返回object，但null并非object，具有null值的变量也并非object。

boolean: 是就是，非就非，没有疑义。对就对，错就错，绝对明确。既能被代码处理，也可以控制代码的流程。

number: 线性的事物，大小和次序分明，多而不乱。便于代码进行批量处理，也控制代码的迭代和循环等。
注意：typeof(NaN)和typeof(Infinity)都返回number 。
NaN参与任何数值计算的结构都是NaN，而且 NaN != NaN 。
Infinity / Infinity = NaN 。

string: 面向人类的理性事物，而不是机器信号。人机信息沟通，代码据此理解人的意图等等，都靠它了。

简单类型都不是对象，JavaScript没有将对象化的能力赋予这些简单类型。直接被赋予简单类型常量值的标识符、变量和参数都不是一个对象。

所谓“对象化”，就是可以将数据和代码组织成复杂结构的能力。JavaScript中只有object类型和function类型提供了对象化的能力。

没有类

object就是对象的类型。在JavaScript中不管多么复杂的数据和代码，都可以组织成object形式的对象。

但JavaScript却没有 “类”的概念！

对于许多面向对象的程序员来说，这恐怕是JavaScript中最难以理解的地方。是啊，几乎任何讲面向对象的书中，第一个要讲的就是“类”的概念，这可是面向对象的支柱。这突然没有了“类”，我们就象一下子没了精神支柱，感到六神无主。看来，要放下对象和类，达到“对象本无根，类型亦无形”的境界确实是件不容易的事情啊。

这样，我们先来看一段JavaScript程序：

var life = {};
    for(life.age = 1; life.age <= 3; life.age++)
    {
        switch(life.age)
        {
            case 1: life.body = "卵细胞";
                    life.say = function(){alert(this.age+this.body)};
                    break;
            case 2: life.tail = "尾巴";
                    life.gill = "腮";
                    life.body = "蝌蚪";
                    life.say = function(){alert(this.age+this.body+"-"+this.tail+","+this.gill)};
                    break;
            case 3: delete life.tail;
                    delete life.gill;
                    life.legs = "四条腿";
                    life.lung = "肺";
                    life.body = "青蛙";
                    life.say = function(){alert(this.age+this.body+"-"+this.legs+","+this.lung)};
                    break;
        };
        life.say();
    };

这段JavaScript程序一开始产生了一个生命对象life，life诞生时只是一个光溜溜的对象，没有任何属性和方法。在第一次生命过程中，它有了一个身体属性body，并有了一个say方法，看起来是一个“卵细胞”。在第二次生命过程中，它又长出了“尾巴”和“腮”，有了tail和gill属性，显然它是一个“蝌蚪”。在第三次生命过程中，它的tail和gill属性消失了，但又长出了“四条腿”和“肺”，有了legs和lung属性，从而最终变成了“青蛙”。如果，你的想像力丰富的话，或许还能让它变成英俊的“王子”，娶个美丽的“公主”什么的。不过，在看完这段程序之后，请你思考一个问题：

我们一定需要类吗？

还记得儿时那个“小蝌蚪找妈妈”的童话吗？也许就在昨天晚，你的孩子刚好是在这个美丽的童话中进入梦乡的吧。可爱的小蝌蚪也就是在其自身类型不断演化过程中，逐渐变成了和妈妈一样的“类”，从而找到了自己的妈妈。这个童话故事中蕴含的编程哲理就是：对象的“类”是从无到有，又不断演化，最终又消失于无形之中的…

“类”，的确可以帮助我们理解复杂的现实世界，这纷乱的现实世界也的确需要进行分类。但如果我们的思想被“类”束缚住了，“类”也就变成了“累”。想象一下，如果一个生命对象开始的时就被规定了固定的“类”，那么它还能演化吗？蝌蚪还能变成青蛙吗？还可以给孩子们讲小蝌蚪找妈妈的故事吗？

所以，JavaScript中没有“类”，类已化于无形，与对象融为一体。正是由于放下了“类”这个概念，JavaScript的对象才有了其他编程语言所没有的活力。

如果，此时你的内心深处开始有所感悟，那么你已经逐渐开始理解JavaScript的禅机了。

函数的魔力

接下来，我们再讨论一下JavaScript函数的魔力吧。

JavaScript的代码就只有function一种形式，function就是函数的类型。也许其他编程语言还有procedure或 method等代码概念，但在JavaScript里只有function一种形式。当我们写下一个函数的时候，只不过是建立了一个function类型的实体而已。请看下面的程序：

 function myfunc()
    {
        alert("hello");
    };

    alert(typeof(myfunc));

这个代码运行之后可以看到typeof(myfunc)返回的是function。以上的函数写法我们称之为“定义式”的，如果我们将其改写成下面的“变量式”的，就更容易理解了：

var myfunc = function ()
        {
            alert("hello");
        };

    alert(typeof(myfunc));

这里明确定义了一个变量myfunc，它的初始值被赋予了一个function的实体。因此，typeof(myfunc)返回的也是function。其实，这两种函数的写法是等价的，除了一点细微差别，其内部实现完全相同。也就是说，我们写的这些JavaScript函数只是一个命了名的变量而已，其变量类型即为function，变量的值就是我们编写的函数代码体。

聪明的你或许立即会进一步的追问：既然函数只是变量，那么变量就可以被随意赋值并用到任意地方啰？

我们来看看下面的代码：

 var myfunc = function ()
        {
            alert("hello");
        };
    myfunc(); //第一次调用myfunc，输出hello

    myfunc = function ()
        {
            alert("yeah");
        };
    myfunc(); //第二次调用myfunc，将输出yeah

这个程序运行的结果告诉我们：答案是肯定的！在第一次调用函数之后，函数变量又被赋予了新的函数代码体，使得第二次调用该函数时，出现了不同的输出。

好了，我们又来把上面的代码改成第一种定义式的函数形式：

function myfunc ()
    {
        alert("hello");
    };
    myfunc(); //这里调用myfunc，输出yeah而不是hello

    function myfunc ()
    {
        alert("yeah");
    };
    myfunc(); //这里调用myfunc，当然输出yeah

按理说，两个签名完全相同的函数，在其他编程语言中应该是非法的。但在JavaScript中，这没错。不过，程序运行之后却发现一个奇怪的现象：两次调用都只是最后那个函数里输出的值！显然第一个函数没有起到任何作用。这又是为什么呢？

原来，JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且，在同一段程序的分析执行中，定义式的函数语句会被提取出来优先执行。函数定义执行完之后，才会按顺序执行其他语句代码。也就是说，在第一次调用myfunc之前，第一个函数语句定义的代码逻辑，已被第二个函数定义语句覆盖了。所以，两次都调用都是执行最后一个函数逻辑了。

如果把这个JavaScript代码分成两段，例如将它们写在一个html中，并用

这时，输出才是各自按顺序来的，也证明了JavaScript的确是一段段地执行的。

一段代码中的定义式函数语句会优先执行，这似乎有点象静态语言的编译概念。所以，这一特征也被有些人称为：JavaScript的“预编译”。

大多数情况下，我们也没有必要去纠缠这些细节问题。只要你记住一点：JavaScript里的代码也是一种数据，同样可以被任意赋值和修改的，而它的值就是代码的逻辑。只是，与一般数据不同的是，函数是可以被调用执行的。

不过，如果JavaScript函数仅仅只有这点道行的话，这与C++的函数指针，DELPHI的方法指针，C#的委托相比，又有啥稀奇嘛！然而，JavaScript函数的神奇之处还体现在另外两个方面：一是函数function类型本身也具有对象化的能力，二是函数function与对象 object超然的结合能力。

奇妙的对象

先来说说函数的对象化能力。

任何一个函数都可以为其动态地添加或去除属性，这些属性可以是简单类型，可以是对象，也可以是其他函数。也就是说，函数具有对象的全部特征，你完全可以把函数当对象来用。其实，函数就是对象，只不过比一般的对象多了一个括号“()”操作符，这个操作符用来执行函数的逻辑。即，函数本身还可以被调用，一般对象却不可以被调用，除此之外完全相同。请看下面的代码：

function Sing()
    {
        with(arguments.callee)
          alert(author + "：" + poem);
    };
    Sing.author = "李白";
    Sing.poem = "汉家秦地月，流影照明妃。一上玉关道，天涯去不归";
    Sing();
    Sing.author = "李战";
    Sing.poem = "日出汉家天，月落阴山前。女儿琵琶怨，已唱三千年";
    Sing();

在这段代码中，Sing函数被定义后，又给Sing函数动态地增加了author和poem属性。将author和poem属性设为不同的作者和诗句，在调用Sing()时就能显示出不同的结果。这个示例用一种诗情画意的方式，让我们理解了JavaScript函数就是对象的本质，也感受到了JavaScript语言的优美。

好了，以上的讲述，我们应该算理解了function类型的东西都是和object类型一样的东西，这种东西被我们称为“对象”。我们的确可以这样去看待这些“对象”，因为它们既有“属性”也有“方法”嘛。但下面的代码又会让我们产生新的疑惑：

 var anObject = {};  //一个对象
    anObject.aProperty = "Property of object";  //对象的一个属性
    anObject.aMethod = function(){alert("Method of object")}; //对象的一个方法
    //主要看下面：
    alert(anObject["aProperty"]);   //可以将对象当数组以属性名作为下标来访问属性
    anObject["aMethod"]();          //可以将对象当数组以方法名作为下标来调用方法
    for( var s in anObject)           //遍历对象的所有属性和方法进行迭代化处理
        alert(s + " is a " + typeof(anObject[s]));

同样对于function类型的对象也是一样：

var aFunction = function() {};  //一个函数
    aFunction.aProperty = "Property of function";  //函数的一个属性
    aFunction.aMethod = function(){alert("Method of function")}; //函数的一个方法
    //主要看下面：
    alert(aFunction["aProperty"]);   //可以将函数当数组以属性名作为下标来访问属性
    aFunction["aMethod"]();          //可以将函数当数组以方法名作为下标来调用方法
    for( var s in aFunction)           //遍历函数的所有属性和方法进行迭代化处理
        alert(s + " is a " + typeof(aFunction[s]));

是的，对象和函数可以象数组一样，用属性名或方法名作为下标来访问并处理。那么，它到底应该算是数组呢，还是算对象？

我们知道，数组应该算是线性数据结构，线性数据结构一般有一定的规律，适合进行统一的批量迭代操作等，有点像波。而对象是离散数据结构，适合描述分散的和个性化的东西，有点像粒子。因此，我们也可以这样问：JavaScript里的对象到底是波还是粒子？

如果存在对象量子论，那么答案一定是：波粒二象性！

因此，JavaScript里的函数和对象既有对象的特征也有数组的特征。这里的数组被称为“字典”，一种可以任意伸缩的名称值对儿的集合。其实， object和function的内部实现就是一个字典结构，但这种字典结构却通过严谨而精巧的语法表现出了丰富的外观。正如量子力学在一些地方用粒子来解释和处理问题，而在另一些地方却用波来解释和处理问题。你也可以在需要的时候，自由选择用对象还是数组来解释和处理问题。只要善于把握JavaScript的这些奇妙特性，就可以编写出很多简洁而强大的代码来。

放下对象

我们再来看看function与object的超然结合吧。

在面向对象的编程世界里，数据与代码的有机结合就构成了对象的概念。自从有了对象，编程世界就被划分成两部分，一个是对象内的世界，一个是对象外的世界。对象天生具有自私的一面，外面的世界未经允许是不可访问对象内部的。对象也有大方的一面，它对外提供属性和方法，也为他人服务。不过，在这里我们要谈到一个有趣的问题，就是“对象的自我意识”。

什么？没听错吧？对象有自我意识？

可能对许多程序员来说，这的确是第一次听说。不过，请君看看C++、C#和Java的this，DELPHI的self，还有VB的me，或许你会恍然大悟！当然，也可能只是说句“不过如此”而已。

然而，就在对象将世界划分为内外两部分的同时，对象的“自我”也就随之产生。“自我意识”是生命的最基本特征！正是由于对象这种强大的生命力，才使得编程世界充满无限的生机和活力。

但对象的“自我意识”在带给我们快乐的同时也带来了痛苦和烦恼。我们给对象赋予了太多欲望，总希望它们能做更多的事情。然而，对象的自私使得它们互相争抢系统资源，对象的自负让对象变得复杂和臃肿，对象的自欺也往往带来挥之不去的错误和异常。我们为什么会有这么多的痛苦和烦恼呢？

为此，有一个人，在对象树下，整整想了九九八十一天，终于悟出了生命的痛苦来自于欲望，但究其欲望的根源是来自于自我意识。于是他放下了“自我”，在对象树下成了佛，从此他开始普度众生，传播真经。他的名字就叫释迦摩尼，而《JavaScript真经》正是他所传经书中的一本。

JavaScript中也有this，但这个this却与C++、C#或Java等语言的this不同。一般编程语言的this就是对象自己，而 JavaScript的this却并不一定！this可能是我，也可能是你，可能是他，反正是我中有你，你中有我，这就不能用原来的那个“自我”来理解 JavaScript这个this的含义了。为此，我们必须首先放下原来对象的那个“自我”。

我们来看下面的代码：

function WhoAmI()       //定义一个函数WhoAmI
    {
        alert("I'm " + this.name + " of " + typeof(this));
    };

    WhoAmI();   //此时是this当前这段代码的全局对象，在浏览器中就是window对象，其name属性为空字符串。输出：I'm of object

    var BillGates = {name: "Bill Gates"};
    BillGates.WhoAmI = WhoAmI;  //将函数WhoAmI作为BillGates的方法。
    BillGates.WhoAmI();         //此时的this是BillGates。输出：I'm Bill Gates of object

    var SteveJobs = {name: "Steve Jobs"};
    SteveJobs.WhoAmI = WhoAmI;  //将函数WhoAmI作为SteveJobs的方法。
    SteveJobs.WhoAmI();         //此时的this是SteveJobs。输出：I'm Steve Jobs of object

    WhoAmI.call(BillGates);     //直接将BillGates作为this，调用WhoAmI。输出：I'm Bill Gates of object
    WhoAmI.call(SteveJobs);     //直接将SteveJobs作为this，调用WhoAmI。输出：I'm Steve Jobs of object

    BillGates.WhoAmI.call(SteveJobs);   //将SteveJobs作为this，却调用BillGates的WhoAmI方法。输出：I'm Steve Jobs of object
    SteveJobs.WhoAmI.call(BillGates);   //将BillGates作为this，却调用SteveJobs的WhoAmI方法。输出：I'm Bill Gates of object

    WhoAmI.WhoAmI = WhoAmI;     //将WhoAmI函数设置为自身的方法。
    WhoAmI.name = "WhoAmI";
    WhoAmI.WhoAmI();            //此时的this是WhoAmI函数自己。输出：I'm WhoAmI of function

    ({name: "nobody", WhoAmI: WhoAmI}).WhoAmI();    //临时创建一个匿名对象并设置属性后调用WhoAmI方法。输出：I'm nobody of object

从上面的代码可以看出，同一个函数可以从不同的角度来调用，this并不一定是函数本身所属的对象。this只是在任意对象和function元素结合时的一个概念，是种结合比起一般对象语言的默认结合更加灵活，显得更加超然和洒脱。

在JavaScript函数中，你只能把this看成当前要服务的“这个”对象。this是一个特殊的内置参数，根据this参数，您可以访问到“这个”对象的属性和方法，但却不能给this参数赋值。在一般对象语言中，方法体代码中的this可以省略的，成员默认都首先是“自己”的。但JavaScript却不同，由于不存在“自我”，当访问“这个”对象时，this不可省略！

JavaScript提供了传递this参数的多种形式和手段，其中，象BillGates.WhoAmI()和SteveJobs.WhoAmI()这种形式，是传递this参数最正规的形式，此时的this就是函数所属的对象本身。而大多数情况下，我们也几乎很少去采用那些借花仙佛的调用形式。但只我们要明白JavaScript的这个“自我”与其他编程语言的“自我”是不同的，这是一个放下了的“自我”，这就是JavaScript特有的世界观。

对象素描

已经说了许多了许多话题了，但有一个很基本的问题我们忘了讨论，那就是：怎样建立对象？

在前面的示例中，我们已经涉及到了对象的建立了。我们使用了一种被称为JavaScript Object Notation(缩写JSON)的形式，翻译为中文就是“JavaScript对象表示法”。

JSON为创建对象提供了非常简单的方法。例如，
创建一个没有任何属性的对象：

var o = {};

创建一个对象并设置属性及初始值：

var person = {name: "Angel", age: 18, married: false};

创建一个对象并设置属性和方法：

var speaker = {text: "Hello World", say: function(){alert(this.text)}};

创建一个更复杂的对象，嵌套其他对象和对象数组等：

var company =
    {
        name: "Microsoft",
        product: "softwares",
        chairman: {name: "Bill Gates", age: 53, Married: true},
        employees: [{name: "Angel", age: 26, Married: false}, {name: "Hanson", age: 32, Marred: true}],
        readme: function() {document.write(this.name + " product " + this.product);}
    };

JSON的形式就是用大括“{}”号包括起来的项目列表，每一个项目间并用逗号“,”分隔，而项目就是用冒号“:”分隔的属性名和属性值。这是典型的字典表示形式，也再次表明了 JavaScript里的对象就是字典结构。不管多么复杂的对象，都可以被一句JSON代码来创建并赋值。

其实，JSON就是JavaScript对象最好的序列化形式，它比XML更简洁也更省空间。对象可以作为一个JSON形式的字符串，在网络间自由传递和交换信息。而当需要将这个JSON字符串变成一个JavaScript对象时，只需要使用eval函数这个强大的数码转换引擎，就立即能得到一个JavaScript内存对象。正是由于JSON的这种简单朴素的天生丽质，才使得她在AJAX舞台上成为璀璨夺目的明星。

JavaScript就是这样，把面向对象那些看似复杂的东西，用及其简洁的形式表达出来。卸下对象浮华的浓妆，还对象一个眉目清晰！

构造对象

好了，接下我们来讨论一下对象的另一种创建方法。

除JSON外，在JavaScript中我们可以使用new操作符结合一个函数的形式来创建对象。例如：

function MyFunc() {};         //定义一个空函数
    var anObj = new MyFunc();  //使用new操作符，借助MyFun函数，就创建了一个对象

JavaScript的这种创建对象的方式可真有意思，如何去理解这种写法呢？

其实，可以把上面的代码改写成这种等价形式：

function MyFunc(){};
    var anObj = {};     //创建一个对象
    MyFunc.call(anObj); //将anObj对象作为this指针调用MyFunc函数

我们就可以这样理解，JavaScript先用new操作符创建了一个对象，紧接着就将这个对象作为this参数调用了后面的函数。其实，JavaScript内部就是这么做的，而且任何函数都可以被这样调用！但从 “anObj = new MyFunc()” 这种形式，我们又看到一个熟悉的身影，C++和C#不就是这样创建对象的吗？原来，条条大路通灵山，殊途同归啊！

君看到此处也许会想，我们为什么不可以把这个MyFunc当作构造函数呢？恭喜你，答对了！JavaScript也是这么想的！请看下面的代码：

function Person(name)   //带参数的构造函数
     {
         this.name = name;   //将参数值赋给给this对象的属性
         this.SayHello = function() {alert("Hello, I'm " + this.name);};   //给this对象定义一个SayHello方法。
     };

     function Employee(name, salary)     //子构造函数
     {
         Person.call(this, name);        //将this传给父构造函数
         this.salary = salary;       //设置一个this的salary属性
         this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);};  //添加ShowMeTheMoney方法。
     };

     var BillGates = new Person("Bill Gates");   //用Person构造函数创建BillGates对象
     var SteveJobs = new Employee("Steve Jobs", 1234);   //用Empolyee构造函数创建SteveJobs对象

     BillGates.SayHello();   //显示：I'm Bill Gates
     SteveJobs.SayHello();   //显示：I'm Steve Jobs
     SteveJobs.ShowMeTheMoney();   //显示：Steve Jobs $1234

     alert(BillGates.constructor == Person);  //显示：true
     alert(SteveJobs.constructor == Employee);  //显示：true

     alert(BillGates.SayHello == SteveJobs.SayHello); //显示：false

这段代码表明，函数不但可以当作构造函数，而且还可以带参数，还可以为对象添加成员和方法。其中的第9行，Employee构造函数又将自己接收的this作为参数调用Person构造函数，这就是相当于调用基类的构造函数。第21、22行还表明这样一个意思：BillGates是由Person构造的，而SteveJobs是由Employee构造的。对象内置的constructor属性还指明了构造对象所用的具体函数！

其实，如果你愿意把函数当作“类”的话，她就是“类”，因为她本来就有“类”的那些特征。难道不是吗？她生出的儿子各个都有相同的特征，而且构造函数也与类同名嘛！

但要注意的是，用构造函数操作this对象创建出来的每一个对象，不但具有各自的成员数据，而且还具有各自的方法数据。换句话说，方法的代码体(体现函数逻辑的数据)在每一个对象中都存在一个副本。尽管每一个代码副本的逻辑是相同的，但对象们确实是各自保存了一份代码体。上例中的最后一句说明了这一实事，这也解释了JavaScript中的函数就是对象的概念。

同一类的对象各自有一份方法代码显然是一种浪费。在传统的对象语言中，方法函数并不象JavaScript那样是个对象概念。即使也有象函数指针、方法指针或委托那样的变化形式，但其实质也是对同一份代码的引用。一般的对象语言很难遇到这种情况。

不过，JavaScript语言有大的灵活性。我们可以先定义一份唯一的方法函数体，并在构造this对象时使用这唯一的函数对象作为其方法，就能共享方法逻辑。例如：

function SayHello()     //先定义一份SayHello函数代码
    {
        alert("Hello, I'm " + this.name);
    };

    function Person(name)   //带参数的构造函数
    {
        this.name = name;   //将参数值赋给给this对象的属性
        this.SayHello = SayHello;   //给this对象SayHello方法赋值为前面那份SayHello代码。
    };

    var BillGates = new Person("Bill Gates");   //创建BillGates对象
    var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

    alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true

其中，最后一行的输出结果表明两个对象确实共享了一个函数对象。虽然，这段程序达到了共享了一份方法代码的目的，但却不怎么优雅。因为，定义SayHello方法时反映不出其与Person类的关系。“优雅”这个词用来形容代码，也不知道是谁先提出来的。不过，这个词反映了程序员已经从追求代码的正确、高效、可靠和易读等基础上，向着追求代码的美观感觉和艺术境界的层次发展，程序人生又多了些浪漫色彩。

显然，JavaScript早想到了这一问题，她的设计者们为此提供了一个有趣的prototype概念。

初看原型

prototype源自法语，软件界的标准翻译为“原型”，代表事物的初始形态，也含有模型和样板的意义。JavaScript中的prototype概念恰如其分地反映了这个词的内含，我们不能将其理解为C++的prototype那种预先声明的概念。

JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象，因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”，那么由该函数构造出来的对象应该都会具有这个“原型”的特性。事实上，在构造函数的prototype上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。也可以这么说，prototype提供了一群同类对象共享属性和方法的机制。

我们先来看看下面的代码：

function Person(name)
    {
        this.name = name;   //设置对象属性，每个对象各自一份属性数据
    };

    Person.prototype.SayHello = function()  //给Person函数的prototype添加SayHello方法。
    {
        alert("Hello, I'm " + this.name);
    }

    var BillGates = new Person("Bill Gates");   //创建BillGates对象
    var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

    BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法
    SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法

    alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello，所以显示：true

程序运行的结果表明，构造函数的prototype上定义的方法确实可以通过对象直接调用到，而且代码是共享的。显然，把方法设置到prototype的写法显得优雅多了，尽管调用形式没有变，但逻辑上却体现了方法与类的关系，相对前面的写法，更容易理解和组织代码。

那么，对于多层次类型的构造函数情况又如何呢？

我们再来看下面的代码：

function Person(name)   //基类构造函数
     {
         this.name = name;
     };

     Person.prototype.SayHello = function()  //给基类构造函数的prototype添加方法
     {
         alert("Hello, I'm " + this.name);
     };

     function Employee(name, salary) //子类构造函数
     {
         Person.call(this, name);    //调用基类构造函数
         this.salary = salary;
     };

     Employee.prototype = new Person();  //建一个基类的对象作为子类原型的原型，这里很有意思

     Employee.prototype.ShowMeTheMoney = function()  //给子类添构造函数的prototype添加方法
     {
         alert(this.name + " $" + this.salary);
     };

     var BillGates = new Person("Bill Gates");   //创建基类Person的BillGates对象
     var SteveJobs = new Employee("Steve Jobs", 1234);   //创建子类Employee的SteveJobs对象

     BillGates.SayHello();       //通过对象直接调用到prototype的方法
     SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法，关注！
     SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法

     alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明prototype的方法是共享的

这段代码的第17行，构造了一个基类的对象，并将其设为子类构造函数的prototype，这是很有意思的。这样做的目的就是为了第28行，通过子类对象也可以直接调用基类prototype的方法。为什么可以这样呢？

原来，在JavaScript中，prototype不但能让对象共享自己财富，而且prototype还有寻根问祖的天性，从而使得先辈们的遗产可以代代相传。当从一个对象那里读取属性或调用方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找；如果prototype没有，又会去prototype自己关联的前辈prototype那里寻找，直到找到或追溯过程结束为止。

在JavaScript内部，对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时，也会同时将构造函数的prototype对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器(如Firefox)可以让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也有自己关联的原型对象，这样就形成了所谓的原型链。

在原型链的最末端，就是Object构造函数prototype属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先，这个老祖宗实现了诸如toString等所有对象天生就该具有的方法。其他内置构造函数，如Function, Boolean, String, Date和RegExp等的prototype都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些特征。

这不就是“继承”吗？是的，这就是“继承”，是JavaScript特有的“原型继承”。

“原型继承”是慈祥而又严厉的。原形对象将自己的属性和方法无私地贡献给孩子们使用，也并不强迫孩子们必须遵从，允许一些顽皮孩子按自己的兴趣和爱好独立行事。从这点上看，原型对象是一位慈祥的母亲。然而，任何一个孩子虽然可以我行我素，但却不能动原型对象既有的财产，因为那可能会影响到其他孩子的利益。从这一点上看，原型对象又象一位严厉的父亲。我们来看看下面的代码就可以理解这个意思了：

function Person(name)
    {
        this.name = name;
    };

    Person.prototype.company = "Microsoft"; //原型的属性

    Person.prototype.SayHello = function()  //原型的方法
    {
        alert("Hello, I'm " + this.name + " of " + this.company);
    };

    var BillGates = new Person("Bill Gates");
    BillGates.SayHello();   //由于继承了原型的东西，规规矩矩输出：Hello, I'm Bill Gates

    var SteveJobs = new Person("Steve Jobs");
    SteveJobs.company = "Apple";    //设置自己的company属性，掩盖了原型的company属性
    SteveJobs.SayHello = function() //实现了自己的SayHello方法，掩盖了原型的SayHello方法
    {
        alert("Hi, " + this.name + " like " + this.company + ", ha ha ha ");
    };

    SteveJobs.SayHello();   //都是自己覆盖的属性和方法，输出：Hi, Steve Jobs like Apple, ha ha ha 

    BillGates.SayHello();   //SteveJobs的覆盖没有影响原型对象，BillGates还是按老样子输出

对象可以掩盖原型对象的那些属性和方法，一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖其实只是在对象自己身上创建了新的属性和方法，只不过这些属性和方法与原型对象的那些同名而已。JavaScript就是用这简单的掩盖机制实现了对象的“多态”性，与静态对象语言的虚函数和重载(override)概念不谋而合。

然而，比静态对象语言更神奇的是，我们可以随时给原型对象动态添加新的属性和方法，从而动态地扩展基类的功能特性。这在静态对象语言中是很难想象的。我们来看下面的代码：

function Person(name)
    {
        this.name = name;
    };

    Person.prototype.SayHello = function()  //建立对象前定义的方法
    {
        alert("Hello, I'm " + this.name);
    };

    var BillGates = new Person("Bill Gates");   //建立对象

    BillGates.SayHello();

    Person.prototype.Retire = function()    //建立对象后再动态扩展原型的方法
    {
        alert("Poor " + this.name + ", bye bye!");
    };

    BillGates.Retire(); //动态扩展的方法即可被先前建立的对象立即调用

阿弥佗佛，原型继承竟然可以玩出有这样的法术！

原型扩展

想必君的悟性极高，可能你会这样想：如果在JavaScript内置的那些如Object和Function等函数的prototype上添加些新的方法和属性，是不是就能扩展JavaScript的功能呢？

那么，恭喜你，你得到了！

在AJAX技术迅猛发展的今天，许多成功的AJAX项目的JavaScript运行库都大量扩展了内置函数的prototype功能。比如微软的ASP.NET AJAX，就给这些内置函数及其prototype添加了大量的新特性，从而增强了JavaScript的功能。

我们来看一段摘自MicrosoftAjax.debug.js中的代码：

String.prototype.trim = function String$trim() {
    if (arguments.length !== 0) throw Error.parameterCount();
    return this.replace(/^\s+|\s+$/g, '');
}

这段代码就是给内置String函数的prototype扩展了一个trim方法，于是所有的String类对象都有了trim方法了。有了这个扩展，今后要去除字符串两段的空白，就不用再分别处理了，因为任何字符串都有了这个扩展功能，只要调用即可，真的很方便。

当然，几乎很少有人去给Object的prototype添加方法，因为那会影响到所有的对象，除非在你的架构中这种方法的确是所有对象都需要的。

前两年，微软在设计AJAX类库的初期，用了一种被称为“闭包”(closure)的技术来模拟“类”。其大致模型如下：

function Person(firstName, lastName, age)
    {
        //私有变量：
        var _firstName = firstName;
        var _lastName = lastName;

        //公共变量:
        this.age = age;

        //方法：
        this.getName = function()
        {
            return(firstName + " " + lastName);
        };
        this.SayHello = function()
        {
            alert("Hello, I'm " + firstName + " " + lastName);
        };
    };

    var BillGates = new Person("Bill", "Gates", 53);
    var SteveJobs = new Person("Steve", "Jobs", 53);

    BillGates.SayHello();
    SteveJobs.SayHello();
    alert(BillGates.getName() + " " + BillGates.age);
    alert(BillGates.firstName);     //这里不能访问到私有变量

很显然，这种模型的类描述特别象C#语言的描述形式，在一个构造函数里依次定义了私有成员、公共属性和可用的方法，显得非常优雅嘛。特别是“闭包”机制可以模拟对私有成员的保护机制，做得非常漂亮。

所谓的“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新的值，和上次那次调用的是各自独立的。的确很巧妙！

但是前面我们说过，给每一个对象设置一份方法是一种很大的浪费。还有，“闭包”这种间接保持变量值的机制，往往会给JavaSript的垃圾回收器制造难题。特别是遇到对象间复杂的循环引用时，垃圾回收的判断逻辑非常复杂。无独有偶，IE浏览器早期版本确实存在JavaSript垃圾回收方面的内存泄漏问题。再加上“闭包”模型在性能测试方面的表现不佳，微软最终放弃了“闭包”模型，而改用“原型”模型。正所谓“有得必有失”嘛。

原型模型需要一个构造函数来定义对象的成员，而方法却依附在该构造函数的原型上。大致写法如下：

//定义构造函数
    function Person(name)
    {
        this.name = name;   //在构造函数中定义成员
    };

    //方法定义到构造函数的prototype上
    Person.prototype.SayHello = function()
    {
        alert("Hello, I'm " + this.name);
    };    

    //子类构造函数
    function Employee(name, salary)
    {
        Person.call(this, name);    //调用上层构造函数
        this.salary = salary;       //扩展的成员
    };

    //子类构造函数首先需要用上层构造函数来建立prototype对象，实现继承的概念
    Employee.prototype = new Person()   //只需要其prototype的方法，此对象的成员没有任何意义！

    //子类方法也定义到构造函数之上
    Employee.prototype.ShowMeTheMoney = function()
    {
        alert(this.name + " $" + this.salary);
    };

    var BillGates = new Person("Bill Gates");
    BillGates.SayHello();    

    var SteveJobs = new Employee("Steve Jobs", 1234);
    SteveJobs.SayHello();
    SteveJobs.ShowMeTheMoney();

原型类模型虽然不能模拟真正的私有变量，而且也要分两部分来定义类，显得不怎么“优雅”。不过，对象间的方法是共享的，不会遇到垃圾回收问题，而且性能优于“闭包”模型。正所谓“有失必有得”嘛。

在原型模型中，为了实现类继承，必须首先将子类构造函数的prototype设置为一个父类的对象实例。创建这个父类对象实例的目的就是为了构成原型链，以起到共享上层原型方法作用。但创建这个实例对象时，上层构造函数也会给它设置对象成员，这些对象成员对于继承来说是没有意义的。虽然，我们也没有给构造函数传递参数，但确实创建了若干没有用的成员，尽管其值是undefined，这也是一种浪费啊。

唉！世界上没有完美的事情啊！

原型真谛

正当我们感概万分时，天空中一道红光闪过，祥云中出现了观音菩萨。只见她手持玉净瓶，轻拂翠柳枝，洒下几滴甘露，顿时让JavaScript又添新的灵气。

观音洒下的甘露在JavaScript的世界里凝结成块，成为了一种称为“语法甘露”的东西。这种语法甘露可以让我们编写的代码看起来更象对象语言。

要想知道这“语法甘露”为何物，就请君侧耳细听。

在理解这些语法甘露之前，我们需要重新再回顾一下JavaScript构造对象的过程。

我们已经知道，用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步：第一步是建立一个新对象；第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象；第三步就是将该对象作为this参数调用构造函数，完成成员设置等初始化工作。对象建立之后，对象上的任何访问和操作都只与对象自身及其原型链上的那串对象有关，与构造函数再扯不上关系了。换句话说，构造函数只是在创建对象时起到介绍原型对象和初始化对象两个作用。

那么，我们能否自己定义一个对象来当作原型，并在这个原型上描述类，然后将这个原型设置给新创建的对象，将其当作对象的类呢？我们又能否将这个原型中的一个方法当作构造函数，去初始化新建的对象呢？例如，我们定义这样一个原型对象：

var Person =  //定义一个对象来作为原型类
    {
        Create: function(name, age)  //这个当构造函数
        {
            this.name = name;
            this.age = age;
        },
        SayHello: function()  //定义方法
        {
            alert("Hello, I'm " + this.name);
        },
        HowOld: function()  //定义方法
        {
            alert(this.name + " is " + this.age + " years old.");
        }
    };

这个JSON形式的写法多么象一个C#的类啊！既有构造函数，又有各种方法。如果可以用某种形式来创建对象，并将对象的内置的原型设置为上面这个“类”对象，不就相当于创建该类的对象了吗？

但遗憾的是，我们几乎不能访问到对象内置的原型属性！尽管有些浏览器可以访问到对象的内置原型，但这样做的话就只能限定了用户必须使用那种浏览器。这也几乎不可行。

那么，我们可不可以通过一个函数对象来做媒介，利用该函数对象的prototype属性来中转这个原型，并用new操作符传递给新建的对象呢？

其实，象这样的代码就可以实现这一目标：

function anyfunc(){};           //定义一个函数躯壳
    anyfunc.prototype = Person;     //将原型对象放到中转站prototype
    var BillGates = new anyfunc();  //新建对象的内置原型将是我们期望的原型对象

不过，这个anyfunc函数只是一个躯壳，在使用过这个躯壳之后它就成了多余的东西了，而且这和直接使用构造函数来创建对象也没啥不同，有点不爽。

可是，如果我们将这些代码写成一个通用函数，而那个函数躯壳也就成了函数内的函数，这个内部函数不就可以在外层函数退出作用域后自动消亡吗？而且，我们可以将原型对象作为通用函数的参数，让通用函数返回创建的对象。我们需要的就是下面这个形式：

 function New(aClass, aParams)    //通用创建函数
    {
        function new_()     //定义临时的中转函数壳
        {
            aClass.Create.apply(this, aParams);   //调用原型中定义的的构造函数，中转构造逻辑及构造参数
        };
        new_.prototype = aClass;    //准备中转原型对象
        return new new_();          //返回建立最终建立的对象
    };

    var Person =        //定义的类
    {
        Create: function(name, age)
        {
            this.name = name;
            this.age = age;
        },
        SayHello: function()
        {
            alert("Hello, I'm " + this.name);
        },
        HowOld: function()
        {
            alert(this.name + " is " + this.age + " years old.");
        }
    };

    var BillGates = New(Person, ["Bill Gates", 53]);  //调用通用函数创建对象，并以数组形式传递构造参数
    BillGates.SayHello();
    BillGates.HowOld();

    alert(BillGates.constructor == Object);     //输出：true

这里的通用函数New()就是一个“语法甘露”！这个语法甘露不但中转了原型对象，还中转了构造函数逻辑及构造参数。

有趣的是，每次创建完对象退出New函数作用域时，临时的new_函数对象会被自动释放。由于new_的prototype属性被设置为新的原型对象，其原来的原型对象和new_之间就已解开了引用链，临时函数及其原来的原型对象都会被正确回收了。上面代码的最后一句证明，新创建的对象的constructor属性返回的是Object函数。其实新建的对象自己及其原型里没有constructor属性，那返回的只是最顶层原型对象的构造函数，即Object。

有了New这个语法甘露，类的定义就很像C#那些静态对象语言的形式了，这样的代码显得多么文静而优雅啊！

当然，这个代码仅仅展示了“语法甘露”的概念。我们还需要多一些的语法甘露，才能实现用简洁而优雅的代码书写类层次及其继承关系。好了，我们再来看一个更丰富的示例吧：

//语法甘露：
    var object =    //定义小写的object基本类，用于实现最基础的方法等
    {
        isA: function(aType)   //一个判断类与类之间以及对象与类之间关系的基础方法
        {
            var self = this;
            while(self)
            {
                if (self == aType)
                  return true;
                self = self.Type;
            };
            return false;
        }
    };

    function Class(aBaseClass, aClassDefine)    //创建类的函数，用于声明类及继承关系
    {
        function class_()   //创建类的临时函数壳
        {
            this.Type = aBaseClass;    //我们给每一个类约定一个Type属性，引用其继承的类
            for(var member in aClassDefine)
                this[member] = aClassDefine[member];    //复制类的全部定义到当前创建的类
        };
        class_.prototype = aBaseClass;
        return new class_();
    };

    function New(aClass, aParams)   //创建对象的函数，用于任意类的对象创建
    {
        function new_()     //创建对象的临时函数壳
        {
            this.Type = aClass;    //我们也给每一个对象约定一个Type属性，据此可以访问到对象所属的类
            if (aClass.Create)
              aClass.Create.apply(this, aParams);   //我们约定所有类的构造函数都叫Create，这和DELPHI比较相似
        };
        new_.prototype = aClass;
        return new new_();
    };

    //语法甘露的应用效果：
    var Person = Class(object,      //派生至object基本类
    {
        Create: function(name, age)
        {
            this.name = name;
            this.age = age;
        },
        SayHello: function()
        {
            alert("Hello, I'm " + this.name + ", " + this.age + " years old.");
        }
    });

    var Employee = Class(Person,    //派生至Person类，是不是和一般对象语言很相似？
    {
        Create: function(name, age, salary)
        {
            Person.Create.call(this, name, age);  //调用基类的构造函数
            this.salary = salary;
        },
        ShowMeTheMoney: function()
        {
            alert(this.name + " $" + this.salary);
        }
    });

    var BillGates = New(Person, ["Bill Gates", 53]);
    var SteveJobs = New(Employee, ["Steve Jobs", 53, 1234]);
    BillGates.SayHello();
    SteveJobs.SayHello();
    SteveJobs.ShowMeTheMoney();

    var LittleBill = New(BillGates.Type, ["Little Bill", 6]);   //根据BillGate的类型创建LittleBill
    LittleBill.SayHello();

    alert(BillGates.isA(Person));       //true
    alert(BillGates.isA(Employee));     //false
    alert(SteveJobs.isA(Person));       //true
    alert(Person.isA(Employee));        //false
    alert(Employee.isA(Person));        //true

“语法甘露”不用太多，只要那么一点点，就能改观整个代码的易读性和流畅性，从而让代码显得更优雅。有了这些语法甘露，JavaScript就很像一般对象语言了，写起代码了感觉也就爽多了！

令人高兴的是，受这些甘露滋养的JavaScript程序效率会更高。因为其原型对象里既没有了毫无用处的那些对象级的成员，而且还不存在constructor属性体，少了与构造函数间的牵连，但依旧保持了方法的共享性。这让JavaScript在追溯原型链和搜索属性及方法时，少费许多工夫啊。

我们就把这种形式称为“甘露模型”吧！其实，这种“甘露模型”的原型用法才是符合prototype概念的本意，才是的JavaScript原型的真谛！

想必微软那些设计AJAX架构的工程师看到这个甘露模型时，肯定后悔没有早点把AJAX部门从美国搬到咱中国的观音庙来，错过了观音菩萨的点化。当然，我们也只能是在代码的示例中，把Bill Gates当作对象玩玩，真要让他放弃上帝转而皈依我佛肯定是不容易的，机缘未到啊！如果哪天你在微软新出的AJAX类库中看到这种甘露模型，那才是真正的缘分！

编程的快乐

在软件工业迅猛发展的今天，各式各样的编程语言层出不穷，新语言的诞生，旧语言的演化，似乎已经让我们眼花缭乱。为了适应面向对象编程的潮流，JavaScript语言也在向完全面向对象的方向发展，新的JavaScript标准已经从语义上扩展了许多面向对象的新元素。与此相反的是，许多静态的对象语言也在向JavaScript的那种简洁而幽雅的方向发展。例如，新版本的C#语言就吸收了JSON那样的简洁表示法，以及一些其他形式的JavaScript特性。

我们应该看到，随着RIA(强互联应用)的发展和普及，AJAX技术也将逐渐淡出江湖，JavaScript也将最终消失或演化成其他形式的语言。但不管编程语言如何发展和演化，编程世界永远都会在“数据”与“代码”这千丝万缕的纠缠中保持着无限的生机。只要我们能看透这一点，我们就能很容易地学习和理解软件世界的各种新事物。不管是已熟悉的过程式编程，还是正在发展的函数式编程，以及未来量子纠缠态的大规模并行式编程，我们都有足够的法力来化解一切复杂的难题。

佛最后淡淡地说：只要我们放下那些表面的“类”，放下那些对象的“自我”，就能达到一种“对象本无根，类型亦无形”的境界，从而将自我融入到整个宇宙的生命轮循环中。我们将没有自我，也没有自私的欲望，你就是我，我就是你，你中有我，我中有你。这时，我们再看这生机勃勃的编程世界时，我们的内心将自然生起无限的慈爱之心，这种慈爱之心不是虚伪而是真诚的。关爱他人就是关爱自己，就是关爱这世界中的一切。那么，我们的心是永远快乐的，我们的程序是永远快乐的，我们的类是永远快乐的，我们的对象也是永远快乐的。这就是编程的极乐！

说到这里，在座的比丘都犹如醍醐灌顶，心中豁然开朗。看看左边这位早已喜不自禁，再看看右边那位也是心花怒放。

蓦然回首时，唯见君拈花微笑…

原文链接：http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html

XHTML和CSS应用之灵活的文字

Fenix — Fri, 24 Dec 2010 20:13:05 +0000

灵活的文字

策略：让文字大小具有高度灵活性并易于实现，同时也尽可能地保证对设计细节的全权控制。灵活设置页面文字的大小，赋予用户控制页面文字大小的能力，从而提供更好的页面可读性。

要点：如何在保持灵活性的同时仍能在文字周围进行精确巧妙的细节设计。

方法：使用基准值+百分比模型。在body对象中设置表示“绝对大小”的关键字，比如small，以此做为基准，然后使用百分比值来增大或减小其它对象中的字体大小。当基准值改变后，其它对象中的字体大小也会相应地改变。

技巧：使用一个能将页面中其它部分包围起来的

，即body对象（设置small关键字）的子元素，然后对该

用百分比在父元素关键字的基础上增大或者减小字体大小。

代码：


  
    This is a Title
    This is body text at default base size.

body{
	font-size:small;
}
#wrap{
	font-size:95%;
}
h1{
	font-size:150%;
}

使用em实现灵活的文字：将元素中的基准字体大小设置为62.5%，使默认的中等字体大小从16px缩小为10px，1em将显示10px，1.2em将显示12px等。

利用XHTML和CSS提高网站的灵活性与适应性

Fenix — Sun, 19 Dec 2010 09:21:13 +0000

这段时间一有空闲，就一头扎进由Web设计大师Dan Cederholm所著的《无懈可击的Web设计》一书中，这部著作分Ⅰ、Ⅱ两册，Ⅰ册主题既本文标题也是书名副标题，Ⅱ册主题为CSS深入应用，作为Ⅰ册内容的延伸并介绍在当前Web标准下，怎样利用“平稳退化，渐进增强”的理念而结合CSS3新增属性打造更加合理的设计方案。

在Ⅰ册中，作者认为，一个高质量且吸引人的Web设计方案由“可视组件”和“无懈可击的实现方式”两项重要内容构成。“可视组件”即图像设计、颜色和排版这些可以最终在页面上明显看到的部分，而“无懈可击的实现方式”即明智选择使用XHTML和CSS，并利用Web标准创建尽可能高灵活性、适应性以及亲和力网站的方式。后者也就是Ⅰ册讨论的焦点。

我在读这部著作之前的重构功底，也就能应付一般的项目，出的设计方案也很难说具有灵活性、适应性和亲和力，自从接触了这部著作，被书中的案例深深吸引，作者在各章都会先考察一个现有的设计例子，然后用XHTML和CSS进行重构，改善其灵活性和减少代码量。书中的实例可以快速有效地打造一个无懈可击的设计方案，其中所传达出的设计思想，想必会对自己今后项目质量有所帮助。现在，我想通过几篇文章，结合自己的理解重现书中的经典案例。

Ⅰ册目录：
1、灵活的文字
使用关键字和百分比来设定页面文字的大小，以允许用户控制并实现最大程度的灵活性

2、可伸缩的导航栏
让网站导航栏能够适应任意大小的文字或者任何数量的内容

3、可扩展的行
不要指定横向页面组件的高度，要让它们能够在纵向自由扩展

4、巧妙的浮动
通过浮动来实现表格效果

5、牢固的方框
设计框式的组件之前，应考虑好未来可能会出现的问题

6、页面在缺失图片或CSS的情况下仍然易读

7、可转换的表格
把外观从数据表格中剥离出来，再用CSS重新定义

8、流动布局和弹性布局
能自由扩大和缩小的页面布局

我尽可能地按照作者书中讲述的内容顺序来重现书中案例。

关于《无懈可击的Web设计》作者

作者锡德霍姆（博客http://simplebits.com/）是一位屡获殊荣的Web设计师及作家，擅于运用Web标准来简化和重构设计，2003年因重构了Fast Company和Inc.com两个著名网站而蜚声业界。Dan信奉使用Web标准来实现灵活且适应性强的设计，他在Web标准设计领域方面拥有多年的实践经验，曾帮助Google、MTV、ESPN、Fast Company、Blogger、Odeo等知名公司设计网页和重构网站。他是一位活跃的技术专家，经常在业界最重要的技术会议上发表演讲，也是A List Apart等网站的专栏作者。他的博客SimpleBits颇受欢迎，他经常在上面撰写有关Web、技术及人生的文章和评论。除本书外，他的另一部畅销书Web Standards Solutions也备受读者青睐。——摘自Ⅰ册封底