YY in Limbo 混沌海狂想

刘谦手穿桌子魔术完全揭秘

dexter_yy — Mon, 15 Feb 2010 22:24:44 +0800

先声明，如果满足好奇心和启发智慧给你带来的快乐，不能超过魔术的惊奇效果带来的快乐，请不要继续看此文～

看了CCAV的春晚重播，最后那个手穿桌子的魔术我已经完全弄懂了～

桌子上那四只白瓷茶杯是第一个关键要素，它们很可疑：1，圆桌周围那些观众根本不会喝茶，为什么要放茶杯呢？2，为什么要用老式的白瓷杯，而不用刘谦面前那种透明玻璃杯？（装点果汁还可以做广告）。因为它们其实是障眼法的组成部分，刘谦左边（观众的右边）的杯子底下，其实掩盖着一个“洞”（节目开始的时候，那个黑桌布跟它放在一起）

桌子本身是第二个关键要素，这张桌子是很少见的圆环形，让观众围在周围其实只是托词，真实目的是让桌子玻璃可以隐蔽的移动（圆环的自转），把右边的那个洞移到刘谦面前。这里有一个难点：移动玻璃的时候也会拖动桌上放的其他东西（比如杯子）。所以他们做了双层的玻璃，刘谦面前那一段圆环只有一层玻璃，而且是下层的，洞就在这一层，旋转的也是这一层，而其他人面前有两层，杯子之类的东西都放在上层。

刘谦让汇源老板拿三只硬币放在桌下，是第三个关键要素，重看这一段节目，在汇源老板把手伸到桌下的时候，会发现镜头拉近来了一个特写，在镜头拉近之前，刘谦面前的玻璃在表演过几个节目之后其实已经很脏了，可以明显的看到有一些污渍的反光跟周围的反光不同，而在“没洗手”的那个特写镜头之后，会看到那些污渍已经没了！因为正是在这个时候，玻璃被提前旋转了。而且旋转玻璃的人就是刘谦正后方那个猥琐男人……

从镜头移回来开始，刘谦的左手就一直遮掩着桌上一个位置，接下来他开始跟董卿扯淡，用布擦桌子，把观众的视线吸引到他擦桌子的右手，而左手始终保持在那个位置没动过，因为左手下面正是刚才移过来的那个洞，然后就开始表演手穿玻璃了，注意他的左手是直接平移到中间的，实际上是把洞移到了中间

总结：

永远不要相信现场观众不是托。
那些看似无意的动作，摆设和插科打诨其实很可能是关键。
魔术师总是试图操纵你的眼睛，只要不看魔术师想让你看的那个方向，你就有可能识破障眼法～

以国家之名

dexter_yy — Sun, 10 Jan 2010 23:51:45 +0800

从我的Gmail里翻出的记录：

Mon, Feb 4, 2008 at 5:16 AM

subject: 注册信息

尊敬的用户，您的用户信息注册成功！用户名:dexter_yy

Thu, Feb 14, 2008 at 2:14 AM

subject: ICP备案审核通知（审核拒绝）

尊敬的用户:dexter_yy，很遗憾的通知您，您的ICP备案申请不能通过审核，拒绝原因是：您所备案的网站：请确认网站服务内容一栏填写是否准确.
接入商的核实意见：
(1) 信息不正确请重新核对准确接入商

Mon, Feb 23, 2009 at 8:36 PM

subject: 关于网站备案用户执行“找回密码”操作后新密码的通知

尊敬的用户：dexter_yy，您于2009-02-23 20:33:34使用了备案用户找回密码功能，您找回的密码是：[马赛克]。请慎重保管注册密码！工业和信息化部网站备案系统

Wed, Mar 4, 2009 at 1:54 PM

subject: 关于ICP备案信息不符合备案要求退回修正的通知

尊敬的用户，很遗憾的通知您，您的ICP备案申请(limboy.com)，经[上海市通信管理局2]审核，不符合备案要求，现退回修改，原因请登陆系统查询。

Sat, Dec 12, 2009 at 2:59 PM

subject: 关于网站备案用户执行“找回密码”操作后新密码的通知

尊敬的用户：dexter_yy，您于2009-12-12 14:48:31使用了备案用户找回密码功能，您找回的密码是：XXXXXX。请慎重保管注册密码！工业和信息化部网站备案系统

Wed, Jan 6, 2010 at 10:45 AM

subject: 关于ICP备案申请审核通过的通知

尊敬的用户：您的ICP备案申请已通过审核,备案/许可证编号为: 沪ICP备10000943号，审核通过日期：2010-01-06。

撒花～

本来我准备只贴出以上这些邮件内容，然后就结束本文点submit按钮发POST请求……但是这种把思考的工作托付给读者的写法，我还是有些不太放心，我担心这会让人误解我的意图，以为我是在嘲讽帝国衙门的政策法规和办事效率，不，如果这是你的理解，你错了，我是在嘲讽自己。

我的blog被关闭了大概有一两个月，在这段时间里，有很多人来问我，我都没回应，因为实在没什么好说的，没有黑幕，没有冤情，没有河蟹。我有充足的时间（早在一两年前我就知道不备案的后果），我有足够的帮助（盘古有专人为客户的备案提供支持），我有相对宽松的环境（直到现在，工信部仍然不会在处理申请的时候去审查网站的内容，甚至都不在乎网站是否存在，你只要去申请，只要你提供的信息不会对他们的工作流程造成困扰，他们就给你发ICP许可证），但我却把早就应该完成的备案，一直拖延到现在。都是我自己的错。

也许有人会说：你到底是真傻逼还是在装逼，错的首先是政府啊，你的blog被关闭，是因为现在这种荒谬愚蠢的国家政策，是因为统治阶层不懂得也不喜欢互联网的开放精神，是因为伟光正要控制信息，是因为工信部的备案系统太难用，是因为公务员的办事效率太低……总之，你怎么能不抱怨呢，你这不是麻木顺从的劣根性么

我会从土豆网里搜出一个视频来作为回答，不是什么经典大片，而是TV动画，如果不是宅男宅女应该就没看过——《地狱少女》第二部的第15话，标题是“以國家之名的墮落”，在这集故事里，女主角百合子的父亲是一个loser，家境穷困，生活很艰辛，他认为一切不幸的根源都是日本当时的首相大泉太一郎（这个名字应该不用注解罢），把全部时间投入到基层的助选活动中，支持另一个首相候选人，为此还不断借债，把自家的小工厂扔给妻子一人支撑。百合子在故事开始的时候就求助于地狱少女，希望把大泉首相立刻送进地狱，因为在这种家庭环境的影响下，她也认为只要没有大泉，人民生活就会幸福。但是后来，她的母亲劳累过度病倒了，在病床上，母亲说出了朴实的真相：

母亲：“不工作就不能生存……”
百合子：“果然这个国家的政治体制很异常！竟然要让人工作到弄跨身体才能生存！这都是大泉政府的错！”
母亲：“不是这样的……”
百合子：“什么不是啊，大泉首相上台前，我上小学的那个时候，生活不是还很轻松吗？！”
母亲：“更痛苦的时候也遇到过。可那时候一家人一起克服过来了，挥汗如雨的工作”。
百合子：“诶？”

虽然大泉的政策确实对百合子家工厂的衰败负有责任，但是导致境况越来越差的却是自己，不幸的根源是自己。自己的生活和自己的事业，最终还是需要自己的努力工作来改善，百合子的父亲把希望完全寄托在大环境的剧变上，但是大环境却不可能永远满足个人愿望，因为社会永远都由各种少数派和多数派拼凑而成，时代永远都像洪流一样让人身不由己的“前进”，正如比古清十郎说的那样：“时代和人心都有弊病，无论你有再强大的力量，也阻止不了时代的洪流。现今如此，今后亦然”。

最后，即使大环境真的剧变了，就能立刻体验到改善么？说到这里我想到了台湾的“马上就好”，想到了美国的“Change Has Come To America”，想到了日本的“政权更迭”……只要自己不行动，改善就不可能从天而降。如果等到那时才行动，就更不可能“马上就好”。既然早晚要行动，为什么不从现在就开始？

以国家之名的懒惰，以国家之名的松懈，以国家之名的放弃，也许能赢得一些同情和理解，但是最终失去那些东西的仍然是我们自己。

最后，百合子委托给地狱少女的不是大泉首相，而是自己的父亲。完整视频：

PS：其实我并不是因为没及时备案就妄想出这些，而是因为长时间以来在twitter上体验到的氛围，积压在心底。

PS2：我的“拖延”习惯貌似是一种症状，叫“Procrastination”，由于最近帝国对网络的打击，相关文章的链接失效了^_^b…..请自行搜索……如果不是看了那些文章，我还以为这是个性呢……

PS3：虽然我常常几个月都不更新blog，但是在blog关掉的这段时间里，却叛逆似的积压了好几篇……有的发在论坛，有的放在evernote里，接下来会找时间发出来，希望不要拖延-___-b

我爱灾难片！讨论一下《2012》的细节和背景

dexter_yy — Sat, 14 Nov 2009 08:05:11 +0800

《2012》最大的缺点还是世界毁灭的太快了，悬念做的不够，我更喜欢cloverfield那种调调，此外视觉效果还是有点单调，这年头只靠一个卷起肯尼迪航母的海啸背景已经唬不住人了，观众眼里尽是绿幕。不过要求太高也是不厚道的，总体来说，《2012》只要把那些传统的美式英雄主义和小范围人道主义的部分剪掉换成特效就相当完美叻！

先说几个细节：
　　
1，好莱坞影片里常见的mac笔记本，这次完全没有看到，VAIO则至少清晰的出现了5次，主角之一的科学家和白宫官员都用sony笔记本，此外加长林肯在主角逃出加州过程中的表现很明显的说明福特也是出过钱的。
　　
2，黄石公园的超级火山喷发让华盛顿特区进入核冬天，我感觉这个不太靠谱，要吸收大部分太阳辐射的能量，浮尘的直径至少要能小于远红外的波长，也就是13微米，核爆可以做到，而火山灰貌似达不到这个程度。
　　
3，通过各国领袖在方舟上进行的表决，我们可以发现：3亿人口的美国独占了一艘船，13亿中国人翰1亿多日本人还有可以忽略的俄国人共用另一艘船，5亿人口的EU占了第三艘船——棒子和阿三明显被抛弃了。而非洲由于陆地上升，反而损失相对较小，重新成为人类发源地，这充分说明出来混迟早要还 XD
　　
4，US军方感叹：选中国没错，只有中国能完成这样的工程。其实中国的优势不光是那些继承能吃苦、能战斗、能奉献的优良传统，一切听党指挥的工人兄弟——登上方舟的船票价格是10亿欧元，按照09年的水平，全球只有790多位大爷买得起，就算2012年经济景气了，筹集资金不过万把亿，这点小钱其实单凭我们帝国自己就可以埋单嘛。

然后是背景。

《2012》的背景是玛雅预言，这个预言并非宗教产物，而是由一个非常华丽的历法计算出的，玛雅的历法是世界上最精确的历法之一，比儒略历早600年以上，玛雅人日常使用的历法由一个260天历和一个365天历共同组成，前者称作Tzolkin，以13天为一个单位，称作Trecena，20个Trecena为一年；后者称作Haab，以20天为一个单位，称作Veintena，一年为18个Veintena加上5个Wayeb日，这两套历法结合起来给每天起名字，可以保证18980天（也就是52个Haab年）没有重复，超出那个时候人的平均寿命，由于这套历法只适合计日而不适合计年，玛雅人在记录历史时会使用数列来表示年份，通常包含5位，换算成天的方式是：a*18*20^3 + b*18*20^2 + c*18*20 + d*20 + e，其中最高位叫作Baktun，计数方式是13,1,2,3…,11,12，所以玛雅的创世日记为13.0.0.0.0，按照GMT换算法，下一个13.0.0.0.0就是2012年12月21日。

这里有一个用python写的玛雅历换算工具：http://www.pauahtun.org/Calendar/tools.html ，比如我的生日1984年6月14日，在玛雅历里是12.18.11.1.1（妈的怎么这么多1呀！难道是在预言我的宿命就是单身么！）……在Tzolkin历里是第一个月：Imix （我靠好强大，Tzolkin的260天貌似就是指一个分娩周期），在Haab历里是第4个月：Sotz （哎可惜，要是生在那个5天的Wayeb月就能获得优越感了……）

这个玛雅历中的特殊年份在西方人眼里可能还有两种意义，一个是著名的占星术士诺查丹玛斯（Nostradamus），他预言1999年是世界末日，而据说他那些已经验证过的其他预言，最大误差不超过13年，正好是2012。另一个原因是基督教，众人皆知旧约的创世纪（Genesis）里有诺亚方舟的故事，但这里面有一个很诡异的地方，根据我常用的KJV版（King James钦定版），Genesis 7:4的原文是：

For yet seven days, and I will cause it to rain upon the earth forty days and forty nights;

以God的第一人称提到了“七天”。然后问题出在《彼得后书》（Second Epistle of Peter），3:5到3:7的原文：

For this they willingly are ignorant of, that by the word of God the heavens were of old, and the earth standing out of the water and in the water

Whereby the world that then was, being overflowed with water, perished

But the heavens and the earth, which are now, by the same word are kept in store, reserved unto fire against the day of judgment and perdition of ungodly men.

大致上就是说世界是按照神的指令，从水中诞生，神要毁灭世界时，就会让水重新覆盖世界，目前天和地还根据当初的指令继续存在，直到开始审判和毁灭那些不信神的人的日子，会“reserved unto fire”，沉沦到火焰之中

很明显是一段警告，而下一段3:8的原文是：

But, beloved, be not ignorant of this one thing, that one day is with the Lord as a thousand years, and a thousand years as one day.

不要忘记一件事：主视一日如千年，视千年如一日。

我们都知道神在第7天不愿意加班，那么第6天就该开始毁灭世界了罢，~~否则项目就要延期了~~，在此之前有5天也就是5000年时间，而很多历史研究表明诺亚那次的大洪水发生在公元前3000年左右……

其实说到神的创世和对人类的惩罚，我很难不联想到最近玩的Dragon Age: Origins，这个游戏的历史设定很有趣：只有一个创世神，称作Maker，他最先创造的世界叫fade，居民叫spirit，这个世界的形态不定，受意识影响，居民也很强大，却没有想象力和创造力，Maker不满意，又创造了另一个物质世界，它没有fade那么“美好”，有固定的形态和法则，却可以在其居民（人类精灵矮人）的努力下不断发展。物质世界和fade世界中间有veil阻挡，不能随意穿越，但是物质世界的生物可以通过做梦的形式，让自己的精神进入fade，Maker还在fade里建造了自己的住所黄金之城（the Golden City），也就是天堂，物质世界里信神的生物死后可以在这里跟主子一起享福。fade里的spirit有善良的也有邪恶，邪恶的就是恶魔，他们嫉妒物质世界的生物，诱惑那些做梦的人，于是人类学会了魔法，建立了一统天下的魔法帝国Tevinter，帝国的法师（Magister）越来越自傲，欲望越来越大，终于有一天他们把手伸向天堂，企图以肉身进入黄金之城，这个行为导致神离开了世界，抛弃了自己的造物，黄金之城堕落为黑城（the Black City），不再有天堂接纳死去的凡人，他们的灵魂只能永远在fade游荡。而那些法师被诅咒转变成了怪物，当他们回到物质世界时，差点毁灭了帝国，历史上称作第一次枯潮（Darkspawn）

The mages had sought to usurp Heaven, but instead they destroyed it.

相比起遮遮掩掩模棱两可的基督教文献，奇幻游戏的故事要丰满的多，寓意也更明显。所以我觉得很适合作为一篇灾难片评论的结尾。

我觉得做NARUTO TV动画的人应该切腹

dexter_yy — Sun, 20 Sep 2009 23:45:48 +0800

虽然早在火影沦为四大民工漫之首的若干年前，我就已经没怎么追了（漫画偶尔看看），但是早期几个章节的tv动画（比如卡卡西vs再不斩，中忍考试李洛克vs我爱罗）曾经让我非常非常感动，我不是指那些纠结的人性和搅基的情感之类的玩意让我感动，是指镜头变化和速度感都非常华丽的打斗场面，最近的一部能让我有类似热血感觉的作品是BONES的SOUL EATER。

那段时期大概也是西尾铁也和他手下那帮超强的作画人员还在全力参与的阶段，西尾铁也这个人在国内不算出名，但是他参与过原画的几乎全是神作：《攻壳机动队SAC GIG》，《交响诗篇eureka7》，《精灵守护者》，《东之伊甸》（刚完结，前段时间最喜欢的），押井守最近的剧场动画《空中杀手》（The Sky Crawlers）的人设也是他，主要人物的脸和身体就像火影里一样圆润……

Rock Lee vs 我爱罗的一个MAD版

精灵守护者里的第一场打斗片段

精灵守护者里评价最高的打斗片段

西尾铁也并不是一个人在战斗，他的背后是日本最强（在西方人眼里，对我来说只能算“之一”，BONES，MADHOUSE等公司也能保证必出精品）的动画公司IG，跟他同级别能保证作品质量的强者还有：沖浦啓之（罗德斯岛战记原画，MEMORIES原画，攻壳GIS作画监督，COWBOY BEBOP剧场版OP分镜，演出和原画），黄瀬和哉（天空战记作画监督，EVA TV/旧剧场版/新剧场版作画监督，浪客剑心原画，攻壳SAC SSS原画），此三人合称IG作画三大神。他们参与过的神作不止这些，我只拿自己熟悉的举例。

Cowboy Bebop剧场版天国之扉的op《Ask DNA》，菅野洋子作曲

实际上早期的火影创作团队简直是精英云集，比如音乐是由天才作曲家増田俊郎（他为《虫师》创作的两张碟可能更有名）和擅长日本民俗乐器的摇滚乐队“六三四Musashi”（演奏尺八的那位：http://www.douban.com/subject/2213500/）合作的，包括前三张OST专辑，我最喜欢其中的摇滚部分，比如OST1里的Need To Be Strong和OST3里的自来也主题。

自来也主题曲

但是像西尾这样的人才不可能一直把精力花在柯南般的没完没了的国民动画上，再加上投入的成本大幅降低，为避免进度赶上漫画而搞出的大量脑残般的回忆段落和原创剧情，早期那些热血的动作场面和CG再也看不到了……后期的火影tv版给我的最深刻印象是：主角们在树和树之间跳跃可以花上几十分钟的片长，其滞空时间和思维活动的复杂深邃，远远胜过当年灌篮高手在角色跳投或抢篮板过程中让观众发表五分钟评论的场面。

昨天晚上~~哥很寂寞~~，一边看书一边在台式机的chrome上挂豆丸，无意中发现火影最新的OP《萤之光》很好听（可能是因为结合了画面才好听，生物股长这个乐队在红白歌会里看到过，没什么特殊印象），在豆丸里切换了几个相关视频，发现一个MAD版本（MAD即MADMOVIE，这个词起源很宅，反正在日本动漫社区里指二次创作影像），大部分画面是从PS3游戏Naruto: Ultimate Ninja Storm里剪辑出来的，身为一个没买过任何次世代主机被别人主动赠与X360长达两周时间连GTA4都没通关的坚定的久经考验的PC玩家，当时我就震精了……靠这战斗画面太华丽了口牙！速度感满分（比如阿斯玛的斩击，日向雏田的八卦六十四掌），还表现出了漫画里没出现过传说中的技能（四代火影的时空忍术，效果确实像金色闪光）。相比之下现在的动画究竟算什么水平口牙！为什么差距这么大，难道就因为~~南梦宫更有钱么~~（纠正……好像是开发.hack的那个工作室搞的），关键还是认真的充满爱的态度罢！

视频来源是niconico，土豆上只能找到三部，基本上所有人物都出场了，优酷上搜不到：

然则画面实在是太模糊了，土豆的MPS系统应该不至于把好片源压成这个鬼样子，因此，这就是我写这篇blog的目的叻！虽然你看完之后可能以为我在发软文……咳……但是……人家没有骗你～人家真的就是想知道这个视频的出处地址或者其他清晰版本嘛～～跪求！（我把别人以前共享的niconico帐号给忘了T___T）

P.S. 最后我要指出……在写这篇blog的时间内很轻松的搜出以上关键词比较特殊的视频，感觉土豆自己研发的搜索系统还是蛮好用的喔活活活活……唯一失败的是soul eater的打斗片段……如果在youtube上搜索“Mifune vs Blackstar”，一定是大把的两三分钟左右的片段，而国内视频用户上传的几乎全是25分钟左右的完整动画……汗……

[内销转出口]寻找最好的JavaScript面向对象模式和封装结构

dexter_yy — Sun, 20 Sep 2009 13:02:22 +0800

好久不见，这次发的不是笔记啦，是我在公司内部的前端wiki上更新的文档……这个抛弃所有wiki语法要求用户直接手写语义化html用json配置导航的wiki排版相当漂亮，让我这样的懒人也有了码字的欲望，发起人小麦实在系功德无量……

这篇文章去年就准备写，想用循序渐进的形式推演出一个Module Pattern的最佳实践，不过想法越多，归纳总结表达出来的成本就越高，所以一直拖延……这次发的文档是一个简化版，去掉了各式各样乱七八糟的写法，只包含几个常用的，说明文字也不多主要看代码-__-b……初衷是作为给土豆前端team里新来的同事看的提纲（对了由于某人叛逃到产品设计部门，现在又空出一个名额，有兴趣的同学抓紧时间投简历，这次是魔都总部的职位，不是成都的），所以要解释一下，文档中提到的TUI是一个js库（名字是很俗，不过我上次发现某年纪一大把的人也跟我一样俗），土豆一直采用双库并行（不要看成双工并行…）的形式，在紧跟开源社区发展的同时自己掌控所有环节和基础架构，没有使用jQuery UI和那套基于DOM的插件结构，而jQuery自己几乎不提供OOP工具（这是好事），实际上自己创建这类工具非常简单快捷，相关的代码我提取了一下直接帖在末尾了，仅供参考。

另外，为了符合Nicholas Zakas在最近的国际会议上传达的精神，我修改了若干变量名跟他ppt里的例子保持一致——这件事教育我们，平时多上slideshow.net对保持先进性是多么重要。

Tudou’s JavaScript Guideline — OOP and Module

介绍土豆在面向对象和模块化设计方面的工具和实践

“Don’t Repeat Yourself.” (DRY)

“Rather than construction, programming is more like gardening.”

Quote from: Andy Hunt and Dave Thomas, The Pragmatic Programmer

创建类，继承，混入，实例化

我们依赖的核心工具是TUI.clone

简洁的，支持私有属性，不需要prototype的写法：

JS是基于原型而不是基于类的面向对象语言，JS是“无类型”的，类是仿造出来的概念，实质只有对象。
new只是用来复制对象，构造函数只是用来返回对象, 两者对JS的OOP来说并不是必须的。

var dog = function(options){
var privateAttr = 1; //私有属性
var private_method = function(){}; //私有方法
return {
option: options, //实例属性
method1: function(){}
};
};
var xiaobai = dog({});

对私有属性/方法的支持比较好
最适合单例模式(Singleton)
延迟单例的初始化，提高页面初始化的速度
缺点：对继承的支持不佳
缺点：在需要频繁创建大量对象，而方法非常多的场合，浪费资源（因为每个实例的方法指向的都是不同的函数对象，每次实例化都要重新生成所有函数）

在第2个缺点的场合，传统的prototype写法效率更高，支持继承，但是代码分散，不易读，TUI.clone提供了更好的写法——

传统的、支持继承的、仿Ruby风格的Class写法：

//创建新类
var Dog = TUI.newClass({
initialize: function(options){ //构造函数
this.option = options;
}
});
//实例化
var xiaobai = new Dog();
//继承
var Cat = TUI.newClass(dog, { //只允许单继承
mixin: [TUI.event], //混入其他方法
initialize: function(options){
this.superClass.call(this, arguments); //调用父类构造函数
}
});

风格类似mootools的new Class
TUI.newClass只是TUI.clone的封装
mixin相当于在构造函数里$.extend(this.prototype, TUI.event)
实际上应该少用继承，多用mixin和组合模式，后者更符合JS的特点
缺点：封装效果不好，不支持私有属性和方法

TUI.clone既可以复制构造函数的prototype，也可以直接复制对象（跟jQuery.extend不同，依靠原型继承），所以利用它直接生成实例。

这样可以在不引入prototype和语法糖的情况下把第一种方法改造的同样高效——

对象克隆工厂的写法：

var dog = (function(jQuery, TUI){ //传入需要访问的全局命名空间
var a = "xxx"; //不作为状态的私有属性
var private_method = function(){ //私有方法
alert(this.option);
};
var PublicObj = { //相当于prototype对象
method1: function(){
private_method.call(this); //访问私有方法, 共享状态
}
};
return function(options){ //对象工厂
var obj = TUI.clone(PublicObj); //克隆
obj.aption = options; //构造函数中的常规任务
$.extend(obj, cat); //mixin其他对象的方法
return obj;
};
})(jQuery, TUI);
var xiaobai = dog({});

效率高，封装好，耦合少易于修改和扩展
缺点：私有属性不能作为实例状态

把以上第一种方法和第三种方法结合互补，为module模式——

模块化 Module Pattern

核心工具是TUI.module

TUI.widget.dog = (function($, TUI){ //除了库的命名空间，尽量不访问全局变量
//所有模块代码都封闭在这个区域内
var a = "xxx"; //不作为状态的私有属性
var private_method = function(){ //私有方法
alert(this.option);
};
var privateObj = {}; //可作为状态的私有属性
var privateAttr = function(name, value){ //读写私有属性的方法，只能在内部使用
var p = private[this.objectId];
if (!p)
p = private[this.objectId] = {};
if (value)
p[name] = value;
return p[name];
};
TUI.dog = TUI.newClass(parentClass, {
mixin: [TUI.event], //混入其他方法
initialize: function(options){
this.superClass.call(this, arguments); //访问父类构造函数
},
public_method: function(){
var b = a + privateAttr.call(this, "c"); //访问私有属性
private_method.call(this); //访问私有方法
}
});
//工厂方法，给别人使用的接口
return function(options){
var obj = new TUI.dog(options)
//实例加上唯一的ID，类似Ruby，注意只用+new Date()不能避免重复
obj.objectId = "tui_object" + ( +new Date()*10000 + Math.random(1)*10000 );
return obj;
};
})(jQuery, TUI);

为了便于理解，以上代码是集中在一起的简单实现，进一步封装之后，有些步骤可以省略：

objectId的初始化已经由TUI.clone实现
privateAttr方法和私有属性map由TUI.newModule实现
TUI.newModule是TUI.namespace和TUI.module.create的封装

基于 TUI.clone 和 TUI.newModule 的写法

TUI.newModule("TUI.widget.dog", function(sandbox, $, TUI){
TUI.dog = TUI.newClass(parentClass, {
mixin: [TUI.event],
sandbox: sandbox, //有sandbox属性传入时，attr属性会被转化为外部无法访问的私有属性
attr: { //初始化私有属性的默认值
a: 1,
b: 2
},
initialize: function(options){
this.superClass.call(this, arguments); //访问父类构造函数
},
public_method: function(){
var b = this.attr(sandbox, "a") + this.attr(sandbox, "c"); //访问私有属性，通过sandbox参数来验证身份
}
});
return function(options){
var obj = new TUI.dog(options)
return obj;
};
}, [jQuery, TUI]);
var xiaobai = TUI.widget.dog({});
console.log(xiaobai.sandbox); //undefined
console.log(xiaobai.attr); //undefined

这里的sandbox其实还可以做很多事——

沙盒，模块间的解耦，与外部通信

TUI.module.create方法其实来自TUI.moduleClass的实例，其他独立应用同样可以继承TUI.moduleClass，构造自己的沙盒对象

var Douwan = TUI.newClass(TUI.moduleClass, {
notify: TUI.clone(TUI.event), //事件在这里可以理解为通信器
initialize: function(options){
var me = this;
this._sandbox.notify = this.notify; //把通信器指向自己，避免跟全局的事件命名冲突
//给沙盒增加ajax方法，让module内的代码通过沙盒来通信，屏蔽url路径和响应格式之类的细节
var url = "http://www.tudou.com/path/service.action"
this._sandbox.getJSON = function(param, fn){ //模块只需要传url参数
me.getJSON(url, function(text){
var jsondata = me.toJSON(text);
fn(jsondata); //无论返回格式是什么，都传json给模块
});
};
},
toJSON: function(){},
getJSON: function(){}
});

让应用的不同模块之间解耦，避免在模块内部直接使用外部的命名（除了库的api）

var douwanObj = new Douwan({});
var module1 = douwanObj.module.create(function(sandbox, $, TUI){
sandbox.getJSON({ iid: 10000 }, function(json){
//通过通信器调用module2.update
sondbox.notify.fire("module2-update", [json.date]);
});
}, [JQuery, TUI]);
var module2 = douwanObj.module.create(function(sandbox, $, TUI){
var obj = {
update: function(){}
};
//注册一个update消息的接收器
sondbox.notify.bind("module2-update", function(date){
obj.update(date);
});
return obj;
}, [JQuery, TUI]);

页面初始化时并不一定需要渲染或操作所有模块，因此有些模块的代码可以放在外部文件里，需要的时候再注入到页面里，类似Python的import

按需加载模块 On-demand Lazy Load

自动管理各个模块之间的依赖关系，根据代码内容加载不同的文件，这样做的成本太高，适合大型企业应用，我们的设计原则是“恰到好处”，所以通过文件名来管理模块

注册模块

TUI.module.join("http://js.tudouui.com/js/fn/saleloader_10.js", { domain: "http://uidev.tudou.com", version: 0 });

配置从url里获取，第二个配置参数是可选的，优先级更高，用于调试（指向开发环境）
域名其实可以省略，js文件的域名通过TUI.domain和autodomain.js脚本来自动配置
版本号很重要，支持a_10.js/a.v10.js/a_v10.js等写法

使用模块

TUI.module.use("/fn/saleloader", function(){
adExtension.load(); //这个是saleloader.js内的方法，必须等js加载完后执行
//这个区域是执行saleloader.js内代码的安全空间
});

类似YUI3的Y().use，省去了版本冲突之类无用的特性
第一次use时会向页面里加载对应的script
函数区域内的代码是异步执行的，会等到saleloader.js加载完后依次执行，如果已经加载过了，直接执行，类似jQuery.ready

总结

以上方法虽然有递进关系，但并不是要表示最后面的才是最好的方法
最好的方法不是唯一的，要根据场合选择最适合的方法，以上方法都有适用场合
本文档涉及到的API：TUI.clone, TUI.newClass, TUI.moduleClass, TUI.module.create, TUI.newModule, TUI.module.join, TUI.module.use, TUI.event

=============开始帖源码的分割线=============

TUI.clone


 /**
 * @public 继承一个类或复制一个对象
 * @param {object|function} oldone是需要继承的构造函数或需要复制的对象
 * @param {object|function} ex为函数时，是子类的构造函数，或者用来加工新对象
 * 		ex为对象时，为子类的方法, 其中initialize方法为构造函数, mixin为混入的超类
 * @return {object|function}
 */
clone: function(oldone, ex){
	var newobj,
		isClass = !oldone || $.isFunction(oldone), //继承操作
		constructorFn = ex && !$.isFunction(ex) && ex.initialize || ex; //子类构造函数
	if (!isClass) {
		newobj = function(){
			if(constructorFn)
				constructorFn.apply(this, arguments);
		};
		newobj.prototype = oldone;
		return new newobj();
	} else {
		var c = { _super: oldone, _sandbox: null, _attr: null, _default: null };
		newobj = function(){ //构造函数
			this.objectId = "TUI-object" + TUI.juid(); //实例的唯一ID, 注意不能只用当前毫秒数，连续生成实例时会重复！
			var p = c;
			this.superClass = p._super || Object; //在子类的构造函数中可以用this.superClass访问父类
			if (p._attr) {
				this.attr = p._attr; //绑定访问私有属性的方法
				if (p._default)
					this.attr(p._sandbox, p._default); //初始化私有属性的默认值
			}
			if(constructorFn) //执行构造函数的自定义部分
				constructorFn.apply(this, arguments);
		};
		if (oldone) { //需要继承
			newobj.prototype = arguments.callee.call(this, oldone.prototype); //原型继承
			$.extend(newobj.prototype, ex); //子类方法
		} else {
			newobj.prototype = ex;
		}
		if (ex.sandbox) { //为module内部定义的类提供相关方法
			c._sandbox = ex.sandbox;
			c._default = ex.attr;
			c._attr = function(sandbox, attrname, value){ //通过sandbox参数杜绝来自外部的访问
				return sandbox.attr.call(this, attrname, value);
			};
			delete ex.attr;
			delete ex.sandbox; //沙盒一定要删除，不能暴露出去
		}
		if (ex.mixin) { //混入其他接口的方法
			ex.mixin.unshift(newobj.prototype);
			$.extend.apply($, ex.mixin);
		}
		return newobj;
	}
},

TUI.moduleClass


/**
 * 存放实例的私有状态
 * @private
 */
var privateAttr = {};
/**
 * module的抽象类
 * @note 可以继承到其他应用上, 构造独有的sandbox
 */
TUI.moduleClass = TUI.newClass({
	initialize: function(){
		this.notify = TUI.clone(TUI.event),
		this._sandbox.notify = this.notify; //被继承的时候，notify可以另外指向到别处
	},
	_sandbox: {
		attr: function(name, value){ //this指向调用它的实例
			if (typeof name === "object") {
				privateAttr[this.objectId] = TUI.clone(name); //初始化私有变量的默认值
				return true;
			}
			var p = privateAttr[this.objectId];
			if (!p) //尽量在module里初始化
				p = privateAttr[this.objectId] = {};
			if (value)
				p[name] = value;
			return p[name];
		}
	},
	/**
	 * 创建一个模块，提供封闭的代码作用域和沙盒
	 * @public
	 * @param {function}
	 */
	create: function(wrap, args){
		var sandbox = TUI.clone(this._sandbox);
		args.unshift(sandbox);
		return wrap.apply(window, args);
	}
});

$.extend(TUI.module, new TUI.moduleClass());

HTML5, CSS3, ES5…新的web标准和浏览器支持一览

dexter_yy — Mon, 29 Jun 2009 08:40:26 +0800

好罢这篇本来是我私下做的笔记，我特别喜欢在Evernote上做备忘的笔记，虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击！比如跟别人讨论The Dark Knight里小丑在医院对检察官说了什么让他变成双面人，我一句对白都想不起来，还有big bang theory s2里penny玩age of conan时的人物名字是”Queen Penelope”，我看的时候印象很深，一个月后就连奥德赛都想不起来了。留份笔记总觉得心里踏实些……啊又跑题了

本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是w3c的草案，离Recommendation级别还早，却已经成为新一轮浏览器大战中备受追捧的明星，开发者社区里也涌现出大量相关的demo和API封装，有些已经进入生产环境（比如google在iphone上实现的gmail离线应用），其实我觉得如今的web领域里，从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了，是因为现在web application的需求太高了么…… UPDATE：刚才在solidot发软文的时候我突然想明白怎么表述这个问题：其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者，就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样，所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准，即时它们还是W3C Working Draft，相比之下IE team就比较缺乏动力，果然计划经济缺乏活力亚XD……

由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。

===================废话结束的分割线=======================

CSS3 Media queries

对整个外链css文件和部分css代码使用的媒体类型侦测，人气高的原因显然是因为移动设备……

<link media=“all and (orientation:portrait)” src="screen.css" type="text/css">

@media all and (min-color: 4) { ... }

w3c标准：http://www.w3.org/TR/css3-mediaqueries/
MDC文档：https://developer.mozilla.org/En/CSS/Media_queries
Opera文档：http://www.opera.com/docs/specs/css/

支持：Firefox 3.5+, Safari 3+, Opera 7+

CSS3 2D Transforms

css变形，有人用这个实现伪3d效果以及旋转效果的jquery插件

-moz-transform: rotate(-45deg) skew(15deg, 15deg);

sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';

w3c标准：http://www.w3.org/TR/css3-2d-transforms/
MDC文档：https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介绍: http://webkit.org/blog/130/css-transforms/

支持：Firefox 3.5+, Safari 3.1+
替代/过渡：IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

CSS3 Transitions and CSS Animations

备受期待的css动画，webkit团队提出的草案，transition实现简单的属性渐变，animation定义更复杂的动画效果

transition-property: width;
transition-duration: 1s;
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
@keyframes 'diagonal-slide' {}

w3c标准：http://www.w3.org/TR/css3-transitions/
w3c标准：http://www.w3.org/TR/css3-animations/
webkit博客的介绍：http://webkit.org/blog/138/css-animation/
约翰同学的介绍：http://ejohn.org/blog/css-animations-and-javascript/

支持：Safari 3.1+

CSS3 Downloadable fonts

能在网页里嵌入任意字体是设计师的梦想……不过这里支持的也仅限truetype和opentype

@font-face {}

w3c标准：http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文档：http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文档：https://developer.mozilla.org/en/CSS/@font-face

支持：Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+

附赠：其他CSS3 property的兼容性

ppk同学维护的文档: http://www.quirksmode.org/css/contents.html
css3.info维护的文档：http://www.css3.info/modules/selector-compat/
一个测试页面：http://westciv.com/iphonetests/

HTML5 DOM Storage

简洁的持久存储，键值对的形式

window.localStorage
window.sessionStorage //可跨域，标签页关掉就清空

w3c标准：http://www.w3.org/TR/webstorage/
ppk同学维护的兼容性列表：http://www.quirksmode.org/dom/html5.html#localstorage
MDC文档：https://developer.mozilla.org/en/DOM/Storage
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

支持：Firefox 3.5+, Safari 4.0+, IE 8.0+

HTML5 Offline Application Cache

用一个manifest文件缓存静态资源（图片,css, js之类）在离线状态下使用，不是结构化数据

<html manifest="foo.manifest">

CACHE MANIFEST
index.html
style/default.css
images/logo.png

w3c标准：http://www.w3.org/TR/offline-webapps/#offline
MDC文档：https://developer.mozilla.org/en/Offline_resources_in_Firefox

支持：Firefox 3.5+

HTML5 Database Storage

本地数据库，支持sql，最早是google gears实现，现在的w3c草案的编辑也是google的工程师……但奇怪的是，gears的api跟现在的草案不兼容，chrome甚至为了保留捆绑的gears的数据库api而删除了webkit实现的html5 api……而google在iphone上实现gmail离线功能的时候又采用webkit的api……真纠结……

var db = window.openDatabase("notes", "", "The Example Notes App!", 1048576);
db.transaction(function(tx) {
tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {});
});

w3c标准：http://www.w3.org/TR/offline-webapps/#sql
webkit博客的介绍：http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
iphone的文档：http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW1

支持：Safari 3.1+
替代/过渡：Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers

多线程，在后台执行复杂运算，不能操作dom，线程之间通过消息事件通信

var myWorker = new Worker('my_worker.js');
myWorker.onmessage = function(event) { event.data };
myWorker.postMessage(str);

w3c标准：http://www.w3.org/TR/workers/
MDC文档：https://developer.mozilla.org/En/Using_web_workers

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation

地理api

window.navigator.geolocation

w3c标准：http://www.w3.org/TR/geolocation-API/
MDC文档：https://developer.mozilla.org/En/Using_geolocation

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag and Drop

原生拖拽事件

ondragstart
ondrag
ondragend
//拖拽过程中
ondragenter
ondragover
ondragleave
ondrop

w3c标准：http://www.w3.org/TR/html5/editing.html#dnd
MDC文档：https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple文档：http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233

支持：Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+

HTML5 Audio and Video

用html标签来嵌入视频音频的好处并非是“开源格式”，而是“开放性”，让多媒体可以与其他页面元素交互，或者用页面技术去跟视频“mashup”，这种随意组合和交互的能力是web技术兴盛的基石，也是像flash这类封闭RIA容器最大的缺点。

<video controls>
<source src=“zombie.ogg” type=“video/ogg”/>
<source src=“zombie.mp4″ type=“video/mp4″/>
</video>

MDC文档：https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
webkit博客的介绍：http://webkit.org/blog/140/html5-media-support/

支持：Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/过渡：用video标签嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/

HTML5 Canvas

apple发明，最早应用于dashboard，目前主流的js图像技术，mozilla已经在实现OpenGL ES标准的Canvas 3D了，另外据说ie team为支持canvas做了大量工作……实际上canvas api相当底层，特别是交互方面，不如svg直观，所以出现了很多封装它的库

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

MDC文档：https://developer.mozilla.org/en/Canvas_tutorial

支持：Firefox 1.5+, Safari 2.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：excanvas.js http://code.google.com/p/explorercanvas/

SVG

w3c标准：http://www.w3.org/TR/SVG12/
IBM DW教程：http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896

支持：Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：raphael.js http://raphaeljs.com/

XMLHttpRequest 2

主要是增加跨域能力以及请求过程中的事件

w3c标准：http://www.w3.org/TR/XMLHttpRequest2/
MDC文档：https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

支持：Firefox 3.5+（实现了部分）, IE 8.0+（实现了部分）

Access Control

千呼万唤的跨域访问控制，目前firefox3.5和ie8有一些不同，ie8搞的XDR和XDM我也不知道是不是准备提交给w3c标准化的东西……

Access-Control-Allow-Origin: http://foo.example

w3c标准：http://www.w3.org/TR/cors/
MDC文档：https://developer.mozilla.org/En/HTTP_Access_Control
Cross-document Messaging (XDM)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

支持：Firefox 3.5+, IE8.0+

E4X (ECMA-357)

Firefox和ActionScript3早就实现了的东西……不过其实现在json这么流行，有没有E4X好像都无所谓了～（瞎说的，其实在js代码里直接写dom对象而不是html字符串，会方便很多）

MDC文档：https://developer.mozilla.org/en/E4X

支持：Firefox 1.5+

ECMAScript 5 Native JSON

原生的JSON支持，速度和安全性都比eval强一百倍亚一百倍，另外要注意Douglas Crockford的json2.js是一个用js实现的js解释器，所以安全性更好

JSON.parse( text, translate )
JSON.stringify( obj, translate )
String.prototype.toJSON
Boolean.prototype.toJSON
Number.prototype.toJSON
Date.prototype.toJSON

MDC文档：http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN文档：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx

支持：Firefox 3.5+, IE8+
替代/过渡：json2.js http://www.json.org/json2.js

ECMAScript 5 Array Extras

js1.6里实现的数组方法，主要是forEach, map, fliter这几个函数式编程里非常重要的方法，还有反向查询

Array.prototype.indexOf( str )
Array.prototype.lastIndexOf( str )
Array.prototype.every( fn )
Array.prototype.some( fn )
Array.prototype.filter( fn )
Array.prototype.forEach( fn )
Array.prototype.map( fn )

MDC文档：https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

支持：Firefox2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：都可以通过扩展Array.prototype来模拟

ECMAScript 5 isArray()

区分数组和对象

Array.isArray([]); // true

支持：无
替代/过渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array]”;};

ECMAScript 5 Object

用GOOGLE I/O演讲里的话来说：更鲁棒(robust)的对象系统

Object.getPrototypeOf( obj )

约翰同学的讲解：http://ejohn.org/blog/objectgetprototypeof/

支持：Firefox3.5
替代/过渡：object.__proto__ 或 object.constructor.prototype

Object.create( proto, props ) //克隆或继承对象
Object.keys( obj ) //数据结构的映射
Object.getOwnPropertyNames( obj )
Object.preventExtensions( obj ) //不能添加新属性
Object.isExtensible( obj )
Object.seal( obj ) //不能删除和修改属性的配置，不能添加新属性
Object.isSealed( obj )
Object.freeze( obj ) //不能删除和修改属性的配置，不能添加新属性，不能写属性
Object.isFrozen( obj )

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.create和Object.keys可以自己实现

ECMAScript 5 Property Descriptor

对象属性的访问控制

Object.getOwnPropertyDescriptor( obj, prop )
Object.defineProperty( obj, prop, desc )
Object.defineProperties( obj, props )
desc = {
value: true,
writable: false, //修改
enumerable: true, //for in
configurable: true, //删除和修改属性
get: function(){ return name; },
set: function(value){ name = value; }
}

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.defineProperties其实相当于jQuery.extend，用来实现Mixin

ECMAScript 5 Getters and Setters

python和ruby里都有的属性访问方法

obj = {
get innerHTML() { return …; },
set innerHTML(newHTML) { … }
};

MDC文档：https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：

非标准，Firefox1.5里的旧方法

HTMLElement.prototype.__defineGetter__("innerHTML", function () {});
HTMLElement.prototype.__defineSetter__("innerHTML", function (val) {});

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+

标准

Object.defineProperty(document.body, "innerHTML", { get : function () {} });

MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

支持：IE8+ (只能对DOM使用)

ECMAScript 5 Strict Mode

ES5的严格模式，删除了旧版本中容易引起问题的元素，并且会显式的报错，方便调试

"use strict"; //以下情况下抛出异常
//对未定义的变量赋值
//操作被设置为不可写，不可配置或不可扩充的属性
//删除变量，函数，参数
//在对象直接量里重复定义属性
//eval做关键字，在eval的字符串里定义变量
//覆写arguments
//使用arguments.caller和arguments.callee（匿名函数必须具名才能引用自己）
//(function(){ ... }).call( null ); // Exception
//使用with

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

支持：无
替代/过渡：……从现在开始养成严谨的编程习惯

ECMAScript 5 其他新特性

传递函数的引用时，绑定this

Function.prototype.bind(thisArg, arg1, arg2....) /

支持：无
替代/过渡：prototype http://www.prototypejs.org/api/function/bind

ISO-formatted dates

Date.prototype.toISOString() // Prints 2009-05-21T16:06:05.000TZ

支持：无
替代/过渡：datejs http://code.google.com/p/datejs/

String.prototype.trim()

支持：Firefox3.5
替代/过渡：各种正则实现 http://blog.stevenlevithan.com/archives/faster-trim-javascript

===================废话又开始的分割线=======================

其实我把这个东西发出来是希望能促进创新的氛围，让更多人认识到很多新技术已经进入到“实用”阶段。

如果只是想做个实验性的webgame，或是只能用于特定平台的应用（比如iphone，greasemonkey），firefox3.5+webkit的支持就已经足够罢。

如果不能无视主流平台，有很多技术能让你gracefully degrade（优雅的退化）或者选取不同的方法实现兼容的接口。

如果你等不及IE x在若干年后实现xx，希望提前享受福利，有些技术的设计原则就是让你能在没有native支持的情况下可以自己实现一模一样的功能或语法糖（syntactic sugar），比如ES5对象的继承和访问控制，从ES4/ActionScript3时期那些老土的关键词（class extands private static）改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties(o, attrs).freeze().getOwnPropertyNames().map(fn)，不会只是为了酷炫罢……

很多人都喜欢抱怨“我这辈子都没机会用HTML5”，但是只要把视线从自己脚下那巴掌大块地移开看看别处，会发现世界其实一直都在改变喔XD

继续补充vim配置技巧——上次的vimrc还不够强力

dexter_yy — Sun, 07 Jun 2009 02:52:27 +0800

首先要补充一些MacVim的配置，其实写上篇文章的时候我还在用已经过时的基于Carbon界面的vim for osx，更接近传统的unix版本，但是好久没更新，只支持vim6.0，soureforge上有一个7.2的版本，bug诸多，其中的乱码和字体抗锯齿的问题让我完全无法忍。而MacVim是基于Cocoa开发，支持到7.2，还含有很多讨好mac用户的设计，比如对标签的良好支持，华丽的界面（背景颜色支持透明度，字体抗锯齿更漂亮，几乎跟TextMate的效果没区别）……非常后悔以前没仔细试用这个版本！目前为止只发现行高linespace的设置会无法生效，不过这个bug在最新的快照版里已经修正了。

插播一个道歉：由于spam太多，我前段时间在wordpress黑名单里加了一个很苛刻的条件，把所有评论都挡到待审核列表里去了，好像还直接删了一部分……咳……

我在.vimrc里增加了一些专门针对MacVim的设置：

if has("gui_macvim")
"取消默认的快捷键
let macvim_skip_cmd_opt_movement = 1
let macvim_hig_shift_movement = 1
"设置背景透明度
set transparency=2
"隐藏工具条
set guioptions-=T "egmrt
"绑定自己需要的cmd快捷键
macm File.Save key=<D-s>
macm File.Save\ As\.\.\. key=<D-S>
macm Edit.Undo key=<D-z> action=undo:
macm Edit.Redo key=<D-Z> action=redo:
macm Edit.Cut key=<D-x> action=cut:
macm Edit.Copy key=<D-c> action=copy:
macm Edit.Paste key=<D-v> action=paste:
macm Edit.Select\ All key=<D-A> action=selectAll:
endif

之所以要取消MacVim默认的一些快捷键是因为它们都占用了cmd苹果键，而我习惯用这个键来替代ctrl在vim里的作用（在mbp的键盘上就算我想用ctrl也不方便……），不过其中有几个快捷键是非常非常有价值的，比如保存（省去了输入:w的麻烦），全选（否则要摁六下：ggVG），复制粘贴剪切（否则为了使用剪贴板，比如猛摁这种玩意：”+y，还不能在插入模式下使用），幸好它们的快捷键都不跟vim其他操作冲突，所以自己设置。为了完全删除MacVim默认的cmd快捷键，还需要打开app中自带的vimrc文件（可以这样编辑：:tabe $VIM/vimrc ），删除末尾那些macm开头的代码。

MacVim的安装包里包含一个mvim，是像gvim一样的脚本，用来在命令行中调用GUI版的vim，但是mvim默认会在新窗口打开文件，我相信多数人都喜欢在当前窗口的新标签页里打开罢，需要在命令后加–remote-tab参数，不过这篇文章里给出了直接修改脚本的方法，把mvim底部从# Last step: fire up vim开始的部分删掉，改成：

tabs=true
# Last step: fire up vim.
if [ "$gui" ]; then
if $tabs && [[ `$binary --serverlist` = "VIM" ]]; then
exec "$binary" -g $opts --remote-tab-silent ${1:+"$@"}
else
exec "$binary" -g $opts ${1:+"$@"}
fi
else
exec "$binary" $opts ${1:+"$@"}
fi

P.S. 上面给出的那个blog不能直接打开，也许是需要翻墙，不过我顺便介绍一个很方便的利用google网页快照的方法～用谷歌翻译打开这个网址 XD

刚安装好的MacVim打开gb编码的文件仍然把中文显示成乱码（好无奈，GBK编码是土豆网的历史遗留问题，页面里的script标签也几乎都没加charset=”utf-8″，所以大部分js文件都只好用gb18030的编码，textmate正是因为不支持gb编码才被我降为二等公民的，其实我有正版cdkey……），我在.vimrc里加上了encoding似乎能解决这个问题：

set encoding=utf-8
set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936

解释一下：对于编码，vim里有三个设置选项，encoding是设置vim以何种编码显示文件（缩写enc），fileencoding是当前文件实际的编码（缩写fenc），而fileencodings指示vim如何解码（缩写fencs），因此vim在打开一个文件时实际上会先根据fileencodings里的列表反复测试，直到成功解码，转换成encoding指定的编码，然后正常显示，转码的过程是用iconv实现的（所以windows上用vim还要配置iconv的dll路径和参数……麻烦），保存的时候会根据fileencoding来保存，跟是否显示为乱码没有关系。

所以如果想转换一个文件的编码，比如从utf-8转换到gb18030，可以在编辑器中直接输入两个命令：

:set enc=gb18030
:set fenc=gb18030

然后保存就ok了～其实如果不用继续编辑的话，第一行都可以省去，因为它的目的只是让编辑器用gb18030来显示当前文件，避免乱码，但是并不影响文件保存时的编码和正确性。

以前我都是依赖mac上的Coda来转换编码（确实最方便）……vim又成功了抢了它的饭碗……

MacVim还有一个问题是会显示一个很宅很不人性的标签栏名称，比如我编辑/usr/local/bin/mvim这个文件，标签栏上写的是“/u/l/b/mvim”，如果目录结构再深一点就看不到真正的文件名了，在.vimrc里加入下面这行可以让标签栏只显示文件名：

set guitablabel=%t

上次的.vimrc里还增加了两处很重要的设置，主要是受这位老爷写的《vim使用进阶》的启发，首先是让.vimrc每次编辑保存后自动生效，避免重启：

autocmd! bufwritepost .vimrc source ~/.vimrc

autocmd实际上是vim脚本的事件机制，表示在某个事件触发后自动执行的命令

接下来要实现的是保存和恢复编辑器的当前状态，类似Eclipse的Workspace，不过vim的session更强大，几乎可以还原一切状态……Easwy老爷介绍的命令比较繁琐，缺乏“一键恢复”的快感……身为一个习惯使用“高级语言”的程序员，在这种时候就抑制不住继续封装和提高抽象层的欲望……所以自定义了以下两个命令：

function! GetMySession(spath, ssname)
if a:ssname == 0
let a:sname = ""
else
let a:sname = "-".a:ssname
endif
execute "source $".a:spath."/session".a:sname.".vim"
execute "rviminfo $".a:spath."/session".a:sname.".viminfo"
execute "echo \"Load Success\: $".a:spath."/session".a:sname.".vim\""
endfunction
function! SetMySession(spath, ssname)
if a:ssname == 0
let a:sname = ""
else
let a:sname = "-".a:ssname
endif
execute "cd $".a:spath
execute "mksession! $".a:spath."/session".a:sname.".vim"
execute "wviminfo! $".a:spath."/session".a:sname.".viminfo"
execute "echo \"Save Success\: $".a:spath."/session".a:sname.".vim\""
endfunction
" load session from certain path
command! -nargs=+ LOAD call GetMySession(<f-args>)
" load session from certain path
command! -nargs=+ SAVE call SetMySession(<f-args>)

为了用最简单的方法选择路径，使用时需要先在终端的初始化脚本（比如~/.bashrc，在我的OSX系统里通常用~/.profile）里添加相应的环境变量，比如我常用的三个路径：

export TUISVN="/Users/dexteryy/Sites/Tudou/ui/ui/"
export TUIDEV="/Volumes/ui.tudou.com/"
export MYWEB="/Users/dexteryy/Sites/www/"

当我在MYWEB的路径下做项目的时候，如果需要保存当前状态，只要输入:SAVE MYWEB 0就行了，这里的0是因为考虑到在同一个工作目录里可能需要使用到不同文件组合的工作区，提供的一个简单的版本号，这段命令执行后会在/Users/dexteryy/Sites/www/目录里生成两个文件： session.viminfo和session.vim，如果版本号是大于0的整数，比如2，文件名会是session2.viminfo和session2.viminfo

需要恢复的时候只要输入命令：:LOAD MYWEB 0 就行叻～

喔对了，为了能在VIM命令里使用bash中定义的变量，你需要在MacVim的preferences里把“Launch Vim processes in a login shell”勾选，熟悉Mac应用的同学应该都能想到这个设置会记录在/Library/Preferences/或~/Library/Preferences/里的某个配置文件里，MacVim对应的是~/Library/Preferences/org.vim.MacVim.plist，所以你也可以直接用这个命令在终端里修改：

defaults write org.vim.MacVim MMLoginShell 1

如果使用的是Gvim或windows版本的vim，也可以直接把路径变量写在.vimrc里，比如：

let g:TUISVN="/Users/dexteryy/Sites/Tudou/ui/ui/"

然后修改上面的两个函数GetMySession和SetMySession，把a:spath前面的$都删掉…………因为VIM里的变量只能由大写字母开头……

完整的.vimrc在这里…………呃好罢我发现google code真是备份和维护配置脚本的好地方XD

最后继续讨论一下插件～

首先是Taglist，这是一个能让vim具备类似Aptana的Outline View的功能，还能像JAVA的IDE那样通过类名和方法名直接跳转到相应的源码，它借助了一个叫ctags的工具，可以解析源码生成标签文件（在同一个名录下，叫tags），详细的介绍请参考Easwy老爷的文章，记得务必安装最新版的Exuberant Ctags……我是用MacPorts装的：sudo port install ctags

Exuberant Ctags号称支持34种语言，包括javascript，但是它对javascript的理解非常OUT……比如现在定义JS方法几乎主要依靠匿名函数了，ctags却无法识别这种形式……

已经有人在尝试自己添加匹配规则，我自己也写了一大坨：

--langdef=js
--langmap=js:.js
--regex-js=/[ \t.]([A-Z][A-Z0-9._$]+)[ \t]*=[ \t]*[0-9"'\[\{]/\1/n,constant/
--regex-js=/([A-Za-z0-9._$]+)[ \t]*=[ \t]*\{/\1/o,object/
--regex-js=/['"]*([A-Za-z0-9_$]+)['"]*[ \t]*:[ \t]*\{/\1/o,object/
--regex-js=/([A-Za-z0-9._$]+)\[["']([A-Za-z0-9_$]+)["']\][ \t]*=[ \t]*\{/\1\.\2/o,object/
--regex-js=/([A-Za-z0-9._$]+)\.prototype[ \t.=]/\1/c,class/
--regex-js=/([A-Za-z0-9._$]+)[ \t]*=[ \t]*$function\($/\1/c,class/
--regex-js=/['"]*([A-Za-z0-9_$]+)['"]*:[ \t]*$function\($/\1/c,class/
--regex-js=/var[ \t]*([A-Za-z$][A-Za-z0-9_$()]+)[ \t]*=[ \t]*function[ \t]*\(/\1/f,function/
--regex-js=/function[ \t]+([A-Za-z$][A-Za-z0-9_$]+)[ \t]*$([^)])$/\1/f,function/
--regex-js=/['"]*([A-Za-z$][A-Za-z0-9_$]+)['"]*:[ \t]*function[ \t]*\(/\1/m,method/
--regex-js=/([A-Za-z$][A-Za-z0-9_$]+)[ \t]*=[ \t]*function[ \t]*\(/\1/m,method/
--regex-js=/([A-Za-z0-9_$]+)\[["']([A-Za-z0-9_$]+)["']\][ \t]*=[ \t]*function[ \t]*\(/\2/m,method/
--regex-js=/([A-Za-z0-9._$]+)[ \t]*=[ \t]*\[/\1/a,array/
--regex-js=/['"]*([A-Za-z$][A-Za-z0-9_$]+)['"]*:[ \t]*\[/\1/a,array/
--regex-js=/([A-Za-z0-9._$]+)\[["']([A-Za-z0-9_$]+)["']\][ \t]*=[ \t]*\[/\1\.\2/a,array/

匹配以下语法形式，其中粗体部分是标签名称：

var MY_CONSTANT = 250; //constant
ns.myobject = {}; //object
myobject: {}, //object
ns[”myobject”] = {}; //object, 生成的tag是”ns.myobject“
ns.myclass.prototype.myfunc = function(){}; //class
ns.myclass = (function(){return {};}); //class
ns[”myclass”] = (function(){return {};}); //class, 生成的tag是”ns.myclass“
var myfunc = function(){}; //function, 必须有var, _开头的忽略
function myfunc(){}; //function
myfunc: function(){} //method
ns.myfunc = function(){}; //method
ns[”myfunc”] = function(){}; //method, 生成的tag是”ns.myfunc“
ns.myarray = []; //array
myarray: [], //array
ns[”myarray”] = []; //array, 生成的tag是”ns.myarray“

使用方法是建一个~/.ctags文件，把上面那段代码放进去就行。为了在taglist窗口里显示类别（比如class和method），还需要在.vimrc里设置一个变量：

let g:tlist_javascript_settings = 'javascript;f:function;c:class;o:object;m:method;s:string;a:array;n:constant'

另一个要强烈推荐的插件是NERD Commenter，从名字能看出跟上次推荐的NERD Tree是同一个强者写的，功能是针对各种文件类型快速的添加和删除注释，除了单行，多行，还提供“sexily”的注释……比如js里添加文档内容时常用的那种（如果首行写成/**，在aptana里会认作script doc格式）

不过这个插件默认使用了大量,c开头的快捷键……而,在vim里一般都用作自定义的键（的默认值是\，很显然小拇指没食指方便……），我没有找到相关的设置选项……所以直接修改了插件脚本……

唔唔就先写到这里罢，虽然vim无论日常使用还是hack都很爽，但是写起来还是挺枯燥的，头有点晕555……

面向前端开发者和TextMate粉丝的vim配置

dexter_yy — Sat, 30 May 2009 22:21:23 +0800

vim是编辑器中的神器，但是因为学习曲线比较陡，界面也仿佛从石器时代穿越，广大fashion的前端工作者们难免对其有距离感。其实vim最大的萌点有两个，其一是百科全书般的文本编辑功能，其二是可以随意定制，满足任何与编辑器相关的需求和偏好，比如下面这张便是我在macbook pro上运行vim的截图，不仅语法高亮可以冒充TextMate，功能也几乎一致。

首先是做一个初始化配置脚本，在我的OSX10.5里是是~/.vimrc文件，这里只列出一些需要补充进去的设置：

"设置语法高亮的配色，在GUI界面里使用我自定义的yytextmate.vim
if has("gui_running")
colorscheme yytextmate
else
colorscheme slate
endif
"查找编码的规则（vim7默认都用utf-8，打开包含gbk字符的文件会出现乱码）
set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936
"GUI界面里的字体，默认有抗锯齿
set guifont=Monaco:h12:cANSI
"行间距，如果默认值太小，代码会非常纠结
set linespace=4
"用<>调整缩进时的长度
set shiftwidth=4
"制表符的长度，统一为4个空格的宽度
set tabstop=4
"初始窗口的宽度
set columns=195
"初始窗口的高度
set lines=45
"初始窗口的位置
winpos 52 42
"显示行号
set number
"行号栏的宽度
set numberwidth=4
"禁止自动换行
set nowrap
"在输入命令时列出匹配项目，也就是截图底部的效果
set wildmenu
"显示光标位置
set ruler
"分割窗口时保持相等的宽/高
set equalalways
"匹配括号的规则，增加针对html的<>
set matchpairs=(:),{:},[:],<:>
"让退格，空格，上下箭头遇到行首行尾时自动移到下一行（包括insert模式）
set whichwrap=b,s,<,>,[,]
"取消自动备份
set nobackup
"保存关闭文件之前保留一个备份
set writebackup
"js语法高亮脚本的设置
let g:javascript_enable_domhtmlcss=1
"设置自定义的<leader>快捷键
let mapleader=","
let g:mapleader=","
""""""""""""""""""""""""""""""
" bufExplorer插件的设置
""""""""""""""""""""""""""""""
let g:bufExplorerSortBy='mru'
let g:bufExplorerSplitRight=0
let g:bufExplorerSplitVertical=1 .
let g:bufExplorerSplitVertSize = 30
let g:bufExplorerUseCurrentWindow=1
autocmd BufWinEnter \[Buf\ List\] setl nonumber
""""""""""""""""""""""""""""""
" winManager插件的设置
""""""""""""""""""""""""""""""
let g:winManagerWindowLayout = "BufExplorer,FileExplorer|TagList"
let g:winManagerWidth = 30
let g:defaultExplorer = 0
nmap <silent> <leader>wm :WMToggle<cr>
""""""""""""""""""""""""""""""
" netrw插件的快捷键
""""""""""""""""""""""""""""""
let g:netrw_winsize = 30
nmap <silent> <leader>fe :Sexplore!<cr>
""""""""""""""""""""""""""""""
" NERDTree插件的快捷键
""""""""""""""""""""""""""""""
nmap <silent> <leader>nt :NERDTree<cr>
"把常用的ctrl快捷键映射到苹果键上（只保留cmd+c/cmd+v/cmd+z原有的功能）
map <D-y> <C-y>
map <D-e> <C-e>
map <D-f> <C-f>
map <D-b> <C-b>
map <D-u> <C-u>
map <D-d> <C-d>
map <D-w> <C-w>
map <D-r> <C-r>
map <D-o> <C-o>
map <D-i> <C-i>
map <D-g> <C-g>
map <D-p> <C-p>
map <D-n> <C-n>
map <D-a> <C-a>
cmap <D-d> <C-d>

2009.6.7更新：最新的vimrc和其他脚本已经上传到google code的项目仓库里了

=================步骤二的分割线===================

然后在个人配置目录里添加语法高亮脚本（~/.vim/syntax/），其中html和css可以直接把vim7自带的脚本复制出来（$VIMRUNTIME/syntax/），js的脚本则推荐用这个：

JavaScript syntax : Better JavaScrirpt syntax support

包含更多的关键字以及自动折叠代码的功能，也能在html文件内支持js语法高亮，需要注意的是如果要支持dom方法的关键字，需要在.vimrc里设置一个全局变量javascript_enable_domhtmlcss

我还用了这里的html.vim。

=================步骤三的分割线===================

接下来就可以对照着syntax脚本，给每个语法组设置颜色，配色脚本需要放到~/.vim/colors/里，然后在.vimrc里用colorscheme命令选定。colors脚本只需要一个，因为syntax脚本末尾都会把自定义的语法组链接到标准语法组，比如：

HiLink javaScriptDocComment Comment

所以只需要定义一套针对标准语法组的配色方案，再通过修改syntax脚本里来调整相应语言的配色。我尝试过针对不同文件类型使用不同的配色方案，发现相当麻烦，需要在切换/打开/关闭缓冲区和窗口的时候都用colorscheme重置配色：

autocmd BufNewFile,BufRead,BufEnter,WinEnter,FileType *.html,*.htm colorscheme delek

而且colorscheme会影响整个窗口（一个vim进程实例），如果在窗口内同时分割显示了几个文件，即使文件类型不同，也会同时改变颜色……

我平时最喜欢TextMate的Blackboard主题（大概是因为里面有橙色罢XD），在Aptana上也仿制过（配置文件：yytextmate.col），这次是直接在vim的slate主题基础上修改出来的，比vim.org上面那个blackboard.vim要更完善～

我的colors脚本：yytextmate.vim
我调整过的syntax脚本：javascript.vim, html.vim

=================步骤四的分割线===================

按照由外向内的顺序，现在该折腾功能了，首先是缩进插件，vim也自带有智能缩进功能，需要开启autoindent和smartindent参数，但是在编辑js代码的时候效果很不好，对于python这种靠缩进活命的语言就更不能忍了，因此至少需要装以下三个插件：

IndentAnything : Write indentations or enhance existing indentations without writing code
Javascript Indentation : Indentation for Javascript
indent/python.vim : An alternative indentation script for python

第一个放到~/.vim/plugin/里，后两个放在~/.vim/indent/里

=================步骤五的分割线===================

接下来终于要来实现TextMate最重要的功能了，TextMate之所以被称作地上最贵麦上最强的编辑器，就是因为支持大量可以通过tab或其他快捷键发动的强力Bundles，这些Bundles可以分为两种类型，一种是针对编辑器的内容执行指令（称作command），比如直接执行shell脚本，压缩js代码，对html转义，格式化JSON，编译swf等等，而指令界面是vim的核心，不但可以直接执行shell命令，也可以通过设置键位映射和宏，把复杂的操作绑定成简单的快捷键，因此这类功能原本就是vim的强项。

另一种类型的Bundles主要用来帮助程序员快速开发，通过简短的缩写＋tab键直接生成所需的代码模板（称作snippet），然后依然用tab在模板中需要改动的位置之间跳转，整个过程不需要鼠标定位，非常高效，是一种比大型IDE里常见的”code hinting”更实用的智能补全功能。

snipMate : TextMate-style snippets for Vim

上面这个非常“新”的插件让vim也具备了同样的功能，而且几乎是跟TextMate完全兼容的移植，比如这是从TextMate里取出的snippet源码：

${1:class_name}.prototype.${2:method_name} = function(${3:first_argument}) {
${0:// body...}
};

${}标签是代码插入后可以通过tab跳转的“可编辑”位置，其中的序号表示跳转顺序，冒号后的字符是默认内容。这段代码只要在前面加上snippet proto就可以直接放进~/.vim/snippets/javascript.snippets里，通过proto触发

把常见的程序结构抽象成snippet可以节省很多重复输入，比如这是我定义的一个module模式：

snippet module
/**
* ${5:Describe what this module does}
* @param {object} ${6:paramName}
*/
var ${1:classname} = (function(){
var $1Object = {
${2:privateMethod1}: function(){
},
${3:privateMethod2}: function(){
}
};
return function(opt){
var publicObj = {
options: {},
$2: $1Object.$2,
$3: $1Object.$3${4:,}
};
$.extend(publicObj.options, opt);
return publicObj;
};
})();

修改过程中会看到$1,$2,$3自动更新成你键入的名字。

我修改过的完整javascript.snippets：http://code.google.com/p/yy-vimscript/source/browse/trunk/snippets/javascript.snippets

实际上还有一个比较老牌的插件也致力于实现同样的snippet功能：

snippetsEmu : An attempt to emulate TextMate’s snippet expansion

但是它支持的模板语法比TextMate差很多，跟上面相同的prototype模板要通过这种形式定义：

let st = g:snip_start_tag
let et = g:snip_end_tag
let cd = g:snip_elem_delim
exec "Snippet proto ".st."className".et.".prototype.".st."methodName".et." = function(".st.et.")<CR>{<CR>".st.et."<CR>};<CR>".st.et

缩进容易出错，不支持用序号设定跳转顺序，安装过程也比snipMate繁复，所以被我毫不留恋的淘汰了……

为了实现更广泛的智能补全，还需要一个必装插件：

SuperTab continued. : Do all your insert-mode completion with Tab.

SuperTab让任意字符都可以通过tab补全，比较取巧的是，它会在缓冲区的上下文中寻找匹配的词来补全，因此不需要附带很庞大的API数据。

=================步骤六的分割线===================

下一步需要增强的是文件/项目管理，vim虽然自带一个FileExplorer（直接编辑一个目录时会调用它，比如:e .），还有上面提到过的wildmenu的强力辅助，但是与常见的GUI编辑器和IDE相比，仍然不太直观，因此以下插件值得一装：

The NERD tree : A tree explorer plugin for navigating the filesystem
我最喜欢的文件导航工具，设置了快捷键,nt直接在侧面打开

bufexplorer : Buffer Explorer / Browser
缓冲区导航

winmanager : A windows style IDE for Vim 6.0
把bufexploer和FileExplorer集成在左侧，类似IDE的效果，这个功能不足以让我放弃NERDTree……而且这个插件似乎很久没更新了，连支持Vim7的版本都没有，但是很多人喜欢，所以也推荐一下……

TaskList.vim : Eclipse like task list
实现Eclipse的任务列表

project.tar.gz : Organize/Navigate projects of files
项目导航工具，不过没有Eclipse好用，需要写配置脚本，跟TextMate那种拖来拖去的drawer就更不能比了……

=================步骤七的分割线===================

最后推荐的插件都是开发工具：

vcscommand.vim : CVS/SVN/SVK/git integration plugin
SVN/git管理工具，这个是必备罢。没有GUI菜单，不过快捷键也很方便，而且VimDiff是很棒的比较工具

javaScriptLint.vim : Displays JavaScript Lint warnings in the quickfix error window
看仔细啦～这个不是道格拉斯老爷子的JSLint，那个东西虽然强大（以前没觉得，最近在《代码之美》里看到道格拉斯老爷子描述了“递归下降分析”＋“运算符优先级技术”的动态语言解释器，才知道原来JSLint和JSON parser只是老爷子晒技术的承载体……），但是由于把规范约束在一个JS的安全子集上，适用面不广，设置起来也麻烦，在实际开发工作中未必实用。而这个Lint就很中规中矩，当然也没自己折腾解释器啦，直接用了Mozilla的js引擎，安装也很方便，提供一个conf文件可以设置警告条件。这个vim插件装上后，保存js文件时都会自动校验代码并显示一个提示信息窗口。

matchit : extended % matching for HTML, LaTeX, and many other languages
vim里的%命令可以在嵌套字符之间跳转（比如括号和引号，我在上面的.vimrc文件里增加了html的<>），这个插件将它的功能扩展到嵌套标签和语句

To be continue…

土豆招聘Javascript工程师的JD，终于谷出来一个

dexter_yy — Sat, 16 May 2009 16:34:02 +0800

原本是小麦的文案，被我改的啰嗦了，虽然最近在地铁上读了The Elements of Style，但是文字要写的简洁真的需要足够冷酷，我热血而且贪婪，不忍心漏掉一个信息点，所以简洁与我无缘……这篇JD发到其他地方的时候可能会删减很多，我先自己留一份……另外虽然这份JD仅仅提出了对雇员的要求，没有介绍雇主，但如果你仍然有兴趣，可以直接给我发email。

职位：Javascript开发工程师

简单的说，我们需要的是能“正确”使用Javascript的开发者。不同情况下，“正确”的标准也不尽然相同，作为土豆的javascript工程师，我们希望你大致符合如下的描述：

熟悉JS的语法特性和运行机制，比如词法作用域，闭包，原型链，无类型的OO，并乐于在此基础上钻研和探索用JS开发富客户端和复杂web应用的最佳实践和设计模式（这句话用英文写还蛮好，中文怎么拆哑啊啊啊啊～）
jQuery、YUI、MooTools等JS库，对你来说不仅只是开发工具，更是你学习代码风格、接口设计与程序架构的良师益友，你愿意了解他们，不盲目遵从，也不随意使唤。
重视团队协作，愿意探寻和改进目前还不成熟的前端开发流程，了解各种常用工具，如Firebug，YSlow，JSLint，YUI compressor……
在前端领域，你发布过一些有趣的个人项目，或是参与过开源项目，或是致力于构建自己的库和开发框架，或是作为团队核心成员开发过产品级的web应用。
一些基本前端技能如CSS或PS切图就毋需赘述了。

此外，我们乐见一些更优秀的特质：

持续关注业界的新话题和新技术。你喜欢泡在javaeye，reddit之类技术社区灌水和答疑解惑，或者总是最早读到John Resig，Douglas Crackford，Dion Almae，PPK，Dean Edwards等大牛们的新作品和演讲ppt，或者长年维护自己的博客，分享自己的经验和新实践。
你具备其他语言的开发经验，比如java和php，比如Actionscript3/Flex。这给你带来了更深入的程序设计经验和更高更全面的视角。
对于浏览器中的各种可用资源、特性和差异，你都玩弄于鼓掌之间，你有大量优化和重构方面的经验，致力于编写安全，稳定，简洁而强壮，易于扩展的客户端代码。

以上不是必需的，但如果你完全符合，我们可以考虑将土豆网总部迁至你家附近（哈哈）。

最后，如果你目前还不符合以上的描述，但很渴望做到这些，我们也很愿意为你提供面谈的机会。

—————————–最后吐槽的分割线——————————-

我觉得小麦写的最后两句是经典哑，一个字未改～

PS：题图其实是蜘蛛侠里的犀牛人……

twitter like和传统论坛

dexter_yy — Sat, 16 May 2009 15:20:11 +0800

以前字符姐姐说我和绯雨叔叔都是彼得潘，另外我还以腹黑正太闻名，但是我也不得不承认，时间既是最难战胜的敌人也是最有价值的财富。如今面临的困扰，就是上网习惯变化很大，虽然firefox的书签工具栏上依然保留了很多论坛的链接（不常上的网站我都放到delicious里），但是别说跟人论战，就连踩遍各大论坛的时间也没有叻。我现在更习惯阅读feed（通过google reader和igoogle，后者类似报纸的体验）以及twitter模式的推送信息（通过桌面客户端和像friendfeed那样实时更新的网页）。

但是支持这种阅读习惯的环境却不是很理想（对国内而言）——SNS/twitter里的信息价值不高，多数都是缺少上下文的唠叨和零碎的感悟，以及只有熟人会感兴趣的琐事和闲扯；个人博客的内容同质化严重，而且热度早已降温，更新频率普遍下降（我除外喔，我更新一直都这么少XD）。大量有价值的信息仍然深藏在论坛和社区网站（其中我最反感的形式是通过积分或虚拟货币的形式设定阅读权限，人为阻止信息传播和再利用），没有进入社会化网络。其实我大学时做的最深的地下城，也出于类似的考虑：很多有价值的信息隐藏在论坛这种“深层网络”（或者叫黯网络罢~）中，只被社区内部的核心成员所熟悉，虽然这样能把讨论维持在较高的质量，也能保证读者跟作者的直接联系，但是如果能借助更开放更易于接触的平台来传播，原本可以影响到更多人。

插图：这张图是我的书签工具栏，除了这个地方，书签的其他位置不放东西，也就是让真正的常用网站都位于随手可点的位置，不常用的网站扔到另一个管理体系里

不过幸好技术的普及速度永远比用户习惯的迁移要快，现在很多论坛都开始提供feed了（感谢Discuz!），借助friendfeed就可以很好的转换成推送信息。

也就是在friendfeed里建一个group，把feed用custom rss/atom或blog的形式导入进去，并且勾选“Include entry description as a comment”，也就是把rss里的描述节点转换成friendfeed里的评论（毕竟仅凭一个标题链接，很难决定是否深入阅读）。然后设置deliver为IM方式，便可以通过gtalk接收信息了，感觉跟IRC或群差不多~

缺点是导入的评论全都会算到自己头上……

另外由于论坛feed通常只包含新主题，如果是像过去的NT那样，大家都愿意在十几页的回帖里长篇大论的拍砖并且跑题现象严重的论坛，就很难track到有价值的内容，不过对于那样的论坛，直接参与才是更好的阅读方式罢

这个是我刚刚弄的一个聚合，收集web前端技术的资讯和资源：

https://friendfeed.com/frontend-feed-cn

这个效果也很不错，track国内的SF/F社区：

https://friendfeed.com/fantasycn

但是接下来的计划就麻烦了…动漫方面，破狗，云中之类的论坛都没feed（用VBB不是错，但是要升级到新版哑！）

还想搞一个pc game的，但是TLF，NGA之类的站帖子太多……指挥官，铁资网之类的论坛也是没feed……让我感觉有折腾这个的工夫，还不如去打demigod……

柠檬基拉老爷提醒说有很多网页转rss的工具，这个我以前确实见过很多但都没怎么体验过，想来也不太靠谱………其实我觉得，一个真正的强者，在这种情况下就应该挺身而出，开发出一个兼具抓取，聚合，呈现，通知等功能的web应用，来满足自己的需求……当然由于我最近很懒，这个idea由我来实现的可能性小于10%罢……

我还是希望有更多社区网站都能以开放的心态，把自己的内容用更友善更易于传播的形式输出，开放永远是互联网的根基，而后web2.0时代的互联网应该是有机的整体，内容在一个站点产出后，可以通过“云”的加工变得更易于查找，更易于阅读，更易于传播，而互联网用户则能接触到更广阔更个性化的信息。

————————–肆无忌惮跑题的分割线————————–

PS：题图是我最近在追的新番《东之伊甸》，要素是：近未来，游戏规则，社会弊端，写实的科技应用（围绕手机），对西方电影的引用，整体风格非常像攻壳SAC，可惜……好像只会有11话，单季都不够哑！神山健治老师请多做一些类攻壳的作品罢！

另外最近还在追《苍天航路》，要素是气势！无论人物，动作，姿态，对话，打斗场面，都燃的像港漫，我觉得多看这个一定能改善我最近多愁善感的非主流形象，成为无所畏惧的强者挖哈哈哈哈哈哈～