刚过去的这一年里，我从很远的广州来到更远的杭州，变化的是地名，而不变的仍然是漂泊。老实说，我花了我不少时间来适应，新的人与事总是让人觉得麻烦而且难以适应。杭州相对来说也离家更远，像以前那样一年回家三四次成了奢侈。周围的人突然一下子全变得陌生，而我又不是自来熟的类型，我成功的再一次让自己变得看起来很孤独的样子。但这并没有想像中那么坏，实际上我似乎不是那么在乎要把自己混在人群中了。我开始渐渐明白，在这个世界上，我惟一需要讨好的人，就是我自己。而他人，其实并不是那么重要。

在这一年里，我成功的见识到了大公司的流程、大公司的做风。说出来也许觉得好笑，以前总希望能在一家在正规流程的公司工作与学习，但实际上，当真正见识到这些东西，我才发现自己对这些官僚与繁复的体系，是如此的深恶痛绝。老实说，并不见得是这个流程和体制太坏，只是我觉得我难以对其适应。我讨厌每周的n封邮件，讨厌一个简单的需求还要评审上半天，讨厌每次做升级包里去测试那里求爷爷告奶奶，内心上说，我喜欢简单而纯粹的东西。

当然，这一切也并不是那么坏，有时候我会想，如果把现在支付宝的这一套东西，原封不动的copy到我以前的那家三百人的小公司，那么我想，这套东西应该是非常成功的。————我的意思是，大象要跳舞的话，总是会显得比较笨拙与艰难。让我讨厌的并不是制度本身，而是制度与公司庞大的体系结合后所产生的举步维艰的坏感觉。

杭州并不是一个很坏的城市，老实说，如果没有三万的房价，我会很愿意在这里一直生活下去。西湖很美，去多少次都不过份，最近我在期待下雪，希望见到雪后的西湖。想到雪后的西湖我就想到去年女朋友在我刚到杭州的第三天就过来陪我一起过圣诞节，我们一起去逛西湖，在湖边冻得发抖。

杭州是一个非常适合骑自行车的城市，虽然路没有广州的宽、没有广州的好，但是无论大小道路，都会有专门的自行车道。这一点绝对值得其它的城市学习。在广州，我觉得骑自行车简直是找抽。当然，最关键的是，在杭州有西湖与旁边的大小山峰，湖边与上下山的道路成为了自行车运动最好的场所。在这一年里，我就经常去骑车，周末或者什么时候，上下一趟龙井山，在大自然里呼吸自由空气的感觉真的很爽。

当然，更爽的是骑得更远一点，去往那些远离城市的地方，那种感觉真是美好。我不知道是因为我是个农村娃还是什么别的原因，我不太喜欢城市。老实说，在城里也不是呆不下去，但是那些什么酒吧迪厅KTV什么的，让我感觉很坏，我不喜欢呆在里面，在这一年里，除了去打过几次台球、以及跟同事去过两次KTV，看过两到三场电影，再也没有在城里做过别的娱乐活动。而每次骑车出了城，到了山里，都让我觉得感觉非常好，脑子里什么都不想，就看着眼前的路，或者两边依次掠过的树，想着就这么一直骑下去，永远都不用回来就好。

说到电影，展开说下。以前在广州的时候，小区楼下就有个小电影院（大地数字连锁），里面好像一共就只有6个厅，但是厅还是一样大的，效果也不差，关键是票价很便宜，一般的不是很热门的电影会员价是25块，热门一点的30到35块（记得看过的3D版阿凡达是35块）。基本上每个月我们都会去看一到两场电影，于是我的脑海里就深深的烙下了一场电影25块的印记。以至于到杭州后去电影院，看到一张普通的电影票也要60块，热门一点的一般都是90，甚至还有120一张的，然后我的价值观突然就崩溃了，心理上完全难以接受。有好多个无聊的周末我跑到电影院，看到60一张的票价后再次回到家中默默的打开verycd.com。

我想说的是：人其实对对物质的一些价值的判断有着强烈的先入为主的影响。我在广州三年，电影票从20块涨到25块，这样的价位已经定性，低了或者高了对我来说都有些无法接受，更何况还是一下子翻到两三倍。于是在这一年里，我基本上放弃了看电影的爱好，就算是变形金刚3这样的我很喜欢的大片，我也放弃了观看，而选择在两三个月后在网上下盗版。由一个伪文艺青年，彻底的蜕变成了二逼青年。

另外，由上面的电影票事件，也可以由此见到一下杭州的物价之高。来杭州之前我想着工资虽然没升，但多少能学点东西，也没亏多少。来了后才发现，生活水平下降的厉害，辛辛苦苦三四年，一夜回到毕业前————说的就是我。

这一年里，我成功的彻底与windows平台决裂，mac真是个不错的系统，学习成本没有linux高，而后期如果想提高学学shell、vim什么的，也一样不比linux差。这一年里接触了很多很多的新知识，但说实话都只能算是入了门，什么shell、awk、sed、vim、ssh，其实关键在于一些想法的改变，以前在windows平台一些做起来很麻烦的事，在mac下因为有了强大的shell，突然变得很轻松而且富有创造力。如果有一天公司不再提供mac机，我想我会毫不犹豫的把我的pc装上linux。

在用类unix系统之前，对什么自由软件、什么GPL什么apache之类完全没有概念，也不认为这是未来的模式，总觉得商业软件必然会超过自由软件生态圈，发展得更好，而在体会到类unix系统的美好之后，我才意识到，自由软件对于世界的贡献，远远超过几台linux服务器那么简单，自由软件必然一直发展生存下去，在很多的特定场合里，发挥比商业软件重要得多的作用。

在这一年里，我的evernote上一共产生了90条笔记，就条目数来说，上半年要比下半年多一点，但单篇笔记的篇幅来说，下半年的要比上半年的长一点。也就是说，上半年更侧重于塞进去、而下半年更侧重与归纳与整理一些。evernote真是个好软件，在evernote出现之前，其实完全可以有其它的类似的软件帮我们实现相同的功能，但只有evernote成功了……好软件的定义其实很简单：把人们做某些事所需要的门槛降到最低。

在2011的上半年里，我试图参与以前在广州时曾经有一些接触的小项目（kado.im），但后来因为自身的懒散与公司加班太多，完全没有办法继续下去，有一段时间我有很多的想法，但最终我都没有把它执行下去，从kado这个项目上，我也看出来自身的最大问题：执行力不足。从本质上说，我羡慕的是男耕女织的农业社会生活————我是认真的。

在这里一年，买过最好的电子设备无疑是kindle，有很多人不喜欢它，但我喜欢它的原因却很简单：它只能用来看书，几乎不能干别的。面对互联网无处不在的社会，有这么一台设备真是万幸。在阅读体验上，除了我觉得它的屏应该更精细一点，以便看中文小字体能更清楚一点外，其它方面完全胜过纸质书。冬日的阳光下，拿着kindle在阳台上读书，真是很惬意的享受。

在这一年里，读过技术类书要远少于其它闲散书籍。现在给我留下深刻印象的书目如下：

《上帝掷骰子么》，这是一本讲量子物理史的书，作者文笔很好，故事讲得很好，虽然有高深的理论我还没有完全看懂，但譬如蔡定愕的猫之类的纯理论终于搞得懂了。
《facebook效应》，我是在看完这本书之后再去看的电影，老实说，一切的电影都让我觉得没有书美好（除了av和阿凡达）。这本书让我再次相信神话，不过这些神话故事却总不是在中国发生。真是令人遗憾。
《公正——该如何做是好》，这是一本书哈佛大学的讲义书。书中提出了很多很多的假命题，然后对你引导，告诉你什么才是真正的公平与正义。老实说，在信仰普遍丧失的中国，引进这样一本书实在是太有必要，我希望有更多的人能读到这本书。
《美国宪政历程》，简单的说来，这就是一本讲美国的宪法的诞生，以及其27个修正案的司法故事书。在这本书里，作者宣扬了人权、普世价值、司法公正与公平、政府与民众的制衡关系等等一系列现代社会所必备的体系。读这本书让我觉得又解气又恨，解气的是美国人成功的在很多方面对抗了他们的政府并且还赢了，恨的是，书里所宣扬的那些，在中国，很多还只是仅露冰山一角，未来还有很远的路要走。
《十个词汇里的中国》，这是今年读过的最好的中国当代的记叙文，我们这个社会的迷茫，我们这个社会的价值缺失，我们这个社会飞速变化后面的痛苦。同样，余华（作者）也没有解决这些问题，也没有试图去解决这些问题。我认为这是对的，现在的问题，在经过历史的长河洗礼后，也许就是未来另一个故事的开端。我们能做的，就是看清自己，继续前进。
《兄弟》也是在这一年我才读到，很不错的当代小说，冷血而深刻，读完后令你有种不寒而栗之感。
《三体》，这是今年读过最好看的科幻小说，作者刘慈欣，是一位中国人，想象力非常丰富，故事也非常宏大。如果能把这样的硬科幻拍成电影，应该是很享受的事。
《球状闪电》，同样是刘慈欣的书，故事背景远没有三体宏大，但同样精彩，而且少有在里面有一丝若有若无的爱情，让故事温情不少。
《基地》，科幻经典，故事同样宏大，但我更喜欢三体一些。原因是……外国的人名与地名让我读起来很生硬————吃了英语不好的亏啦。
《亲爱的安德烈》，老实说，在读这本书之前，我一直以为作者龙应台是个男的……因为有个男人的笔名嘛。这书是安德烈和她的妈妈龙应台的书信录，在书中可以看到两代人、以及中西方的文化差异，而这对母子，也在一直试图更理解对方。那些当爹当妈的，可以看看这书。
《东北往事——黑道风云20年》，看完此书，再去搜一下90年代共和国历史上的大案要案，你会发现东北人真不是盖的啊。刚好看完此书后《钢的琴》也上映了，我连着一起看了。总的感觉，90年代的改革开放对南方的冲击是巨大的，但对东北这样的老工业基地来说，冲击并不亚于南方，现在的东北，给人的感觉是渐次的颓废与落寞，曾经是共和国经济中枢的东北突然变成了没人痛没有爱的孩子。年轻人都往南方去了，并且不再回来，老的工厂被拆掉，钢铁与水泥在落日中发锈……用我以前一朋友的话来说：你看看广州这些地方那些站街的女孩子，好多都是东北的（并无鄙视之意，就事论事而已）。
《寻路中国》，这是个老外写的中文书（注意：原版就是中文写的），网上有一个图片对比在国外的英文版与在国内的中文版的区别——国外的版本上，封皮上的交警是个扁平的毫无生气的铁皮人，而在国内出版的版本上，这个铁皮人站到了路的左边，并且换成了一个3D的上了漆的栩栩如生的塑料模特。在一个老外的眼里，我们平时一些司空见惯的事变得光怪陆离难以想像，老实说，何伟（作者中文名）观察得比我们要仔细，在他眼里的中国，跟我们习以为常麻木不仁的中国，不是一个中国。
今年给我留下最深刻印象的不是日本的核电站爆炸，而是之后不久的抢盐事件。我不知道我们的国民还要再抢多少次盐啊板蓝根啊醋啊之类的东西，才能明白一些浅显的道理。在抢盐事件后的第二天，我给我妈打电话，问她去抢了没有，我妈淡定的回答：没去。我高兴的接着问：妈你怎么没去呢。我妈回答：家里还有好几包呢，暂时不用抢。我：…………
有时候，我以为开启民智是告诉民众，要他们争取他们应有的权利，从政治上让他们变成自由人。而今年后来的一些时候，我开始慢慢觉得，其实这样一群人，总是盲目的充当看客并跟着瞎起哄的一群人，更重要的事情是让他们明白一些科学道理，知道什么是核什么是太阳系、什么是半衰期什么是井盐、什么是巫医什么是西医……让他们活得明白一点，让他们知道在这个世界上，万物有都是有规律可循，让他们不再抢盐和板蓝根，也不再被政府的某些奇谈怪论所蒙蔽，不再被CCAV的《走进伪科学》栏目所戏弄，勇敢对着伪科学与中医骗子们、对着傻逼与二愣子们、对着江湖术士与无良商家们竖起中指，大声的说：抗门昂～贝比！

今年对我而言另外一件重要的事，是电视。在过去的两三年里，我成功的不再喜欢电视，并且对其深恶痛绝。而在过去的一年里，我听人谈到过的最牛逼也最二逼的电视节目，无疑是各类相亲栏目，老实说我没有完整的看过一期，但无疑我是讨厌它们的。这些二逼的节目们，成功的把90年代最后的一点朦胧美剥离掉，把男欢女爱变成差不多是赤裸裸的物质交易（当然，我也不否认在现场的确有一些一见钟情的例子，但总的来说，这些节目的基调就是如此）。在此之前，当长腿美女们对男方有所物质要求时，一般都还是派那个总是长着三角眼的未来丈母娘出面，板着脸向长得有点二逼青年感觉的男生要房要车，而现在，美女们终于肯拉下脸来，并且认识到，在这样的物质社会里，没有相当的物质保证爱情就他妈是个屁。
我这里没有鄙视长腿美女们的意思，我是意思是：无论长腿美女还是二逼男青年还是长着三角眼的未来丈母娘，都是我们这些年房价疯涨政府无能的受害者。我们的政府在大捞其财的时候，有没有想过这群可怜的少年们，要用爱情为官员们的贪婪与无耻买单呢？这真是很悲哀的事。少年们，是时候反抗了，是时候上街游行了，要不然，以后就别指望能坐在宝马里哭泣了，坐在马路牙子上打滚还差不多。

另外一个让我觉得简直就是恶心，比CCAV的《走进伪科学》还要令人不堪的，就是突然出现的各类健康养生节目，我不知道这些节目的审批是不是要经过一些必要的医学方面资格的证明之类。因为总的来说，我觉得那些长腿的美女主持们，就是在节目上一连串的放屁。一会儿吃这个补那个，一会几点睡觉能排什么毒。我真不知道她们在说这些话的时候，有没有哪怕做过哪怕一次对比试验。由这些节目，其实也可以看出国人的一些愚昧无知，中医的理论基本上就是满天扯，为什么这么多年过去，还有这么多人的相信呢？我觉得，所谓的保有传统文化是一方面，另外，国人对西方世界仍持有的敌视心理，成功的为所谓的中医赢得了一点点市场。
也许有人要反对，说中医某些药方非常有用之类。但我要说，中医的问题不是某个药方或者治疗方案有用或者没有的问题，中医的问题在于，它的方法论就有问题，拿一套两千年前古人用于解释世界与万物的哲学理论来展开的体系，来做为治病救人的医学理论，简直就是扯他妈的蛋。中医的问题，在于要去伪存真。基本上，养生学什么的，可以抛弃了。
如果按那些美女们提供的方法吃了什么东西，我当然相信死不了人。因为那些东西本来就可以当成普通食物吃，但是我在想，如果这些傻逼美女们提供的办法在经过对比测试之后证明无用，她们是不是要承担观众们的经济损失：比如，赔每个观众十斤绿豆之类的。

在这一年里，尽管各种微博铺天盖地的宣传，并慢慢渗入到人们生活中的各方方面，但我成功的hold住。没有掉入这个信息流构建的陷阱。在这一年里，我开始不再那么随波逐流，对于所谓的新闻和媒体保持了谨慎且敬而远之的态度。而且一年过去，我也发现，其实我应该要了解的信息一个也没有少。不该了解的倒是还是被迫着接受了不少。现代社会是一个完全的信息过载的社会，如同美国人做的调查那样，一个现代的美国人，一人平均要接受237条广告。我相信东南部城市的哥们姐们接受的广告数不会比这个少多少，因为相对来说我们的城市更密集，我们的媒体更无耻。
而在这样的社会里，要保持独善其身，其实真不是一件容易的事，人总是容易被物质与外表光鲜的东西吸引，而慢慢失去自我，追求那些原本并不是你所需要的东西。与其与自身的欲望去抗争，倒不如在一开始，就保持一点点的无知，对那些你不希望其侵占你的生活的东西，保持着敬而远之的态度。
在前年的某些时候，我是一个技术制胜论者，我总以为技术总是会改善生活，我所从事的工作也同样如此。但2011里，我开始把这当成一个双刃剑的问题，并不一定是每一件好的技术站在一个好的出发点上就一定会让生活更美好，比如微博、SNS，虽然他们确实改善了信息的流通，但同样也让人们更加疏远原本亲切的生活，把虚拟的网络变得无处不在。把原用来跟家人团聚或者别的什么时光，变成了在手机上rt。
当然，我还没有站到科学的反对面，我仍然相信科学与技术是人类进步的第一生产力，我们的未来也有赖于此。但就我个人而言，使用各类互联网产品，变成了一件谨慎的事，因为相对于刷微博与发呆，我更喜欢发呆一点。

这一年里，比航天飞机寿终正寝的更大的新闻，无疑是乔布斯的离去。对世界来说，无疑是失去了一位最佳的CEO，对我而言，我所担心的是，能不能再买到像mac book pro或者iMac一样这么优美的产品。之所以说mac book pro优美是有原因的，因为我拆开看过一次，apple公司把产品的设计做到了极致，mbp里的每一条走线，与印刷电路板的颜色，都经过了仔细的设计，我想象不出这个地球上还有比apple更用心做产品的公司。我相信同样花8000块或者更多，也能买到像mbp这样外面做工优美的产品，但前提是不能拆开看。如果把乔布斯拉过去设计航天飞机，我相信就算哥伦比亚后爆炸后掉下来的碎片，也一定是经过设计的。
在事业上，乔布斯无疑是每一位IT从业者的榜样。国内突然一下子多了好多乔布斯的书，但我以为，不是每一个人都要当乔布斯，找到自己的路，才是最重要的。

以为上记，并祝自己的2012里，爱情事业双丰收。

1. mac的内核叫darwin（达尔文），它是一个类UNIX的内核，相较与linux，它要更像UNIX一点
2. 同样的，在很多UNIX上的工具都有在mac平台上的实现，比如很多命令行下的工具及编程语言（像bash，awk，grep，python，prel，ruby，PHP……）这些都已经内置在OS X里，用户无需在次安装，所以，mac也是一个很适合程序员群体的系统
3. mac已经内置svn工具，直接在终端输入svn co (对应check out) 、svn ci (commit)、svn up (update)可以完成基本的svn操作
4. finder（相当于windows的资源管理器）很不给力，没有剪切，没有同文件夹合并，没有地址栏……最让我失望的就是finder了，如果你要剪切及同文件夹合并等功能，请安装path finder（收费，功能较全）或totol finder（共享软件，比较小巧，我用的就是这个），如果你要同文件夹合并功能，还可以在终端输入 cp -R source_diectory target_directory这样
5. UNIX下的很多工具有很强的依赖关系，有时候我们是很难去处理这些麻烦玩意的，macport就是一个处理这些关系并自动帮你完成编译等工作的命令行软件，装完后在终端输入： port install ***  就可以安装在port里已经存在的软件，也可以输入如：port upgrade php 这样，就可以把mac自带的php升级到最新版
6. mac已经内置了apache PHP等软件，可以在系统偏好设置里打开“web共享”来启用apache，apache的配置文件在/etc/apache2/httpd.conf 以及 /pravite/etc/apache2/extra/httpd-vhosts.conf 里， php.ini文件位于 /etc/php.ini 里，详情可以查看这篇文章。
7. 中文输入法可以用FIT，免费还好用，同时支持拼音及五笔，现在的新版还支持导入搜狗词库，基本很完美了。
8. 本人刚换了intel 40G的固态硬盘，另一个250G的普通硬盘仍然服役中，系统盘的磁盘空间相当吃紧，对于这点，有如下办法：
   1. 装完系统后，建立两个管理员帐号（A和B，A是主帐号），然后登入你B帐号，进入到系统偏好设置\账户里，在A帐号上右键\高级选项，在个人目录一栏里，把自己的账户主文件夹设置到非HDD的盘上的，如：/Volumes/user/ （user就是我另一块硬盘的挂载点）
   2. 禁用安全休眠，可以省出跟你内存一样大的硬盘空间，我的是4G，关于这个，还是有点风险的，具体就是你的计算机如果没有多少电并进入休眠了，然后有可能因为电力耗尽而导致内存中没保存的数据丢失，具体请看这个文章，方法是在终端中：
      $ sudo pmset -a hibernatemode 0
      $ sudo nvram “use-nvramrc?”=false
      然后在重启后，在次在终端中
      $ sudo rm -f /private/var/vm/sleepimage
      就OK了
   3. 删除不用的语言包和输入法文件，这个可以google一个叫Monolingual的软件，可以省出1G左右的空间
9. 你都到了mac下了，有个软件就不得不介绍了，这就是MacVIM，编辑器中的神器，关键是，它在GUI跟命令行两种模式下都一样的好用，神器
10. keyNote是苹果出品的类似跟微软的powerPoint一样的软件，但是效果要好很多，推介之
11. mac下也有office，最新的版本是2011版，有word，excel，pointpower，outlook四个大软件，基本上可以解决你的办公问题
12. 播放器推荐用MPlayerX和VLC组合，基本上可以搞定90%以上的视频文件了
13. 虚拟机软件有VM Fusion跟Parallels Desktop，各有千秋，有人说VM稳定，但个人感觉Parallels desktop要快很多！
14. safari下有支付宝安全控件，可以通过这个网购，前提是你的支付宝里有钱，因为很多网银的控件是不支持safari的
15. FaceTime很好用，感觉跟个电话似的，不管你有没有登陆iChat或者facetime，别人都能呼叫进来，当然，前提是你的机器是开机的。
16. 通过一个叫doubleTwist的软件，你可以把你的iTunes播放列表跟大多数的android设备和普通的MP3同步
17. mac book pro的屏幕上方的边框是有磁性的，工作的时候你可以吸一张便条纸或是钢笔上去，不会掉，除非你的是判官笔
18. 记得多用time machine备份，mac的数据一旦丢了，就没有那么多好用的windows/DOS下的数据恢复软件给你用了，哭都没用的，有一个叫Data Rescue 的软件还不错，我用它找回了部分数据
19. bash的配置文件位于　~/.profile ，同样，vim的配置文件位于 ～/.vimrc 中，VIM的插件位于 ～/.vim 中

暂时就这些了，想到在写。

  obj.getBoundingClientRect()

在网上查一下相关的资料，这么臭屁的东西居然是在ie里最早实现的！！！然后在opera 9.5+和FF3.0+里也得到了支持，感谢Microsoft大神呀！

下面是让我蛋痛的老写法（又臭又长，无比丑陋）：

function getAbsOffset(obj, offsetObj){
	var offsetObj = offsetObj || document;
	var curPos = {
		x: 0,
		y: 0
	};
	if (obj.offsetParent) {
		while (obj.offsetParent && obj != offsetObj) {
			curPos.x += obj.offsetLeft - obj.scrollLeft;
			curPos.y += obj.offsetTop - obj.scrollTop;
			obj = obj.offsetParent;
		}
	} else if (obj.x) {
		curPos.x += obj.offsetLeft - obj.scrollLeft;
		curPos.y += obj.offsetTop - obj.scrollTop;
	}
	return curPos;
}

在FF 3.6里实验，只需这么一句：obj.getBoundingClientRect()，可爱的firebug输出如下信息：

{
	bottom:289,
	height:17,
	left:534,
	right:569,
	top:272,
	width:35,
	constructor:ClientRect{...}
}

长宽高等信息全齐活啦。

1. 除非特殊情况，总是建议把CSS在文件头部引用，而在文件尾部引用javaScript，这样做的原因是：防止页面的二次渲染（如果将CSS文件放在底部，页面将按浏览器的默认样式渲染一次，然后在载入完CSS后按CSS样式表重新渲染一次），以及在不影响表现的前提下，尽可能的加快页面载入速度（因为绝大多数的javaScript都是要与页面相关的，在HTML没有载入的情况下，你提前载入javaScript也没有什么意义）。
2. 总是为图片指定宽度及高度，同样，这也是为了避免二次渲染，当不为图片指定宽高度时，浏览器将不为图片分配一个空间，在图片载入前，图片之后的内容将挤到图片所在的位置，在图片载入后，图片之后的元素将被挤下去（二次渲染了），同时，这样做也将有利于在图片服务器当机、或者采用了CDN网络、或者网速太慢因而图片无法载入的情况下保持页面的正常布局，而不是任意内容挤到一团。
3. 总是为图片指定alt属性，这是基于SEO及慢速网络两种情况下的考虑。
4. 如果一个form内有一个大大的漂亮的图片式提交按纽，请务必使用
   
   而不是：
   
5. 前一规则在图片无法载入，或者javaScript被禁用，CSS样式表无法载入这三种情况下都能良好工作，而后一种方式在图片无法载入或者javaScript被禁用时都将无法工作，这也符合我们将讲到的第6点。
6. 请记住：所谓浏览器兼容并不是指在所有浏览器上外观保持一致（比如，你如何让你的页面在手机和电脑屏幕上保持一致？这显然难度太大），而是尽可能在所有浏览器上保持一致的可访问性，其次才是外观尽可能的一致。（参见#10）

2. 为不同设备指定不同的样式表

考虑到页面可能被打印，请为你link的CSS文件指定media属性，如下：

如上的两条CSS规则，basic.css将被用于电脑屏幕上的渲染，而print.css则将被在打印时被调用，即使考虑到你没有时间来单独写一个print.css规则，也请你为basic.css指定media=”screen”，而不是media=”all”，因为这样在打印时将调用浏览器的默认打印样式，而不是无意义的在纸上打印出一堆不可点击的按纽及图案。

另外一个我们可能用到的media属性是：handheld，它将指定一个用于手持设备上的样式表（PDA及各种智能手机）

3. 采用Firefox + Firebug来开发你的代码吧

1. 一般情况下，总是建议你先在Firefox里把你的样式及结构调整到符合设计稿的状态后，再来做IE等其它浏览器下的兼容，因为Firefox更符合web标准，这将节省你的开发时间。
2. Firebug是我用得最多的开发工具，作为一名前端工程师，你所要接触到的大部分工作都能在其下完成，它一般情况下如下图所示样式
   
   关于Firebug，你可以在下列网址得到帮助：
   http://getfirebug.com/ firebug官方网站
   http://www.ooso.net/archives/294 网友写的中文教程

4. 常用的Firefox插件介绍

1. Firebug 必备利器，瑞士军刀级
2. CSS View 有漂亮的UI及方便的操作，但有了Firebug后，它也就成了个玩具
3. CSS Usage 能分析出具体哪条CSS没有被用到并以不同颜色标识，后期优化利器
4. Web Developer 禁用Cookie、CSS、JS、编辑表单、验证页面等等，同样为瑞士军刀级
5. ColorZilla 对页面中任意位置取色，结果为RGB或16进制等各种格式
6. JS View 下载页面中的JS文件
7. Page speed Google出品的用于前端性能优化的工具，有点类似于YSLow
8. User Agent Switcher 切换用户代理，通过发送不同的HTTP头来模拟不同的设备，如iPhone
9. YSLow Yahoo推出的前端性能优化工具，能分析html结构，CSS，JS等，推荐！

5. 另外一些好工具

1. IETEST 同时模拟多个IE版本（IE6/7/8），但要注意，它的行为与真实的情况可能有出入，如果有些问题你不确定，那么还是推荐你采用虚拟机+原版IE的方式
2. mergeCSS 一个AIR工具，用于压缩CSS（去掉空格，换行符及缩进）
3. bg2css 用于生成css sprites
4. Expression Web3 微软官方出品的多浏览器模拟工具，可以模拟IE6/7/8，速度有点慢，同时它可以打开你的原始设计稿，在设计稿和HTML之间做出像素级的对比。

附捐款支付宝记录：

探望白血病儿童马粒之

作者： 阮一峰

日期： 2010年7月28日

两周前，我收到一封求救信。

一个名叫马书柱的陌生人，请求我帮助他的儿子马粒之。他说，孩子得了白血病，需要30万元的医疗费。

于是，我就在网志上提了一句，欢迎大家向他捐款。结果，有人就说，这会不会是骗子？……我只好承诺亲自去看一看。

============================

上周末，我从厦门回到上海，立刻就与马书柱取得联系，约在今天（7月27日）下午到医院探望马粒之。

1.

吃过午饭，我来到东方路上的上海儿童医学中心。

2.

这幢大楼就是住院部。

3.

三楼的血液科病房。

4.

找到3005室。

5.

这个病房一共住6个小孩，全部都是白血病患者。马粒之的床在最里面，拉着围布的那一张。

6.

病床前的牌子写着"马粒之 4岁 自费病人"，下面是用药单，记录了今天要用的药。我数了一下，一共9种。

7.

这时候，他妈妈正在给他喂饭。昨天晚上，小家伙刚刚退烧，现在精神还不错。

8.

我原以为，马粒之这次住院是因为化疗，但是一问才知道不是，化疗是在门诊完成的。

六天前，马粒之突发高烧，所以才住进医院。此后的六天，一直高烧不退，都快把他父母急死了。

9.

马书柱告诉我，由于各种药物都无法退烧，医生怀疑是真菌感染，就让他们去买一种"丽福康"注射液。每盒只有0.1g药粉，售价却高达450元，马书柱买了6盒，总计2700元。

我回家后网上一查，发现"丽福康"号称是"最先进的抗真菌药"。我就不解了，真的有必要使用这么高级的药吗？便宜的抗真菌药，市场上有很多啊！主治医生明知病人没钱，还推荐这么贵的药，但愿他/她确实有合理的理由。……好在使用了"丽福康"，马粒之今天确实退烧了。

10.

马粒之还在输血。这样的一袋血，他每周要输1~2袋。他的血细胞，已经失去了正常的造血功能。

我问马书柱，这一袋血多少钱？马书柱说，血浆280元，检查费260元，所以每次输血总共要花费540元。我问，检查费是指什么项目？马书柱说，主要是查肝功能。这下我震惊了，这个医院居然每周查一次肝功能！

防止乙肝病毒输血传染，这是院方的责任，怎么能推给患者呢？马粒之只在你这里用血，你居然还要他出钱，检查你有没有把病毒传染给他，这是何等霸道的收费啊？……何况肝功能是一个比较稳定的指标，每星期查一次，根本没必要。

11.

我为马书柱全家拍了一张合影。然后，我就开始了解他们这个家庭的概况。

马书柱是河南省南阳市唐河县人，1976年11月生。高中毕业后，在南阳技校上了40天的电脑培训班。（我问，培训内容是什么？马书柱答，打字。）2000年，他去深圳打工，此后还去过广州和东莞，主要负责商场POS机的系统管理。2003年，他结婚。2005年9月，马粒之出生。

12.

2009年5月30日，马粒之出现瘀血症状。南阳县医院检查后，认为是白血病。家里不相信，到郑州复查，结论依然是白血病。

抱着对大城市医院的信任，马书柱带着儿子来到上海。6月6日抵达，6月12日就开始第一轮化疗。服用药物后，病情立刻得到缓解。2010年2月底，十轮化疗全部结束，医生对马书柱说，如果一年内不复发，马粒之的白血病就算治愈了。

不幸的是，停药后三个月，2010年5月8日，马粒之出现复发症状。他不得不再一次住进了医院，开始了第十一次化疗。医生说，复发后的化疗有效率只有30%，你们要做好思想准备。不幸中的大幸是，这一次化疗依然有效，马粒之的病情再一次缓解了。

但是此时，马书柱已经无法承受经济压力了。单单是第十一次化疗的住院费用，就超过2万元。而从2009年5月至今，为孩子治病的所有已经发生的支出，合计超过21万元。

马书柱夫妇不仅花光了所有的积蓄，还欠下了一屁股债，亲友都已经借遍了，已经到了打电话对方都不接的地步。面对未来巨额的医药费，他们一筹莫展，只有支出没有收入的生活可怎么办？

13.

马书柱每个月都去献血。上海市血液中心规定，捐献血小板的间隔不得少于28天，他就每隔28天去一次血液中心。

根据规定，献血者本人及其家属，可以等量用血。因此，马书柱这样献血，可以减少一些马粒之输血的费用。另外，献血者可以优先用血，这对马粒之也有好处。如果医院当天来了三包血浆，而有五个小孩需要用血，马粒之就不至于输不上血。

14.

献血的时候，别人都献一份，马书柱每次都献双份。那里的医生都已经认识他了，劝他不要这样，但是马书柱坚持抽满两份血才离开。

我问马书柱，你每天的伙食费是多少？他说，不超过5元，有时甚至只花2元，就在医院食堂吃几个白馒头。

15.

由于病情复发，马粒之的白血病已经不太可能通过化疗治愈了，最好情况下，化疗也只能缓解病情。只有骨髓移植，才能挽救生命。而且越早移植越好，因为化疗时间越长，对内脏器官的损伤越大，移植后产生的排斥反应也越大，移植的成功率就越小。

骨髓移植的第一步，是向中华骨髓库申请骨髓检验，检验费2800元。结果就是下面这张表。

16.

得到骨髓检验结果后，中华骨髓库初步筛选出符合条件的5位志愿者，进行高分辨血样复查，以确定是否真的符合移植条件。

每位志愿者的高分辨血样复查费是3600元，由申请骨髓移植者承担。马书柱一共付了两份复查费（也就是7200元），对两位志愿者进行了复查。结果，其中有一人确定可以为马粒之提供骨髓。

17.

上周五，马书柱又向中华骨髓库交纳了20000元的骨髓采集费，包括捐献者误工费5000元、采集前的体检费、采集后的体检费1500元、捐献者及运送造血干细胞人员的交通食宿费12500元。

18.

这就是说，骨髓移植还没有开始前，马书柱已经为此支付了前期费用2800+3600*2+20000=3万元。

据估计，骨髓移植的手术费加药物费需要30万。医院的规定是，手术前必须交齐20万元，否则不能进入隔离仓。没钱的话，即使你有配型成功的骨髓，也不给你动手术。我完全相信，这条规定会得到严格执行，因为马书柱告诉我，这次马粒之高烧住院前，他们预交了5000元住院费，结果5天就花完了。第六天，医院就对马粒之停药了，告诉他们必须再预交10000元，否则不给恢复用药。

我问马书柱，30万元骨髓移植费，你现在凑了多少？马书柱说，几乎一点都没有。我说，那怎么办？他说，实在不行，我就去求打工时的老板，愿意为他打工一辈子。

我又狠下心问，如果不进行骨髓移植，会怎么样？马书柱说，我们知道其他生这个病的小孩，最后死时很痛苦，我们实在不忍心马粒之这样。

19.

接着，我提出到马书柱租的房子去看看。那是一个老式住宅区，距离医院步行15分钟。

20.

他们租的屋子在5楼，楼道非常破旧。

21.

房子就是简单的一室户。外间是很简陋的煤卫，里间是一间15平米左右的卧室。没有家具，马书柱说，桌椅都是好心的邻居给的，还给了一辆破自行车，现在就是他们全家主要的交通工具。

这间屋子的租金是1700元/月。

22.

有一个14寸的彩色电视机，马书柱说，那是献血时认识的好心人给的。

23.

屋里还有一个有线电视Modem。马书柱说，那是400元的二手货，其中包括3个月的宽带上网费。

24.

告别马书柱，我回到大街上，心里不由泛起无限感慨。我从没料到，居然有一天，我会为一个陌生人，感到如此烦恼。

救助像马粒之这样的重病儿童，是政治家的责任，不是我的责任。我只是一个普通人，收入不高，没有能力当慈善家。新闻报道里说，全国每年白血病儿童新增1.6~2万人，可是只有1200~1500人得到正规诊治。就算我能帮得了一个两个，可是剩下的还有千千万万个，以后要是不断有人写信向我求助，我该怎么办？

一直以来，我都很低调，躲在图书馆里，不想直接面对这个社会最苦难的那些人和事，可是这样的事情偏偏找上门。时代不放过你，逼着你表态，你到底有一颗怎样的良心。政治家可以不负责任，可以不要良心，但是我做不到，无法扭过头去，如果我再装作没有看见，也许马粒之真的就活不下去了。看着他就在我面前，机灵地爬来爬去，真的是于心何忍。

25.

马粒之小朋友，叔叔没本事，不知道怎样才能救你。

30万元的手术费，在这个城市里，连一间没人要住的亭子间都买不到。可是，你很可能就会因为搞不到这点钱，而痛苦地死去。

也许有些人会对你说，很不幸，这就是你的命运，谁叫你生在中国，谁叫你这么穷。是的，也许我也会狠着心这么说，痛苦地承认这是实话。但是，不，不是现在。现在，让我们暂时忘记这些话，假装说服自己会有奇迹发生。

迄今为止第一次，我希望我的网志能有更大的影响力，希望有更多的人，能够读到这篇文章。如果你读到了，希望你能做点什么，哪怕只是转贴一下。

============================

马书柱的手机13671623478，他现租住于上海市浦东新区南泉路1111弄峨山小区20号503室。愿意上门看望的朋友，欢迎与他联系。

捐款帐户：

* 户名：马粒之
开户行：中国建设银行股分有限公司上海六里支行
账号：1214 8799 8011 1070 196

* 户名：马粒之
开户行：中国工商银行上海南泉路支行
账号：622202 1001068165205

* 户名：马粒之
开户行：中国邮政储蓄银行上海市临沂储蓄所
账号：6029 2325 0213 4793 84

* 户名：马粒之
开户行:农行上海浦建路储蓄所
账号：622848 0031037264012

* 户名：马粒之
开户行:上海银行蓝村支行
账号：300845620210015

* 支付宝账户： 68280388@QQ.COM （实名：马书柱）

* 财付通账户：68280388@QQ.COM （实名：马书柱）

其他情况参见网站：http://www.malizhi.com 。

（完）

首先，我们需要一个构造函数，以生成伪装的select样式。

我们将其命名为BB.select，然后我们需要四个方法：

init()        负责生成基本的HTML结构，绑定事件，初始化整个select的行为。
click()      模拟点击select元素时弹出列表的行为
liClick()    模拟option上的点击事件，并返回值到真正的select元素内
hideList() options列表弹出时，用户在除options以外的地方点击鼠标时，则options列表要收回
在最底部我们还在document对像上绑定了click和scroll事件，用于检测并激活hideList()的行为。

基本结构如下：

var BB = {};
BB.select = function(oObj){
	this.oObj = oObj;               //select
	this.width = oObj.offsetWidth;  //select宽度
	this.tObjText;                  //select中显示的文字
	this.relUL;                     //与select相关联的ulList列表id
	var that = this;
	if (typeof BB.select._initialized == 'undefined') {

		BB.select.prototype.init = function(){
			//初始化模拟出来的ul列表，绑定click事件
		};

		BB.select.prototype.click = function(){
			//模拟select的点击事件
		};

		BB.select.prototype.liClick = function(){
			//列表项的点击事件，返回值到select中
		};

		BB.select.prototype.hideList = function(e){
			//在列表外位置点击或者滚动页面时，隐藏列表
		};

		(function(){
			//在document对像上绑定mousedown和scroll事件，以实现点击其它区域时select消失，只需绑定一次
			BB.EVENT.addEvent('mousedown', that.hideList);
			BB.EVENT.addEvent('scroll', that.hideList);
		})();

		BB.select._initialized = 1;
	}
	this.init();
}

先是init()函数：

为了生成下图的这种结构：

我们并不需要在每个select外面手工的写入，我们只需要在init()函数里加入如下代码：

var nSelectIndex = 0;
for (var i = this.oObj.options.length - 1; i >= 0; i--) {
	if (this.oObj.options[i].selected) {
		nSelectIndex = i;
	}
}
this.tObjText = this.oObj.options[nSelectIndex].innerHTML;
//对应处于选中状态的option里的文字内容

//外层套入两个span模拟select的外观效果
var selectIn, selectOut, textNode;
selectIn = document.createElement('span');
selectOut = document.createElement('span');
textNode = document.createElement('span');
selectOut.className = 'selectOut';
selectIn.className = 'selectIn';
selectIn.style.width = this.width - 25 + 'px';
//根据select框的宽度对应生成
selectIn.style.padding = '0 24px 0 6px';
textNode.innerHTML = this.tObjText;
selectIn.appendChild(textNode);
selectOut.appendChild(selectIn);
this.oObj.parentNode.insertBefore(selectOut, this.oObj);
selectIn.appendChild(this.oObj);
this.oObj.className = 'noShow';

接下来，我们将根据select对应的options对像的内容生成一ul>li列表来模拟options

//生成一个名为oObj.id + 'List'的ul列表
var oDiv = document.createElement('div');
oDiv.id = 'ulListFor' + this.oObj.id;
oDiv.className = 'selectUlList';
oDiv.style.width = this.width - 5 + 'px';
oDiv.style.height = '130px';

var oUl = document.createElement('ul');
var nOptionLength = oObj.options.length;
for (var i = 0; i < nOptionLength; i++) {
	var oLi = document.createElement('li');
	oLi.setAttribute("onmouseover", "this.className = 'active'");
	oLi.setAttribute("onmouseout", "this.className = ''");
	//oLi.setAttribute('value', oObj.options[i].value);
	oLi.appendChild(document.createTextNode(this.oObj.options[i].innerHTML));
	oUl.appendChild(oLi);
	BTO.EVENT.addEvent('click', this.liClick(), oLi);
}
oDiv.appendChild(oUl);

我们再将此ul列表写入到对应select的位置，并在selectOut元素上绑定click()事件

//追加此ulList到页面中
selectOut.parentNode.appendChild(oDiv);
this.relUL = oDiv; //与select相关联的ulList列表id
//为其绑定onclick事件
BTO.EVENT.addEvent('click', this.click(), selectOut);

//在document对像上绑定mousedown和scroll事件，以实现点击其它区域时select消失
if (!this.onceEvent) {
	BTO.EVENT.addEvent('mousedown', that.hideList);
	BTO.EVENT.addEvent('scroll', that.hideList);
}

而click事件则非常简单：

1. 根据当前点击的selectOut算出坐标
2. 把对应的ul列表显示在对应的位置

BB.select.prototype.click = function(){
	//模拟select的点击事件
	var that = this;
	return function(){
		if (that.relUL.style.display == '') {
			var absOffset = getAbsPos(that.oObj);
			//到到绝对坐标
			that.relUL.style.top = absOffset.y + 'px';
			that.relUL.style.left = absOffset.x - 5 + 'px';
			that.relUL.style.zIndex = '99';
			that.relUL.style.display = 'block';
		} else {
			that.relUL.style.display = '';
		}
	}
};

而在li的点击事件，则需要如下做：

1. 遍历与ul列表对应的select.options对像
2. 找到与之相等的option
3. 将此option标记为已选中
4. 将其它option的已选中状态去掉（因option可以存在多选）
5. 更新显示的文字
6. 隐藏ul列表

BB.select.prototype.liClick = function(){
    //列表项的点击事件，返回值到select中
    var that = this;
    return function(e){
        var e = e || window.event;
        var obj = e.srcElement || e.target;

        var oOption = that.oObj.options;
        for (var i = oOption.length - 1; i >= 0; i--) {
            if (obj.innerHTML == oOption[i].innerHTML) {
                //设置选中项
                oOption[i].setAttribute('selected', 1);
                //设置selectIn中的文字内容
                obj.innerHTML = that.oObj.parentNode.getElementsByTagName('span')[0].innerHTML = oOption[i].innerHTML;
                that.relUL.style.display = '';
            } else {
                oOption[i].removeAttribute('selected');
            }
        }
    }
};

最后的事件是hideList，它的逻辑也很简单：

1. 检测document对像内的所有click和scroll事件
2. 查找其所有父级对像
3. 如果所有父级对像的class均不为selectUlList（说明是在事件ul列表外部产生）
4. 隐藏所有class为selectUlList的列表

BB.select.prototype.hideList = function(e){
    //在列表外位置点击或者滚动页面时，隐藏列表
    var e = e || window.event;
    var obj = e.srcElement || e.target;

    var clickInner = 0; //是否点击在内部
    if (obj.parentNode) {
        while (obj.parentNode) {
            if (obj.className == 'selectUlList') {
                clickInner = 1;
                break;
            }
            obj = obj.parentNode;
        }
    }
    if (!clickInner) {
        if (document.getElementsByClassName) {
            //DOM5 方法（ff/other）
            var aDiv = document.getElementsByClassName('selectUlList');
            for (var i = aDiv.length - 1; i >= 0; i--) {
                aDiv[i].style.display = '';
            }
        } else {
            //ie
            var aDiv = document.getElementsByTagName('div');
            for (var i = aDiv.length - 1; i >= 0; i--) {
                if (aDiv[i].id.indexOf('ulListFor') != -1) {
                    aDiv[i].style.display = '';
                }
            }
        }
    }
};

代码已经基本完成，我们来看一下所有的代码是什么样子。

HTML部分:

BB.select = function(oObj){
    this.oObj = oObj; 					//select
    this.width = oObj.offsetWidth; 		//select宽度
    this.tObjText; 						//select中显示的文字
    this.relUL; 						//与select相关联的ulList列表id
    var that = this;
    if (typeof BB.select._initialized == 'undefined') {

        BB.select.prototype.init = function(){
            var nSelectIndex = 0;
            for (var i = this.oObj.options.length - 1; i >= 0; i--) {
                if (this.oObj.options[i].selected) {
                    nSelectIndex = i;
                }
            }
            this.tObjText = this.oObj.options[nSelectIndex].innerHTML;

            //外层套入两个span模拟select的外观效果
            var selectIn, selectOut, textNode;
            selectIn = document.createElement('span');
            selectOut = document.createElement('span');
            textNode = document.createElement('span');
            selectOut.className = 'selectOut';
            selectIn.className = 'selectIn';
            selectIn.style.width = this.width - 25 + 'px';
            selectIn.style.padding = '0 24px 0 6px';
            textNode.innerHTML = this.tObjText;
            selectIn.appendChild(textNode);
            selectOut.appendChild(selectIn);
            this.oObj.parentNode.insertBefore(selectOut, this.oObj);
            selectIn.appendChild(this.oObj);
            this.oObj.className = 'noShow';
            //oObj.replaceNode(selectIn.appendChild(oObj));
            //生成一个名为oObj.id + 'List'的ul列表
            var oDiv = document.createElement('div');
            oDiv.id = 'ulListFor' + this.oObj.id;
            oDiv.className = 'selectUlList';
            oDiv.style.width = this.width - 5 + 'px';
            oDiv.style.height = '130px';

            var oUl = document.createElement('ul');
            var nOptionLength = oObj.options.length;
            for (var i = 0; i < nOptionLength; i++) {
                var oLi = document.createElement('li');
                oLi.setAttribute("onmouseover", "this.className = 'active'");
                oLi.setAttribute("onmouseout", "this.className = ''");
                //oLi.setAttribute('value', oObj.options[i].value);
                oLi.appendChild(document.createTextNode(this.oObj.options[i].innerHTML));
                oUl.appendChild(oLi);
                BTO.EVENT.addEvent('click', this.liClick(), oLi);
            }
            oDiv.appendChild(oUl);

            //追加此ulList到页面中
            selectOut.parentNode.appendChild(oDiv);
            this.relUL = oDiv; //与select相关联的ulList列表id
            //为其绑定onclick事件
            BTO.EVENT.addEvent('click', this.click(), selectOut);

            //在document对像上绑定mousedown和scroll事件，以实现点击其它区域时select消失
            if (!this.onceEvent) {
                BTO.EVENT.addEvent('mousedown', that.hideList);
                BTO.EVENT.addEvent('scroll', that.hideList);
            }
        };

        BB.select.prototype.click = function(){
            //模拟select的点击事件
            var that = this;
            return function(){
                if (that.relUL.style.display == '') {
                    var absOffset = getAbsPos(that.oObj);
                    that.relUL.style.top = absOffset.y + 'px';
                    that.relUL.style.left = absOffset.x - 5 + 'px';
                    that.relUL.style.zIndex = '99';
                    that.relUL.style.display = 'block';
                } else {
                    that.relUL.style.display = '';
                }
            }
        };

        BB.select.prototype.liClick = function(){
            //列表项的点击事件，返回值到select中
            var that = this;
            return function(e){
                var e = e || window.event;
                var obj = e.srcElement || e.target;

                var oOption = that.oObj.options;
                for (var i = oOption.length - 1; i >= 0; i--) {
                    if (obj.innerHTML == oOption[i].innerHTML) {
                        //设置选中项
                        oOption[i].setAttribute('selected', 1);
                        //设置selectIn中的文字内容
                        obj.innerHTML = that.oObj.parentNode.getElementsByTagName('span')[0].innerHTML = oOption[i].innerHTML;
                        that.relUL.style.display = '';
                    } else {
                        oOption[i].removeAttribute('selected');
                    }
                }
            }
        };

        BB.select.prototype.hideList = function(e){
            //在列表外位置点击或者滚动页面时，隐藏列表
            var e = e || window.event;
            var obj = e.srcElement || e.target;

            var clickInner = 0; //是否点击在内部
            if (obj.parentNode) {
                while (obj.parentNode) {
                    if (obj.className == 'selectUlList') {
                        clickInner = 1;
                        break;
                    }
                    obj = obj.parentNode;
                }
            }
            if (!clickInner) {
                if (document.getElementsByClassName) {
                    //DOM5 方法（ff/other）
                    var aDiv = document.getElementsByClassName('selectUlList');
                    for (var i = aDiv.length - 1; i >= 0; i--) {
                        aDiv[i].style.display = '';
                    }
                } else {
                    //ie
                    var aDiv = document.getElementsByTagName('div');
                    for (var i = aDiv.length - 1; i >= 0; i--) {
                        if (aDiv[i].id.indexOf('ulListFor') != -1) {
                            aDiv[i].style.display = '';
                        }
                    }
                }
            }
        };

        (function(){
            //在document对像上绑定mousedown和scroll事件，以实现点击其它区域时select消失，只需绑定一次
            BTO.EVENT.addEvent('mousedown', that.hideList);
            BTO.EVENT.addEvent('scroll', that.hideList);
        })();

        BB.select._initialized = 1;
    }
    this.init();
}

我们只需这样调用：

new BB.select($('selectId'));

这就可以生成一个有着漂亮外观的select样式列表了。

您可以在这儿下载或预览效果。

思考：虽然我们的效果达到了，但是我们注意到hideList()、click()、liClick()方法都暴露在外，有没有办法将其变成私有方法呢？提示是：闭包！

首先我们构建css部分，思路是在select外层套入两个span构成滑动门结构，然后隐藏掉select元素（不能直接display:none，否则两个span元素不能被撑大，你只能得到一个小小的圆框框），以下为css结构

.selectOut{
	cursor:pointer;
	display:inline-block !important;
	_display:inline !important;
	zoom:1;
	height:24px;
	margin-left:3px;
	background:url(images/elem/selRight.gif) right 0 no-repeat}
.selectOut .selectIn{
	height:24px;
	position:relative;
	*position:inherit;
	_position:static;
	_width:0;
	overflow:visible;
	margin-left:-2px;
	display:inline-block;
	background:url(images/elem/selLeft.gif) 0 0 no-repeat;
	line-height:22px;
	color:#111111;
	text-align:left;}
	.selectOut .selectIn select{
		display:inline-block;
		_display:inline;
		height:24px;
        font-family:Arial;
        padding-right:10px;
		visibility:hidden;
		font-family:Arial;}
	.selectOut .selectIn select.noShow{
		display:none;
	}

.selectUlList{
	display:none;
	position:absolute;
	border:1px solid #6cc;
	overflow-x:hidde;
	overflow-y:scroll;
	background-color:#F7F7F7;
	color:#87946A;
	height:140px;
	padding:2px;
}
.selectUlList ul{
	text-align:left;
	list-style:none;
	padding:0;
	margin:0;}
	.selectUlList ul li{
		padding-left:2px;
		cursor:pointer;
		height:20px;
		line-height:20px;
	}
	.selectUlList ul li.active{
		background-color:#CEF2F2;
		color:#033;}

现在select元素的HTML结构如下：

外层的selectOut构成了右边的圆角框，内层的selectIn构成了左边的圆角框，框的大小会随着select自身的长度带动缩放，外观上接近完美啦。

附两个背景图片下载(直接点击下面两个图片)

注意，此时select中的字符内容还没显示出来，我们将在第二节中为其完其需要的js，并使其能正常运作。

var BB = {};
BB.AJAX = function(){
    var oAJAX = {};
    if (typeof XMLHttpRequest == 'undefined' && window.ActiveXObject) {
        var aSignatures = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
        var nSignaturesLength = arrSignatures.length;
        for (var i = 0; i < nSignaturesLength; i++) {
            try {
                oAJAX = new ActiveXObject(aSignatures[i]);
            }
            catch (oError) {
                //ignore
            }
        }
    } else if (XMLHttpRequest) {
        oAJAX = new XMLHttpRequest();
    } else {
        //ajax on this system is not support
    }
    if (typeof oAJAX._initialized == 'undefined') {
        oAJAX.get = function(getArguments){
            if (getArguments.data) {
                //对要传送的数据附加到url上
                getArguments.url += url.indexOf('?') == -1 ? '?' : '&';
                for (var i in getArguments.data) {
                    url += encodeURIComponent(i) + '=' + encodeURIComponent(getArguments.data[i]) + '&';
                }
                getArguments.url.length--;
            }
            this.open('get', getArguments.url, getArguments.sync || 0);
            if (getArguments.callback) {
                //绑定回调事件
                this.onreadystatechange = function(){
                    if (this.readyState == 4) {
                        getArguments.callback();
                    }
                }
            }
            this.send(null);
        };
        oAJAX.post = function(url, data, callback){

        };
        oAJAX._initialized = 1;
    }
    return oAJAX;
}();

调用方式如下：

BB.AJAX.get({
    url: 'templates/' + oTemplates['action'] + '.js',
       sync: 1,
       callback: function(){
           //console.log('templates is load');
       }
});

PS：最近试着写点OOP的JS……嗯，其实JS也是可以很优雅的

一个很简单的2级DOM事件处理器，用法如下：

BB.EVENT.addEvent('keyup',function(){
  this.value = this.value.replace(/\D/,'');
},document.getElementById('age'));

需要注意的是：

1. 在上面代码中的this，指向的是匿名函数的运行时的this，而非BB对象。
2. keyup前面不要加’on’
3. 如果省略第三个参数“document.getElementById(‘age’)” ,则事件将添加到document对像上
4. 如果你需要对IE 5.5或更低的浏览器保持兼容，那你需要对BB.EVENT.supportDOM == -1的情况做进一步处理：先将老事件保存，添加你的新事件，在你的新事件运行完后，再处理老事件……老实说，在IE 6都不足10%的环境下，真无必要！