<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>YY in Limbo 混沌海狂想 &#187; 土豆网</title>
	<atom:link href="http://www.limboy.com/category/web/tudou/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.limboy.com</link>
	<description>这里既空虚又充实，没有规则，没有约束，创造来自思考，生存依赖想像，现实源自梦想</description>
	<lastBuildDate>Fri, 07 Oct 2011 19:33:20 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>心中的闹钟和罗盘</title>
		<link>http://www.limboy.com/2011/03/08/clock-and-compass-in-my-heart/</link>
		<comments>http://www.limboy.com/2011/03/08/clock-and-compass-in-my-heart/#comments</comments>
		<pubDate>Mon, 07 Mar 2011 17:49:15 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[土豆网]]></category>
		<category><![CDATA[纯水]]></category>

		<guid isPermaLink="false">http://www.limboy.com/?p=365</guid>
		<description><![CDATA[
四年前写过《Hero’s come back》，现在又到了要写这种文章的时候，却发现想说的东西跟当初完全一样：
Dakkon：『知道』自己是一条艰苦的道路。
The Nameless One： 知道后，我知道再过不久我要到那里去。时间和命运即将临到，我不会再留在这里。
但是要告别四年的时光，无论如何都需要一个郑重的解释，我年前写过一封farewell letter，就直接帖过来用了=_=，末尾附上我的专用告别歌曲《call me call me》 XD
From: &#8220;Yang,Dexter&#8221;
Date: January 21, 2011 4:58:07 AM GMT+08:00
To: &#8220;Xie,Grant&#8221;
Cc: &#8220;Zhang,feng&#8221;

呃，先自白一下，我在心理上有两个情结：1、最讨厌让别人扫兴。2、最害怕让别人失望。——所以这件事情我一直不想说，不过其实不管怎么拖还是无法避免，拖到年后可能对公司会有损害，所以我觉得去TMD还是赶快告诉人家罢：我在年后就需要离职了～
我觉得张峰应该会觉得很突然，因为刚加入一年左右，可能想象不到我的心境。公司年会里最后上台的十几位有四、五年历史的老员工，也让我非常感动（绝对不是场面话），实际上我也只差3个多月就可以上台了，现在我可以很清晰的回忆起07年，刚毕业和工作满一年，3月份辞职，在家宅一个月，4月中旬开始找工作，4月25日来上海加入土豆。
但我注定成不了那个能上台的人，在我内心里，有一个要求“前进”的闹钟，其实在一年前就开始鸣叫了。实际上我对时间非常敏感，最近几年我一直以这样的心态生活：总觉得自己其实得了绝症，只剩下最后几年时间。因为跟别人不一样，我在22岁之前的人生存在至少七年的空白（就类似三井寿罢），虽然我有一个原则是绝不后悔、绝不否定自己的过去，虽然我觉得那段时间有得有失，是那段时间造就了我现在的人格，形成了我现在做事的方法和态度（感谢互联网）。但必须承认的是：在过去相当漫长的一段时间里，我没有去做我应该做的事情，没有获得我能够获得的东西。所以我已经被束缚的太久了，也已经回归的够晚了，我没有时间可以停留。
内心里还埋藏着一个叫作“初衷”的罗盘。我有一个原则是绝不忘记初衷。忘记初衷相当于失去自我，但实际上人很容易在做事和与人交往过程中忘记原本的梦想和渴望。在土豆的最近几年里，我给人的印象可能就是对技术的专注和热爱，我也确实越来越把目光聚焦在技术本身上面。记得Yuki曾经说过我有很多想法，好像也很久没有那种交流了，库、框架、工具、模式、解决方案、尝试新技术，这些仿佛就是我的全部，每个项目、每个需求对我来说都好像是一个借口，只是为了在开发过程中挖掘、提炼和积累出更好的技术，至于产品本身的价值、意义、甚至体验，我都无法控制，无法影响，于是也就不关心。李戎让我给他们的前端介绍经验，我说的第一句就是“很多优秀的技术都来自失败的产品”。——但这个不是我的本意，而是妥协，技术对我来说只是手段和工具，我的初衷是创造新事物，让别人看、让别人用、让别人喜欢，换句话说，产品才是我的目的，学习技术、磨练技术、追求技术，都是为了创造更好的产品，实现那些以前做不到的事情。就好像一个魔法师，背诵咒语，苦练技巧，只为追求力量，然而为什么要获得力量呢——这个就是他的初衷。
我至今仍觉得土豆是一家很棒的公司，虽然已经物是人非，虽然在扩张过程中出现各种大公司的弊病，但它仍然保留着最好的那些部分（至少在局部范围内），这些优点也是我今后选择工作的标杆。另一方面，土豆的前端技术和前端团队，一直都让我自豪。如今土豆即将IPO，算是走完了一段路。前端的主要产品也基本上都转移到其他人（以前我即使没兴趣没效率，也像强迫症一样把东西都控制在自己手里，这样确实很不好），即便需求仍然繁多，反正我在生产力上占的比例也不大。广告和统计之类的系统都趋于稳定，技术架构的演化和规范虽然没有完成（本来我就不觉得有完成的那天），也一直保持在正确的、有前瞻性的路径上，张峰有足够的能力和执行力去推进，其实如果没有我，他还有更大的空间和自由度。我也很好奇：我留下的代码库有多少部分能保持生命力。我觉得要排除掉资历之类的因素，在“第二系统综合症”的影响下，完全由开发者的实际需求来选择，才能检验出真正有价值的部分。
现在是一个很合适的时候，不论对我还是对公司。需要强调的是，我离开不是因为工资低，这几年来一直有很多机会提供两倍以上的薪资标准，我离开也跟上市前景没关系，我好像要到6月份才能拿到最后1/4的期权，在近期离职应该是有损失的。记得加入土豆几个月之后，Vivian刚走（刚开始感到一点物是人非），有网上的老朋友邀请我去北京创业，当时我的回答是”我喜欢善始善终“，也就是说一切都取决于我自己的节奏和我个人的进展，而不是外界环境的变化，实际上从第一家公司开始，我就习惯了眼前人来人往。我不是被土豆的期权和许诺诱惑了四年，留下只是因为我在土豆想做的事情还没做完。
接下来我准备去北京，连带生活环境生活方式也一起改变，因为我觉得僵化的、习以为常的、缺少未知和期待的生活只是浪费生命。我接下来的工作会在豆瓣，实际上四年前我找工作的时候，是先投给豆瓣，然后才找到土豆——我一直都不算典型的视频网站用户，虽然日常看很多视频，但是我对片源、质量、字幕组乃至发片时间都有很宅的要求，很少在视频网站上看片，只能勉强算是一个youtube用户，所以我本来也不适合开发视频网站的产品（我觉得想从开发者的角度创造好产品，吃自己的狗粮是最重要的），我是Google, Apple和豆瓣的用户，我信仰技术，喜欢技术导向、工程师主导的产品文化，喜欢创新的、能拉近未来的事物，希望能为网络上那些在需求被忽视的情况下，仍然能自发组织起内部体系，创造出网络上大多数新内容新文化的“小众”用户们服务。
如果能完整读到这里其实有点超乎我预料了，也许对他人来说，有价值的信息就到第一段为止，我一向比较自我中心，所以写了过多的个人想法，不过，一方面是我真的很重视土豆同事对我的看法，即使要离开上海，也不希望留下任何误解和不良的影响，另一方面，我也是在梳理自己的内心，我觉得『知道』自己是一件很困难又很重要的事情，向前迈步之前，必须先重新审视自己，搞清楚自己到底是谁。
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;片尾曲的分隔线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;
call me call me

&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;片头曲的分隔线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;
Across the Borderline

]]></description>
			<content:encoded><![CDATA[<p><a href="http://t.sina.com.cn/1650793492/5en1hVjbB1A" target="_blank"><img src="http://www.limboy.com/wp-content/uploads/2011/03/054067702d6b4c76aaf33dbb3fb94d79_7-300x300.jpg" alt="" title="清空后的桌子，临别时可以用这种表情和色彩么～ @ 土豆网上海总部" width="200" height="200"  style="float:left;margin:0 20px 10px 0" /></a></p>
<p>四年前写过<a href="http://www.limboy.com/2007/03/03/herosback/" target="_blank">《Hero’s come back》</a>，现在又到了要写这种文章的时候，却发现想说的东西跟当初完全一样：</p>
<blockquote style="border:0"><p>Dakkon：『知道』自己是一条艰苦的道路。<br />
The Nameless One： 知道后，我知道再过不久我要到那里去。时间和命运即将临到，我不会再留在这里。</p></blockquote>
<p>但是要告别四年的时光，无论如何都需要一个郑重的解释，我年前写过一封farewell letter，就直接帖过来用了=_=，末尾附上我的专用告别歌曲《call me call me》 XD</p>
<p>From: &#8220;Yang,Dexter&#8221;<br />
Date: January 21, 2011 4:58:07 AM GMT+08:00<br />
To: &#8220;Xie,Grant&#8221;<br />
Cc: &#8220;Zhang,feng&#8221;<br />
<span id="more-365"></span><br />
呃，先自白一下，我在心理上有两个情结：1、最讨厌让别人扫兴。2、最害怕让别人失望。——所以这件事情我一直不想说，不过其实不管怎么拖还是无法避免，拖到年后可能对公司会有损害，所以我觉得去TMD还是赶快告诉人家罢：我在年后就需要离职了～</p>
<p>我觉得张峰应该会觉得很突然，因为刚加入一年左右，可能想象不到我的心境。公司年会里最后上台的十几位有四、五年历史的老员工，也让我非常感动（绝对不是场面话），实际上我也只差3个多月就可以上台了，现在我可以很清晰的回忆起07年，刚毕业和工作满一年，3月份辞职，在家宅一个月，4月中旬开始找工作，4月25日来上海加入土豆。</p>
<p>但我注定成不了那个能上台的人，在我内心里，有一个要求“前进”的闹钟，其实在一年前就开始鸣叫了。实际上我对时间非常敏感，最近几年我一直以这样的心态生活：总觉得自己其实得了绝症，只剩下最后几年时间。因为跟别人不一样，我在22岁之前的人生存在至少七年的空白（就类似三井寿罢），虽然我有一个原则是绝不后悔、绝不否定自己的过去，虽然我觉得那段时间有得有失，是那段时间造就了我现在的人格，形成了我现在做事的方法和态度（感谢互联网）。但必须承认的是：在过去相当漫长的一段时间里，我没有去做我应该做的事情，没有获得我能够获得的东西。所以我已经被束缚的太久了，也已经回归的够晚了，我没有时间可以停留。</p>
<p>内心里还埋藏着一个叫作“初衷”的罗盘。我有一个原则是绝不忘记初衷。忘记初衷相当于失去自我，但实际上人很容易在做事和与人交往过程中忘记原本的梦想和渴望。在土豆的最近几年里，我给人的印象可能就是对技术的专注和热爱，我也确实越来越把目光聚焦在技术本身上面。记得Yuki曾经说过我有很多想法，好像也很久没有那种交流了，库、框架、工具、模式、解决方案、尝试新技术，这些仿佛就是我的全部，每个项目、每个需求对我来说都好像是一个借口，只是为了在开发过程中挖掘、提炼和积累出更好的技术，至于产品本身的价值、意义、甚至体验，我都无法控制，无法影响，于是也就不关心。李戎让我给他们的前端介绍经验，我说的第一句就是“很多优秀的技术都来自失败的产品”。——但这个不是我的本意，而是妥协，技术对我来说只是手段和工具，我的初衷是创造新事物，让别人看、让别人用、让别人喜欢，换句话说，产品才是我的目的，学习技术、磨练技术、追求技术，都是为了创造更好的产品，实现那些以前做不到的事情。就好像一个魔法师，背诵咒语，苦练技巧，只为追求力量，然而为什么要获得力量呢——这个就是他的初衷。</p>
<p>我至今仍觉得土豆是一家很棒的公司，虽然已经物是人非，虽然在扩张过程中出现各种大公司的弊病，但它仍然保留着最好的那些部分（至少在局部范围内），这些优点也是我今后选择工作的标杆。另一方面，土豆的前端技术和前端团队，一直都让我自豪。如今土豆即将IPO，算是走完了一段路。前端的主要产品也基本上都转移到其他人（以前我即使没兴趣没效率，也像强迫症一样把东西都控制在自己手里，这样确实很不好），即便需求仍然繁多，反正我在生产力上占的比例也不大。广告和统计之类的系统都趋于稳定，技术架构的演化和规范虽然没有完成（本来我就不觉得有完成的那天），也一直保持在正确的、有前瞻性的路径上，张峰有足够的能力和执行力去推进，其实如果没有我，他还有更大的空间和自由度。我也很好奇：我留下的代码库有多少部分能保持生命力。我觉得要排除掉资历之类的因素，在“第二系统综合症”的影响下，完全由开发者的实际需求来选择，才能检验出真正有价值的部分。</p>
<p>现在是一个很合适的时候，不论对我还是对公司。需要强调的是，我离开不是因为工资低，这几年来一直有很多机会提供两倍以上的薪资标准，我离开也跟上市前景没关系，我好像要到6月份才能拿到最后1/4的期权，在近期离职应该是有损失的。记得加入土豆几个月之后，Vivian刚走（刚开始感到一点物是人非），有网上的老朋友邀请我去北京创业，当时我的回答是”我喜欢善始善终“，也就是说一切都取决于我自己的节奏和我个人的进展，而不是外界环境的变化，实际上从第一家公司开始，我就习惯了眼前人来人往。我不是被土豆的期权和许诺诱惑了四年，留下只是因为我在土豆想做的事情还没做完。</p>
<p>接下来我准备去北京，连带生活环境生活方式也一起改变，因为我觉得僵化的、习以为常的、缺少未知和期待的生活只是浪费生命。我接下来的工作会在豆瓣，实际上四年前我找工作的时候，是先投给豆瓣，然后才找到土豆——我一直都不算典型的视频网站用户，虽然日常看很多视频，但是我对片源、质量、字幕组乃至发片时间都有很宅的要求，很少在视频网站上看片，只能勉强算是一个youtube用户，所以我本来也不适合开发视频网站的产品（我觉得想从开发者的角度创造好产品，吃自己的狗粮是最重要的），我是Google, Apple和豆瓣的用户，我信仰技术，喜欢技术导向、工程师主导的产品文化，喜欢创新的、能拉近未来的事物，希望能为网络上那些在需求被忽视的情况下，仍然能自发组织起内部体系，创造出网络上大多数新内容新文化的“小众”用户们服务。</p>
<p>如果能完整读到这里其实有点超乎我预料了，也许对他人来说，有价值的信息就到第一段为止，我一向比较自我中心，所以写了过多的个人想法，不过，一方面是我真的很重视土豆同事对我的看法，即使要离开上海，也不希望留下任何误解和不良的影响，另一方面，我也是在梳理自己的内心，我觉得『知道』自己是一件很困难又很重要的事情，向前迈步之前，必须先重新审视自己，搞清楚自己到底是谁。</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;片尾曲的分隔线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p>
<p>call me call me</p>
<p><embed src="http://www.tudou.com/v/Z9b4J5HHR9w/&#038;rpid=2777994/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="480" height="400"></embed></p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;片头曲的分隔线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p>
<p>Across the Borderline</p>
<p><embed src="http://www.tudou.com/v/8O61sOzT_CQ/&#038;rpid=2777994/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="480" height="400"></embed></p>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2011/03/08/clock-and-compass-in-my-heart/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>我觉得做NARUTO TV动画的人应该切腹</title>
		<link>http://www.limboy.com/2009/09/20/naruto-tv-sucks/</link>
		<comments>http://www.limboy.com/2009/09/20/naruto-tv-sucks/#comments</comments>
		<pubDate>Sun, 20 Sep 2009 15:45:48 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[代码]]></category>
		<category><![CDATA[动漫]]></category>
		<category><![CDATA[土豆网]]></category>
		<category><![CDATA[日漫]]></category>
		<category><![CDATA[游戏]]></category>
		<category><![CDATA[音乐]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2009/09/20/naruto-tv-sucks/</guid>
		<description><![CDATA[虽然早在火影沦为四大民工漫之首的若干年前，我就已经没怎么追了（漫画偶尔看看），但是早期几个章节的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分钟左右的完整动画……汗……
]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.limboy.com/2009/09/20/naruto-tv-sucks/rock_leepng/' rel='attachment wp-att-244' title='rock_lee.png'><img src='http://www.limboy.com/wp-content/uploads/2009/09/rock_lee.png' alt='rock_lee.png' style="margin:0 10px;float:left;width:150px;border:0" /></a>虽然早在火影沦为四大民工漫之首的若干年前，我就已经没怎么追了（漫画偶尔看看），但是早期几个章节的tv动画（比如卡卡西vs再不斩，中忍考试李洛克vs我爱罗）曾经让我非常非常感动，我不是指那些纠结的人性和搅基的情感之类的玩意让我感动，是指镜头变化和速度感都非常华丽的打斗场面，最近的一部能让我有类似热血感觉的作品是BONES的SOUL EATER。</p>
<p>那段时期大概也是西尾铁也和他手下那帮超强的作画人员还在全力参与的阶段，西尾铁也这个人在国内不算出名，但是他参与过原画的几乎全是神作：《攻壳机动队SAC GIG》，《交响诗篇eureka7》，《精灵守护者》，《东之伊甸》（刚完结，前段时间最喜欢的），押井守最近的剧场动画《空中杀手》（The Sky Crawlers）的人设也是他，主要人物的脸和身体就像火影里一样圆润……<span id="more-243"></span></p>
<div style="clear:left;">
<p><object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/LQ3MzZhB62o"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/LQ3MzZhB62o" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object><br />
<em>Rock Lee vs 我爱罗的一个MAD版</em></p>
<p><object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/qKYKfAmdlfE"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/qKYKfAmdlfE" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object><br />
<em>精灵守护者里的第一场打斗片段</em></p>
<p><object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/n691HdFt-ak"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/n691HdFt-ak" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object><br />
<em>精灵守护者里评价最高的打斗片段</em>
</div>
<p>西尾铁也并不是一个人在战斗，他的背后是日本最强（在西方人眼里，对我来说只能算“之一”，BONES，MADHOUSE等公司也能保证必出精品）的动画公司IG，跟他同级别能保证作品质量的强者还有：沖浦啓之（罗德斯岛战记原画，MEMORIES原画，攻壳GIS作画监督，COWBOY BEBOP剧场版OP分镜，演出和原画），黄瀬和哉（天空战记作画监督，EVA TV/旧剧场版/新剧场版作画监督，浪客剑心原画，攻壳SAC SSS原画），此三人合称IG作画三大神。他们参与过的神作不止这些，我只拿自己熟悉的举例。</p>
<p><object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/cX7LR76ik2g"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/cX7LR76ik2g" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object><br />
<em>Cowboy Bebop剧场版天国之扉的op《Ask DNA》，菅野洋子作曲</em></p>
<p>实际上早期的火影创作团队简直是精英云集，比如音乐是由天才作曲家増田俊郎（他为《虫师》创作的两张碟可能更有名）和擅长日本民俗乐器的摇滚乐队“六三四Musashi”（演奏尺八的那位：<a href="http://www.douban.com/subject/2213500/" target="_blank">http://www.douban.com/subject/2213500/</a>）合作的，包括前三张OST专辑，我最喜欢其中的摇滚部分，比如OST1里的Need To Be Strong和OST3里的自来也主题。</p>
<p><object width="420" height="30"><param name="movie" value="http://www.tudou.com/v/1aV_pEi2ix4"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/1aV_pEi2ix4" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="30"></embed></object><br />
<em>自来也主题曲</em></p>
<p>但是像西尾这样的人才不可能一直把精力花在柯南般的没完没了的国民动画上，再加上投入的成本大幅降低，为避免进度赶上漫画而搞出的大量脑残般的回忆段落和原创剧情，早期那些热血的动作场面和CG再也看不到了……后期的火影tv版给我的最深刻印象是：主角们在树和树之间跳跃可以花上几十分钟的片长，其滞空时间和思维活动的复杂深邃，远远胜过当年灌篮高手在角色跳投或抢篮板过程中让观众发表五分钟评论的场面。</p>
<p>昨天晚上<del>哥很寂寞</del>，一边看书一边在台式机的chrome上挂<a href="http://douwan.tudou.com" target="_blank">豆丸</a>，无意中发现火影最新的OP《萤之光》很好听（可能是因为结合了画面才好听，生物股长这个乐队在红白歌会里看到过，没什么特殊印象），在豆丸里切换了几个相关视频，发现一个MAD版本（MAD即MADMOVIE，这个词起源很宅，反正在日本动漫社区里指二次创作影像），大部分画面是从PS3游戏<a href="http://ps3.ign.com/articles/867/867121p1.html" target="_blank">Naruto: Ultimate Ninja Storm</a>里剪辑出来的，身为一个没买过任何次世代主机被别人主动赠与X360长达两周时间连GTA4都没通关的坚定的久经考验的PC玩家，当时我就震精了……靠这战斗画面太华丽了口牙！速度感满分（比如阿斯玛的斩击，日向雏田的八卦六十四掌），还表现出了漫画里没出现过传说中的技能（四代火影的时空忍术，效果确实像金色闪光）。相比之下现在的动画究竟算什么水平口牙！为什么差距这么大，难道就因为<del>南梦宫更有钱么</del>（纠正……好像是开发.hack的那个工作室搞的），关键还是认真的充满爱的态度罢！</p>
<p>视频来源是niconico，土豆上只能找到三部，基本上所有人物都出场了，优酷上搜不到：</p>
<p><object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/orxR5UdpLQE"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/orxR5UdpLQE" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object><br />
<br/><br />
<object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/pbnBfT4a25Y"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/pbnBfT4a25Y" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object><br />
<br/><br />
<object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/tfJv8DJeNHs"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/tfJv8DJeNHs" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object></p>
<p>然则画面实在是太模糊了，土豆的MPS系统应该不至于把好片源压成这个鬼样子，因此，这就是我写这篇blog的目的叻！虽然你看完之后可能以为我在发软文……咳……但是……人家没有骗你～人家真的就是想知道这个视频的出处地址或者其他清晰版本嘛～～跪求！（我把别人以前共享的niconico帐号给忘了T___T）</p>
<p>P.S. 最后我要指出……在写这篇blog的时间内很轻松的搜出以上关键词比较特殊的视频，感觉土豆自己研发的搜索系统还是蛮好用的喔活活活活……唯一失败的是soul eater的打斗片段……如果在youtube上搜索“Mifune vs Blackstar”，一定是大把的两三分钟左右的片段，而国内视频用户上传的几乎全是25分钟左右的完整动画……汗……</p>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2009/09/20/naruto-tv-sucks/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>[内销转出口]寻找最好的JavaScript面向对象模式和封装结构</title>
		<link>http://www.limboy.com/2009/09/20/tudou-javascript-oop-and-module-guideline/</link>
		<comments>http://www.limboy.com/2009/09/20/tudou-javascript-oop-and-module-guideline/#comments</comments>
		<pubDate>Sun, 20 Sep 2009 05:02:22 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[代码]]></category>
		<category><![CDATA[土豆网]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2009/09/20/tudou-javascript-oop-and-module-guideline/</guid>
		<description><![CDATA[好久不见，这次发的不是笔记啦，是我在公司内部的前端wiki上更新的文档……这个抛弃所有wiki语法要求用户直接手写语义化html用json配置导航的wiki排版相当漂亮，让我这样的懒人也有了码字的欲望，发起人小麦实在系功德无量……

这篇文章去年就准备写，想用循序渐进的形式推演出一个Module Pattern的最佳实践，不过想法越多，归纳总结表达出来的成本就越高，所以一直拖延……这次发的文档是一个简化版，去掉了各式各样乱七八糟的写法，只包含几个常用的，说明文字也不多主要看代码-__-b……初衷是作为给土豆前端team里新来的同事看的提纲（对了由于某人叛逃到产品设计部门，现在又空出一个名额，有兴趣的同学抓紧时间投简历，这次是魔都总部的职位，不是成都的），所以要解释一下，文档中提到的TUI是一个js库（名字是很俗，不过我上次发现某年纪一大把的人也跟我一样俗），土豆一直采用双库并行（不要看成双工并行…）的形式，在紧跟开源社区发展的同时自己掌控所有环节和基础架构，没有使用jQuery UI和那套基于DOM的插件结构，而jQuery自己几乎不提供OOP工具（这是好事），实际上自己创建这类工具非常简单快捷，相关的代码我提取了一下直接帖在末尾了，仅供参考。
另外，为了符合Nicholas Zakas在最近的国际会议上传达的精神，我修改了若干变量名跟他ppt里的例子保持一致——这件事教育我们，平时多上slideshow.net对保持先进性是多么重要。
Tudou&#8217;s JavaScript Guideline &#8212; OOP and Module
介绍土豆在面向对象和模块化设计方面的工具和实践

&#8220;Don&#8217;t Repeat Yourself.&#8221; (DRY)
&#8220;Rather than construction, programming is more like gardening.&#8221;
Quote from: Andy Hunt and Dave Thomas, The Pragmatic Programmer
			

索引

创建类，继承，混入，实例化
模块化 Module Pattern
沙盒，模块间的解耦，与外部通信
按需加载模块 On-demand Lazy Load
总结


创建类，继承，混入，实例化
我们依赖的核心工具是TUI.clone
简洁的，支持私有属性，不需要prototype的写法：
JS是基于原型而不是基于类的面向对象语言，JS是“无类型”的，类是仿造出来的概念，实质只有对象。
new只是用来复制对象，构造函数只是用来返回对象, 两者对JS的OOP来说并不是必须的。
var dog = function(options){
&#160; &#160; var&#160;privateAttr = 1; //私有属性
&#160; &#160; var&#160;private_method = function(){}; //私有方法
&#160; &#160; return&#160;{
&#160; &#160; &#160; &#160; option: options, [...]]]></description>
			<content:encoded><![CDATA[<p>好久不见，这次发的不是笔记啦，是我在公司内部的前端wiki上更新的文档……这个抛弃所有wiki语法要求用户直接手写语义化html用json配置导航的wiki排版相当漂亮，让我这样的懒人也有了码字的欲望，发起人小麦实在系功德无量……</p>
<p><a href='http://www.limboy.com/wp-content/uploads/2009/09/picture-2.png' title='picture-2.png' target="_blank"><img src='http://www.limboy.com/wp-content/uploads/2009/09/picture-2.png' alt='picture-2.png' style="width:200px;margin:5px;" /></a><a href='http://www.limboy.com/wp-content/uploads/2009/09/picture-3.png'  target="_blank"><img src='http://www.limboy.com/wp-content/uploads/2009/09/picture-3.png' alt='picture-3.png'  style="width:200px;margin:5px;" /></a></p>
<p>这篇文章去年就准备写，想用循序渐进的形式推演出一个<a href="http://www.yuiblog.com/blog/2007/06/12/module-pattern/" target="_blank">Module Pattern</a>的最佳实践，不过想法越多，归纳总结表达出来的成本就越高，所以一直拖延……这次发的文档是一个简化版，去掉了各式各样乱七八糟的写法，只包含几个常用的，说明文字也不多主要看代码-__-b……初衷是作为给土豆前端team里新来的同事看的提纲（对了由于某人叛逃到产品设计部门，现在又空出一个名额，有兴趣的同学抓紧时间<a href="http://www.mikkolee.com/256" target="_blank">投简历</a>，这次是魔都总部的职位，不是成都的），所以要解释一下<span id="more-240"></span>，文档中提到的<var>TUI</var>是一个js库（名字是很俗，不过我上次发现某年纪一大把的人也跟我<a href="http://blog.digg.com/?p=621" target="_blank">一样俗</a>），土豆一直采用双库并行（不要看成双工并行…）的形式，在紧跟开源社区发展的同时自己掌控所有环节和基础架构，没有使用jQuery UI和那套基于DOM的插件结构，而jQuery自己几乎不提供OOP工具（这是好事），实际上自己创建这类工具非常简单快捷，相关的代码我提取了一下直接帖在末尾了，仅供参考。</p>
<p>另外，为了符合Nicholas Zakas在最近的<a href="http://www.yuiblog.com/blog/2009/09/17/video-bayjax-sept-09/" target="_blank">国际会议</a>上传达的精神，我修改了若干变量名跟他<a href="http://www.slideshare.net/nzakas/scalable-javascript-application-architecture" target="_blank">ppt</a>里的例子保持一致——这件事教育我们，平时多上slideshow.net对保持先进性是多么重要。</p>
<h2>Tudou&#8217;s JavaScript Guideline &#8212; OOP and Module</h2>
<p><em>介绍土豆在面向对象和模块化设计方面的工具和实践</em></p>
<blockquote>
<p>&#8220;Don&#8217;t Repeat Yourself.&#8221; (DRY)</p>
<p>&#8220;Rather than construction, programming is more like gardening.&#8221;</p>
<p><cite>Quote from: Andy Hunt and Dave Thomas, The Pragmatic Programmer</cite>
			</p></blockquote>
<div class="section">
<h2>索引</h2>
<ol>
<li><a href="#sec-1">创建类，继承，混入，实例化</a></li>
<li><a href="#sec-2">模块化 Module Pattern</a></li>
<li><a href="#sec-3">沙盒，模块间的解耦，与外部通信</a></li>
<li><a href="#sec-4">按需加载模块 On-demand Lazy Load</a></li>
<li><a href="#sec-5">总结</a></li>
</ol></div>
<div class="section" id="sec-1">
<h2>创建类，继承，混入，实例化</h2>
<p>我们依赖的核心工具是<var>TUI.clone</var></p>
<h3>简洁的，支持私有属性，不需要prototype的写法：</h3>
<p>JS是基于原型而不是基于类的面向对象语言，JS是“无类型”的，类是仿造出来的概念，实质只有对象。<br />
<var>new</var>只是用来复制对象，构造函数只是用来返回对象, 两者对JS的OOP来说并不是必须的。</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">dog</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">privateAttr</span><span style="color: Gray;"> = </span><span style="color: Maroon;">1</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//私有属性</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">private_method</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(){}</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//私有方法</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">option</span><span style="color: Gray;">: </span><span style="color: Blue;">options</span><span style="color: Gray;">, </span><span style="color: #ffa500;">//实例属性</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">method1</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(){}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">xiaobai</span><span style="color: Gray;"> = </span><span style="color: Blue;">dog</span><span style="color: Olive;">({})</span><span style="color: Gray;">;</span></li></ol></div>
<ul>
<li>对私有属性/方法的支持比较好</li>
<li>最适合单例模式(Singleton)</li>
<li>延迟单例的初始化，提高页面初始化的速度</li>
<li>缺点：对继承的支持不佳</li>
<li>缺点：在需要频繁创建大量对象，而方法非常多的场合，浪费资源（因为每个实例的方法指向的都是不同的函数对象，每次实例化都要重新生成所有函数）</li>
</ul>
<p>在第2个缺点的场合，传统的prototype写法效率更高，支持继承，但是代码分散，不易读，TUI.clone提供了更好的写法——</p>
<h3>传统的、支持继承的、仿Ruby风格的Class写法：</h3>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: #ffa500;">//创建新类</span></li>
<li><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Dog</span><span style="color: Gray;"> = </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">newClass</span><span style="color: Olive;">({</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">initialize</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">){</span><span style="color: Gray;">&nbsp;</span><span style="color: #ffa500;">//构造函数</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">option</span><span style="color: Gray;"> = </span><span style="color: Blue;">options</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">//实例化</span></li>
<li><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">xiaobai</span><span style="color: Gray;"> = </span><span style="color: Green;">new</span><span style="color: Gray;"> </span><span style="color: Blue;">Dog</span><span style="color: Olive;">()</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">//继承</span></li>
<li><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Cat</span><span style="color: Gray;"> = </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">newClass</span><span style="color: Olive;">(</span><span style="color: Blue;">dog</span><span style="color: Gray;">, </span><span style="color: Olive;">{</span><span style="color: Gray;"> </span><span style="color: #ffa500;">//只允许单继承</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">mixin</span><span style="color: Gray;">: </span><span style="color: Olive;">[</span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">event</span><span style="color: Olive;">]</span><span style="color: Gray;">, </span><span style="color: #ffa500;">//混入其他方法</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">initialize</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">superClass</span><span style="color: Gray;">.</span><span style="color: Blue;">call</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Gray;">, </span><span style="color: Blue;">arguments</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//调用父类构造函数</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li></ol></div>
<ul>
<li>风格类似<var>mootools</var>的<var>new Class</var></li>
<li><var>TUI.newClass</var>只是<var>TUI.clone</var>的封装</li>
<li><var>mixin</var>相当于在构造函数里<var>$.extend(this.prototype, TUI.event)</var></li>
<li>实际上应该少用继承，多用mixin和组合模式，后者更符合JS的特点</li>
<li>缺点：封装效果不好，不支持私有属性和方法</li>
</ul>
<p><var>TUI.clone</var>既可以复制构造函数的<var>prototype</var>，也可以直接复制对象（跟jQuery.extend不同，依靠原型继承），所以利用它直接生成实例。</p>
<p>这样可以在不引入<var>prototype</var>和语法糖的情况下把第一种方法改造的同样高效——</p>
<h3>对象克隆工厂的写法：</h3>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">dog</span><span style="color: Gray;"> = </span><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">jQuery</span><span style="color: Gray;">, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">){</span><span style="color: Gray;"> </span><span style="color: #ffa500;">//传入需要访问的全局命名空间</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">a</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">xxx</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//不作为状态的私有属性</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">private_method</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span><span style="color: Gray;"> </span><span style="color: #ffa500;">//私有方法</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">alert</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">option</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">PublicObj</span><span style="color: Gray;"> = </span><span style="color: Olive;">{</span><span style="color: Gray;"> </span><span style="color: #ffa500;">//相当于prototype对象</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">method1</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">private_method</span><span style="color: Gray;">.</span><span style="color: Blue;">call</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//访问私有方法, 共享状态</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">){</span><span style="color: Gray;"> </span><span style="color: #ffa500;">//对象工厂</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">obj</span><span style="color: Gray;"> = </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">clone</span><span style="color: Olive;">(</span><span style="color: Blue;">PublicObj</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//克隆</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">obj</span><span style="color: Gray;">.</span><span style="color: Blue;">aption</span><span style="color: Gray;"> = </span><span style="color: Blue;">options</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//构造函数中的常规任务</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; $.</span><span style="color: Blue;">extend</span><span style="color: Olive;">(</span><span style="color: Blue;">obj</span><span style="color: Gray;">, </span><span style="color: Blue;">cat</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//mixin其他对象的方法</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">obj</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">})(</span><span style="color: Blue;">jQuery</span><span style="color: Gray;">, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">xiaobai</span><span style="color: Gray;"> = </span><span style="color: Blue;">dog</span><span style="color: Olive;">({})</span><span style="color: Gray;">;</span></li></ol></div>
<ul>
<li>效率高，封装好，耦合少易于修改和扩展</li>
<li>缺点：私有属性不能作为实例状态</li>
</ul>
<p>把以上第一种方法和第三种方法结合互补，为module模式——</p>
</p></div>
<div class="section" id="sec-2">
<h2>模块化 Module Pattern</h2>
<p>核心工具是<var>TUI.module</var></p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">widget</span><span style="color: Gray;">.</span><span style="color: Blue;">dog</span><span style="color: Gray;"> = </span><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Gray;">$, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">){</span><span style="color: Gray;"> </span><span style="color: #ffa500;">//除了库的命名空间，尽量不访问全局变量</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #ffa500;">//所有模块代码都封闭在这个区域内</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">a</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">xxx</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//不作为状态的私有属性</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">private_method</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span><span style="color: Gray;"> </span><span style="color: #ffa500;">//私有方法</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">alert</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">option</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">privateObj</span><span style="color: Gray;"> = </span><span style="color: Olive;">{}</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//可作为状态的私有属性</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">privateAttr</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">name</span><span style="color: Gray;">, </span><span style="color: Blue;">value</span><span style="color: Olive;">){</span><span style="color: Gray;"> </span><span style="color: #ffa500;">//读写私有属性的方法，只能在内部使用</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">p</span><span style="color: Gray;"> = </span><span style="color: Green;">private</span><span style="color: Olive;">[</span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">objectId</span><span style="color: Olive;">]</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Blue;">p</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">p</span><span style="color: Gray;"> = </span><span style="color: Green;">private</span><span style="color: Olive;">[</span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">objectId</span><span style="color: Olive;">]</span><span style="color: Gray;"> = </span><span style="color: Olive;">{}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Blue;">value</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">p</span><span style="color: Olive;">[</span><span style="color: Blue;">name</span><span style="color: Olive;">]</span><span style="color: Gray;"> = </span><span style="color: Blue;">value</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">p</span><span style="color: Olive;">[</span><span style="color: Blue;">name</span><span style="color: Olive;">]</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">dog</span><span style="color: Gray;"> = </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">newClass</span><span style="color: Olive;">(</span><span style="color: Blue;">parentClass</span><span style="color: Gray;">, </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">mixin</span><span style="color: Gray;">: </span><span style="color: Olive;">[</span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">event</span><span style="color: Olive;">]</span><span style="color: Gray;">, </span><span style="color: #ffa500;">//混入其他方法</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">initialize</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">superClass</span><span style="color: Gray;">.</span><span style="color: Blue;">call</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Gray;">, </span><span style="color: Blue;">arguments</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//访问父类构造函数</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">public_method</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">b</span><span style="color: Gray;"> = </span><span style="color: Blue;">a</span><span style="color: Gray;"> + </span><span style="color: Blue;">privateAttr</span><span style="color: Gray;">.</span><span style="color: Blue;">call</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Gray;">, </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//访问私有属性</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">private_method</span><span style="color: Gray;">.</span><span style="color: Blue;">call</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//访问私有方法</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">})</span><span style="color: Gray;">;&nbsp; &nbsp; </span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #ffa500;">//工厂方法，给别人使用的接口</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">obj</span><span style="color: Gray;"> = </span><span style="color: Green;">new</span><span style="color: Gray;"> </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">dog</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//实例加上唯一的ID，类似Ruby，注意只用+new Date()不能避免重复</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">obj</span><span style="color: Gray;">.</span><span style="color: Blue;">objectId</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">tui_object</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> + </span><span style="color: Olive;">(</span><span style="color: Gray;"> +</span><span style="color: Green;">new</span><span style="color: Gray;">&nbsp;</span><span style="color: Teal;">Date</span><span style="color: Olive;">()</span><span style="color: Gray;">*</span><span style="color: Maroon;">10000</span><span style="color: Gray;"> + </span><span style="color: Teal;">Math</span><span style="color: Gray;">.</span><span style="color: Blue;">random</span><span style="color: Olive;">(</span><span style="color: Maroon;">1</span><span style="color: Olive;">)</span><span style="color: Gray;">*</span><span style="color: Maroon;">10000</span><span style="color: Gray;"> </span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">obj</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">})(</span><span style="color: Blue;">jQuery</span><span style="color: Gray;">, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li></ol></div>
<p>为了便于理解，以上代码是集中在一起的简单实现，进一步封装之后，有些步骤可以省略：</p>
<ul>
<li><var>objectId</var>的初始化已经由<var>TUI.clone</var>实现</li>
<li><var>privateAttr</var>方法和私有属性map由<var>TUI.newModule</var>实现</li>
<li><var>TUI.newModule</var>是<var>TUI.namespace</var>和<var>TUI.module.create</var>的封装</li>
</ul>
<h3>基于 TUI.clone 和 TUI.newModule 的写法</h3>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">newModule</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">TUI.widget.dog</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">, </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">sandbox</span><span style="color: Gray;">, $, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">dog</span><span style="color: Gray;"> = </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">newClass</span><span style="color: Olive;">(</span><span style="color: Blue;">parentClass</span><span style="color: Gray;">, </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">mixin</span><span style="color: Gray;">: </span><span style="color: Olive;">[</span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">event</span><span style="color: Olive;">]</span><span style="color: Gray;">, </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">sandbox</span><span style="color: Gray;">: </span><span style="color: Blue;">sandbox</span><span style="color: Gray;">, </span><span style="color: #ffa500;">//有sandbox属性传入时，attr属性会被转化为外部无法访问的私有属性</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">attr</span><span style="color: Gray;">: </span><span style="color: Olive;">{</span><span style="color: Gray;">&nbsp;</span><span style="color: #ffa500;">//初始化私有属性的默认值</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">a</span><span style="color: Gray;">: </span><span style="color: Maroon;">1</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">b</span><span style="color: Gray;">: </span><span style="color: Maroon;">2</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">initialize</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">superClass</span><span style="color: Gray;">.</span><span style="color: Blue;">call</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Gray;">, </span><span style="color: Blue;">arguments</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//访问父类构造函数</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">public_method</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">b</span><span style="color: Gray;"> = </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">attr</span><span style="color: Olive;">(</span><span style="color: Blue;">sandbox</span><span style="color: Gray;">, </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">a</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;"> + </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">attr</span><span style="color: Olive;">(</span><span style="color: Blue;">sandbox</span><span style="color: Gray;">, </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//访问私有属性，通过sandbox参数来验证身份</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">})</span><span style="color: Gray;">;&nbsp; &nbsp; </span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">obj</span><span style="color: Gray;"> = </span><span style="color: Green;">new</span><span style="color: Gray;"> </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">dog</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">obj</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span><span style="color: Gray;">, </span><span style="color: Olive;">[</span><span style="color: Blue;">jQuery</span><span style="color: Gray;">, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">])</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">xiaobai</span><span style="color: Gray;"> = </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">widget</span><span style="color: Gray;">.</span><span style="color: Blue;">dog</span><span style="color: Olive;">({})</span><span style="color: Gray;">;</span></li>
<li><span style="color: Blue;">console</span><span style="color: Gray;">.</span><span style="color: Blue;">log</span><span style="color: Olive;">(</span><span style="color: Blue;">xiaobai</span><span style="color: Gray;">.</span><span style="color: Blue;">sandbox</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//undefined</span></li>
<li><span style="color: Blue;">console</span><span style="color: Gray;">.</span><span style="color: Blue;">log</span><span style="color: Olive;">(</span><span style="color: Blue;">xiaobai</span><span style="color: Gray;">.</span><span style="color: Blue;">attr</span><span style="color: Olive;">)</span><span style="color: Gray;">;&nbsp; &nbsp; </span><span style="color: #ffa500;">//undefined</span></li></ol></div>
<p>这里的<var>sandbox</var>其实还可以做很多事——</p>
</p></div>
<div class="section" id="sec-3">
<h2>沙盒，模块间的解耦，与外部通信</h2>
<p><var>TUI.module.create</var>方法其实来自<var>TUI.moduleClass</var>的实例，其他独立应用同样可以继承<var>TUI.moduleClass</var>，构造自己的沙盒对象</var></p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">Douwan</span><span style="color: Gray;"> = </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">newClass</span><span style="color: Olive;">(</span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">moduleClass</span><span style="color: Gray;">, </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">notify</span><span style="color: Gray;">: </span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">clone</span><span style="color: Olive;">(</span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">event</span><span style="color: Olive;">)</span><span style="color: Gray;">, </span><span style="color: #ffa500;">//事件在这里可以理解为通信器</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">initialize</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">options</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">me</span><span style="color: Gray;"> = </span><span style="color: Green;">this</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">_sandbox</span><span style="color: Gray;">.</span><span style="color: Blue;">notify</span><span style="color: Gray;"> = </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">notify</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//把通信器指向自己，避免跟全局的事件命名冲突</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//给沙盒增加ajax方法，让module内的代码通过沙盒来通信，屏蔽url路径和响应格式之类的细节</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">url</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">http://www.tudou.com/path/service.action</span><span style="color: #8b0000;">&quot;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">_sandbox</span><span style="color: Gray;">.</span><span style="color: Blue;">getJSON</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">param</span><span style="color: Gray;">, </span><span style="color: Blue;">fn</span><span style="color: Olive;">){</span><span style="color: Gray;">&nbsp;</span><span style="color: #ffa500;">//模块只需要传url参数</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">me</span><span style="color: Gray;">.</span><span style="color: Blue;">getJSON</span><span style="color: Olive;">(</span><span style="color: Blue;">url</span><span style="color: Gray;">, </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">text</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">jsondata</span><span style="color: Gray;"> = </span><span style="color: Blue;">me</span><span style="color: Gray;">.</span><span style="color: Blue;">toJSON</span><span style="color: Olive;">(</span><span style="color: Blue;">text</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">fn</span><span style="color: Olive;">(</span><span style="color: Blue;">jsondata</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//无论返回格式是什么，都传json给模块</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">toJSON</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(){}</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">getJSON</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(){}</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li></ol></div>
<p>让应用的不同模块之间解耦，避免在模块内部直接使用外部的命名（除了库的api）</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">douwanObj</span><span style="color: Gray;"> = </span><span style="color: Green;">new</span><span style="color: Gray;"> </span><span style="color: Blue;">Douwan</span><span style="color: Olive;">({})</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">module1</span><span style="color: Gray;"> = </span><span style="color: Blue;">douwanObj</span><span style="color: Gray;">.</span><span style="color: Blue;">module</span><span style="color: Gray;">.</span><span style="color: Blue;">create</span><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">sandbox</span><span style="color: Gray;">, $, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">sandbox</span><span style="color: Gray;">.</span><span style="color: Blue;">getJSON</span><span style="color: Olive;">({</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">iid</span><span style="color: Gray;">: </span><span style="color: Maroon;">10000</span><span style="color: Gray;"> </span><span style="color: Olive;">}</span><span style="color: Gray;">, </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">json</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//通过通信器调用module2.update</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">sondbox</span><span style="color: Gray;">.</span><span style="color: Blue;">notify</span><span style="color: Gray;">.</span><span style="color: Blue;">fire</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">module2-update</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">, </span><span style="color: Olive;">[</span><span style="color: Blue;">json</span><span style="color: Gray;">.</span><span style="color: Blue;">date</span><span style="color: Olive;">])</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span><span style="color: Gray;">, </span><span style="color: Olive;">[</span><span style="color: Blue;">JQuery</span><span style="color: Gray;">, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">])</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">module2</span><span style="color: Gray;"> = </span><span style="color: Blue;">douwanObj</span><span style="color: Gray;">.</span><span style="color: Blue;">module</span><span style="color: Gray;">.</span><span style="color: Blue;">create</span><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">sandbox</span><span style="color: Gray;">, $, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">obj</span><span style="color: Gray;"> = </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">update</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(){}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #ffa500;">//注册一个update消息的接收器</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">sondbox</span><span style="color: Gray;">.</span><span style="color: Blue;">notify</span><span style="color: Gray;">.</span><span style="color: Blue;">bind</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">module2-update</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">, </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">date</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">obj</span><span style="color: Gray;">.</span><span style="color: Blue;">update</span><span style="color: Olive;">(</span><span style="color: Blue;">date</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">obj</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span><span style="color: Gray;">, </span><span style="color: Olive;">[</span><span style="color: Blue;">JQuery</span><span style="color: Gray;">, </span><span style="color: Blue;">TUI</span><span style="color: Olive;">])</span><span style="color: Gray;">;</span></li></ol></div>
<p>页面初始化时并不一定需要渲染或操作所有模块，因此有些模块的代码可以放在外部文件里，需要的时候再注入到页面里，类似<var>Python</var>的<var>import</var></p>
</p></div>
<div class="section" id="sec-4">
<h2>按需加载模块 On-demand Lazy Load</h2>
<p>自动管理各个模块之间的依赖关系，根据代码内容加载不同的文件，这样做的成本太高，适合大型企业应用，我们的设计原则是“恰到好处”，所以通过文件名来管理模块</p>
<h3>注册模块</h3>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">module</span><span style="color: Gray;">.</span><span style="color: Blue;">join</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">http://js.tudouui.com/js/fn/saleloader_10.js</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">, </span><span style="color: Olive;">{</span><span style="color: Gray;"> </span><span style="color: Blue;">domain</span><span style="color: Gray;">: </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">http://uidev.tudou.com</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">, </span><span style="color: Blue;">version</span><span style="color: Gray;">: </span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li></ol></div>
<ul>
<li>配置从url里获取，第二个配置参数是可选的，优先级更高，用于调试（指向开发环境）</li>
<li>域名其实可以省略，js文件的域名通过<var>TUI.domain</var>和autodomain.js脚本来自动配置</li>
<li>版本号很重要，支持a_10.js/a.v10.js/a_v10.js等写法</li>
</ul>
<h3>使用模块</h3>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">module</span><span style="color: Gray;">.</span><span style="color: Blue;">use</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">/fn/saleloader</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">, </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">adExtension</span><span style="color: Gray;">.</span><span style="color: Blue;">load</span><span style="color: Olive;">()</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//这个是saleloader.js内的方法，必须等js加载完后执行</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #ffa500;">//这个区域是执行saleloader.js内代码的安全空间</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li></ol></div>
<ul>
<li>类似YUI3的<var>Y().use</var>，省去了版本冲突之类无用的特性</li>
<li>第一次use时会向页面里加载对应的script</li>
<li>函数区域内的代码是异步执行的，会等到saleloader.js加载完后依次执行，如果已经加载过了，直接执行，类似<var>jQuery.ready</var></li>
</ul></div>
<div class="section" id="sec-5">
<h2>总结</h2>
<ul>
<li>以上方法虽然有递进关系，但并不是要表示最后面的才是最好的方法</li>
<li>最好的方法不是唯一的，要根据场合选择最适合的方法，以上方法都有适用场合</li>
<li>本文档涉及到的API：<var>TUI.clone</var>, <var>TUI.newClass</var>, <var>TUI.moduleClass</var>, <var>TUI.module.create</var>, <var>TUI.newModule</var>, <var>TUI.module.join</var>, <var>TUI.module.use</var>, <var>TUI.event</var></li>
</ul></div>
<p>=============开始帖源码的分割线=============</p>
<h3>TUI.clone</h3>
<pre><code>
	/**
	 * @public 继承一个类或复制一个对象
	 * @note
	 * @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 &#038;&#038; !$.isFunction(ex) &#038;&#038; ex.initialize || ex; //子类构造函数
		if (!isClass) {
			newobj = function(){
				if(constructorFn)
					constructorFn.apply(this, arguments);
			};
			newobj.prototype = oldone;
			return new newobj();
		} else {
			 //为module内部定义的类提供相关方法
			var c = { _sandbox: ex.sandbox, _default: ex.attr };
			newobj = function(){ //构造函数
				if (this.constructor === newobj) { // 如果this指向子类实例，已经执行过以下的初始化代码
					this.objectId = "TUI-object-" + ++obj_uuid; //实例的唯一ID
					var p = c;
					if (p._sandbox &#038;&#038; p._default)
						this.attr(p._sandbox, p._default); //初始化私有属性的默认值
				}
				if(constructorFn) //执行构造函数的自定义部分
					constructorFn.apply(this, arguments);
			};
			// 原型继承, 子类构造函数里需要显示调用父类构造函数
			var newproto = oldone ? this.clone(oldone.prototype) : {};
			// 混入其他超类方法
			if (ex.mixin)
				this.mix.apply(this, ([newproto]).concat(ex.mixin));
			// 加入子类方法, 覆盖混入和继承
			this.mix(newproto, ex, {
				constructor: newobj, // 恢复
				superClass: oldone || Object //在子类的构造函数中可以用this.superClass访问父类
			});
			delete newproto.initialize;
			if (c._sandbox) {
				delete newproto.sandbox; //沙盒一定要删除，不能暴露出去
				newproto.attr = function(sandbox, attrname, value){ //通过sandbox参数杜绝来自外部的访问
					return sandbox.attr.call(this, attrname, value);
				};
			}
			newobj.prototype = newproto;
			return newobj;
		}
	}

</code></pre>
<h3>TUI.moduleClass</h3>
<pre><code>
/**
 * 存放实例的私有状态
 * @private
 */
var privateAttr = {};
/**
 * module的抽象类
 * @note 可以继承到其他应用上, 构造独有的sandbox
 */
TUI.moduleClass = TUI.newClass({
	initialize: function(){
		this.notify = new TUI.eventClass();
		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}
	 * @param {object} args参数
	 */
	create: function(wrap, op){
		var sandbox = TUI.clone(this._sandbox),
			args = op.args || [],
			ns = {};
		args.unshift(sandbox);
		return wrap.apply(ns, args) || ns;
	}
});

$.extend(TUI.module, new TUI.moduleClass());
</code></pre>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2009/09/20/tudou-javascript-oop-and-module-guideline/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>土豆招聘Javascript工程师的JD，终于谷出来一个</title>
		<link>http://www.limboy.com/2009/05/16/yet-another-javascript-jd/</link>
		<comments>http://www.limboy.com/2009/05/16/yet-another-javascript-jd/#comments</comments>
		<pubDate>Sat, 16 May 2009 08:34:02 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[代码]]></category>
		<category><![CDATA[土豆网]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2009/05/16/yet-another-javascript-jd/</guid>
		<description><![CDATA[原本是小麦的文案，被我改的啰嗦了，虽然最近在地铁上读了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。这给你带来了更深入的程序设计经验和更高更全面的视角。
对于浏览器中的各种可用资源、特性和差异，你都玩弄于鼓掌之间，你有大量优化和重构方面的经验，致力于编写安全，稳定，简洁而强壮，易于扩展的客户端代码。

以上不是必需的，但如果你完全符合，我们可以考虑将土豆网总部迁至你家附近（哈哈）。
最后，如果你目前还不符合以上的描述，但很渴望做到这些，我们也很愿意为你提供面谈的机会。
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;最后吐槽的分割线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-
我觉得小麦写的最后两句是经典哑，一个字未改～
PS：题图其实是蜘蛛侠里的犀牛人……
]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.limboy.com/wp-content/uploads/2009/05/rhino-a-5001.jpg' title='rhino-a-5001.jpg'><img src='http://www.limboy.com/wp-content/uploads/2009/05/rhino-a-5001.jpg' alt='rhino-a-5001.jpg' style="width:250px;float:left;margin:0 10px 10px 0;" /></a>原本是<a href="http://www.mikkolee.com/" target="_blank">小麦</a>的文案，被我改的啰嗦了，虽然最近在地铁上读了<a href="http://www.douban.com/subject/1433835/">The Elements of Style</a>，但是文字要写的简洁真的需要足够冷酷，我热血而且贪婪，不忍心漏掉一个信息点，所以简洁与我无缘……这篇JD发到其他地方的时候可能会删减很多，我先自己留一份……另外虽然这份JD仅仅提出了对雇员的要求，没有介绍雇主，但如果你仍然有兴趣，可以直接给我发email。</p>
<p><strong>职位：Javascript开发工程师</strong></p>
<p>简单的说，我们需要的是能“正确”使用Javascript的开发者。不同情况下，“正确”的标准也不尽然相同，作为土豆的javascript工程师，我们希望你大致符合如下的描述：<span id="more-228"></span></p>
<ul>
<li>熟悉JS的语法特性和运行机制，比如词法作用域，闭包，原型链，无类型的OO，并乐于在此基础上钻研和探索用JS开发富客户端和复杂web应用的最佳实践和设计模式（<em>这句话用英文写还蛮好，中文怎么拆哑啊啊啊啊～</em>）</li>
<li>jQuery、YUI、MooTools等JS库，对你来说不仅只是开发工具，更是你学习代码风格、接口设计与程序架构的良师益友，你愿意了解他们，不盲目遵从，也不随意使唤。</li>
<li>重视团队协作，愿意探寻和改进目前还不成熟的前端开发流程，了解各种常用工具，如Firebug，YSlow，JSLint，YUI compressor……</li>
<li>在前端领域，你发布过一些有趣的个人项目，或是参与过开源项目，或是致力于构建自己的库和开发框架，或是作为团队核心成员开发过产品级的web应用。</li>
<li>一些基本前端技能如CSS或PS切图就毋需赘述了。</li>
</ul>
<p>此外，我们乐见一些更优秀的特质：</p>
<ul>
<li>持续关注业界的新话题和新技术。你喜欢泡在javaeye，reddit之类技术社区灌水和答疑解惑，或者总是最早读到John Resig，Douglas Crackford，Dion Almae，PPK，Dean Edwards等大牛们的新作品和演讲ppt，或者长年维护自己的博客，分享自己的经验和新实践。</li>
<li>你具备其他语言的开发经验，比如java和php，比如Actionscript3/Flex。这给你带来了更深入的程序设计经验和更高更全面的视角。</li>
<li>对于浏览器中的各种可用资源、特性和差异，你都玩弄于鼓掌之间，你有大量优化和重构方面的经验，致力于编写安全，稳定，简洁而强壮，易于扩展的客户端代码。</li>
</ul>
<p>以上不是必需的，但如果你完全符合，我们可以考虑将土豆网总部迁至你家附近（哈哈）。</p>
<p>最后，如果你目前还不符合以上的描述，但很渴望做到这些，我们也很愿意为你提供面谈的机会。</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;最后吐槽的分割线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-</p>
<p>我觉得小麦写的最后两句是经典哑，一个字未改～</p>
<p>PS：题图其实是蜘蛛侠里的犀牛人……</p>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2009/05/16/yet-another-javascript-jd/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>iframe和异步的跨域请求，结合土豆网的实例</title>
		<link>http://www.limboy.com/2008/12/31/iframe-cross-site-request/</link>
		<comments>http://www.limboy.com/2008/12/31/iframe-cross-site-request/#comments</comments>
		<pubDate>Tue, 30 Dec 2008 19:00:46 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[代码]]></category>
		<category><![CDATA[土豆网]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2008/12/31/iframe-cross-site-request/</guid>
		<description><![CDATA[这篇文章将会探讨一下在网页里做异步的跨域请求，以及借助iframe来获取数据的方法。
呃，本来我觉得这个话题没什么好说的了，因为如今好像没有几个web应用能离开这类request，google和facebook用iframe来做comet的时候也基本上把能hack的都hack遍了，所以我估计开发者社区里应该早就形成所谓的&#8221;最佳实践&#8221;（best practices）了罢。不过最近看到有一些关注前端技术的blog（比如realazy）在讨论相关的话题，发现还是有一些东西值得写下来。

一、借助script的异步跨域请求
先说跨域的问题，首先要指出的是，iframe里的js宿主对象一样也躲不开同源策略（Same Origin Policy），仅仅能解决二级域名的跨域而已，比如www.tudou.com和so.tudou.com，如果要请求某个八杆子打不到一起去的域名下的数据（例如你想搞mashup），建议老老实实的用script标签去请求JSONP罢。关于JSONP要附带说一下的是，jQuery对JSONP请求的封装方式很值得提倡：
$.getJSON(url, params + &#34;&#38;jsoncallback=?&#34;, function(json){
&#160; &#160; /* do something */
});
用jsoncallback作为服务器端支持的标准jsonp参数，而每次执行这个方法都会用时间戳生成一个唯一的全局函数名，替换这个“?”，这个细节被封装到黑盒里，使用者不必了解，可以像普通的ajax请求一样，用匿名的回调函数作为最末尾的参数（这是jquery强调的风格），这种语法糖（syntactic sugar）的作用绝对不仅仅是让前端开发人员可以偷懒而已，对代码的可读性，兼容性和今后的维护都有好处。（我经常要向服务器端的开发人员解释这个道理，否则他们才不给你支持什么jsoncallback参数呢，直接给你返回一个“yy({……})”就算完工……囧）
二、利用前沿技术的跨域方法
当然了，我们还可以走一些目前来看比较野的路子来实现跨域，比如在页面里嵌入一个不到1K的swf，借助flashplayer向部署了crossdomain.xml的服务器请求数据，再用actionscript里的ExternalInterface类把数据还给javascript（我觉得这种方法忒有调用dll的感觉～大心）。
我们还可以指望ie8里支持的XDomainRequestAllowed，和firefox3.1支持的Access Control，甚至传说中的HTML5 socket……噢喔喔，多么甜美的梦……/掐一把脸蛋
三、用iframe直接发送跨域请求
跟script标签一样，iframe也可以用来替代ajax，而且在修改document.domain之后（比如上面提到的两个域名，可以设置document.domain = &#8220;tudou.com&#8221;），还可以解决部分跨域问题。
通过iframe请求数据的方法，最直接的莫过于在页面里动态的嵌入一个iframe标签，用它的src属性直接请求包含数据的网页，然后利用那个网页里的js把数据传给父页面，比如：
&#60;iframe id=&#34;crossdomain&#34; width=&#34;0&#34; height=&#34;0&#34; style=&#34;visibility:hidden;&#34; src=&#34;http://yoursite.com/request_url/&#34; &#62;&#60;/iframe&#62;
这种方法耦合的太紧，非常不推荐。你请求的URI代表一个资源，应该是单纯的数据，它会作为xml，json，js代码还是html来处理，这个并不重要，不应该把你的程序逻辑跟数据混杂到一起，数据也不应该因为跨域或不跨域，用iframe，script还是ajax来请求就变成完全不同的东西。
有人会说：为了让数据能够被JS处理，返回的内容难免有差异。——但是小的差异可以通过合理的封装隐藏起来，比如JQuery的getJSON方法
有人会说：请求的URI是一个动态页面，同样可以在URI里支持类似jsoncallback的参数，生成一个script标签和其中的JS代码，把数据“包裹”在JS里，比如请求“http://yoursite.com/request_url/?callback=cb1304344”，返回：
&#60;script type=&#34;text/javascript&#34;&#62;
document.domain=&#34;tudou.com&#34;;
top.cb1304344({ /* 数据 */ });
&#60;/script&#62;
——首先，很多情况下你请求到的不会是动态页面，在这个到处都强调高负载的web世界里，你拿到的经常是squid之类的代理程序返回的缓存。其次，如果你请求的是HTML格式的文本，为了能作为JS代码来执行，服务器端必须对这段文本做转义和清理工作，而且安全性还不一定能保证（因为HTML里经常包含很多来自UGC的内容），如果你请求的是JSON格式的数据……那何必用iframe咧……直接嵌script罢……
四、用iframe直接请求数据的最佳实践
我推荐在上述方法的基础上做改良，首先在服务器端，直接返回数据本身，并且把数据“包裹”在一个textarea标签里，比如：
&#60;textarea&#62;&#60;div&#62;&#60;p&#62;yyyyy&#60;/p&#62;&#60;/div&#62;&#60;/textarea&#62;
textarea的优点是可以支持任何格式的内容，而且这些内容不会在iframe子页面里解析（比如创建DOM树，执行JS），接下来前端要做的，只是在父页面里获取到子页面的DOM，把textarea的内容取出来（注意不能取innerHTML而要取value）。
这里存在一个判断iframe是否加载完成的问题，解决方法之一是在iframe标签上写onload事件，不过这样就需要显式的调用一个函数。
方法二如下：
(function(){
try{
&#160; &#160; callback(document.getElementById('crossdomain').contentWindow.document.body.getElementsByTagName(&#34;TEXTAREA&#34;)[0].value);
}catch(e){
&#160; &#160; setTimeout(arguments.callee,0);
&#160; &#160; return;
}&#160; &#160; 
})();
最后我们可以封装出这样一个方法：
window.TUI = window.$ = {};
/**
 * @public 通过iframe异步请求数据
 * @param {string}&#160; url是请求的地址
 * @param {function}&#160; cb是处理返回数据的回调函数
 */
TUI.getIframeData = function(url, [...]]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.limboy.com/wp-content/uploads/2008/12/tudou_frame.jpg' title='tudou_frame.jpg'><img style="float:left;width:200px;margin:0 10px 10px 0;" src='http://www.limboy.com/wp-content/uploads/2008/12/tudou_frame.jpg' alt='tudou_frame.jpg' /></a>这篇文章将会探讨一下在网页里做异步的跨域请求，以及借助iframe来获取数据的方法。</p>
<p>呃，本来我觉得这个话题没什么好说的了，因为如今好像没有几个web应用能离开这类request，google和facebook用iframe来做comet的时候也基本上把能hack的都hack遍了，所以我估计开发者社区里应该早就形成所谓的&#8221;最佳实践&#8221;（best practices）了罢。不过最近看到有一些关注前端技术的blog（比如<a target="_blank" href="http://realazy.org/blog/2008/11/30/benifit-of-fecthing-page-via-iframe/">realazy</a>）在讨论相关的话题，发现还是有一些东西值得写下来。<span id="more-208"></span></p>
<p><br/></p>
<h3>一、借助script的异步跨域请求</h3>
<p>先说跨域的问题，首先要指出的是，iframe里的js宿主对象一样也躲不开同源策略（Same Origin Policy），仅仅能解决二级域名的跨域而已，比如www.tudou.com和so.tudou.com，如果要请求某个八杆子打不到一起去的域名下的数据（例如你想搞mashup），建议老老实实的用script标签去请求<a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/" target="_blank">JSONP</a>罢。关于JSONP要附带说一下的是，jQuery对JSONP请求的封装方式很值得提倡：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">$.</span><span style="color: Blue;">getJSON</span><span style="color: Olive;">(</span><span style="color: Blue;">url</span><span style="color: Gray;">, </span><span style="color: Blue;">params</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">&amp;jsoncallback=?</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">, </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">json</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #ffa500;">/* do something */</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li></ol></div>
<p>用jsoncallback作为服务器端支持的标准jsonp参数，而每次执行这个方法都会用时间戳生成一个唯一的全局函数名，替换这个“?”，这个细节被封装到黑盒里，使用者不必了解，可以像普通的ajax请求一样，用匿名的回调函数作为最末尾的参数（这是jquery强调的风格），这种语法糖（syntactic sugar）的作用绝对不仅仅是让前端开发人员可以偷懒而已，对代码的可读性，兼容性和今后的维护都有好处。（我经常要向服务器端的开发人员解释这个道理，否则他们才不给你支持什么jsoncallback参数呢，直接给你返回一个“yy({……})”就算完工……囧）</p>
<h3>二、利用前沿技术的跨域方法</h3>
<p>当然了，我们还可以走一些目前来看比较野的路子来实现跨域，比如在页面里嵌入一个不到1K的swf，借助flashplayer向部署了crossdomain.xml的服务器请求数据，再用actionscript里的ExternalInterface类把数据还给javascript（我觉得这种方法忒有调用dll的感觉～大心）。</p>
<p>我们还可以指望ie8里支持的<a target="_blank" href="http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&#038;ReleaseId=581">XDomainRequestAllowed</a>，和firefox3.1支持的<a target="_blank" href="http://dev.w3.org/2006/waf/access-control/">Access Control</a>，甚至传说中的<a target="_blank" href="http://www.reddit.com/r/programming/comments/7a3rc/html_5_websocket_is_neither_web_nor_socket/">HTML5 socket</a>……噢喔喔，多么甜美的梦……/掐一把脸蛋</p>
<h3>三、用iframe直接发送跨域请求</h3>
<p>跟script标签一样，iframe也可以用来替代ajax，而且在修改document.domain之后（比如上面提到的两个域名，可以设置document.domain = &#8220;tudou.com&#8221;），还可以解决部分跨域问题。</p>
<p>通过iframe请求数据的方法，最直接的莫过于在页面里动态的嵌入一个iframe标签，用它的src属性直接请求包含数据的网页，然后利用那个网页里的js把数据传给父页面，比如：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">iframe</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">crossdomain</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">width</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">0</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">height</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">0</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">visibility:hidden;</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">src</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">http://yoursite.com/request_url/</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">iframe</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>这种方法耦合的太紧，非常不推荐。你请求的URI代表一个资源，应该是单纯的数据，它会作为xml，json，js代码还是html来处理，这个并不重要，不应该把你的程序逻辑跟数据混杂到一起，数据也不应该因为跨域或不跨域，用iframe，script还是ajax来请求就变成完全不同的东西。</p>
<p>有人会说：为了让数据能够被JS处理，返回的内容难免有差异。——但是小的差异可以通过合理的封装隐藏起来，比如JQuery的getJSON方法</p>
<p>有人会说：请求的URI是一个动态页面，同样可以在URI里支持类似jsoncallback的参数，生成一个script标签和其中的JS代码，把数据“包裹”在JS里，比如请求“http://yoursite.com/request_url/?callback=cb1304344”，返回：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">script</span><span style="color: Gray;"> </span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">text/javascript</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">document.domain=&quot;tudou.com&quot;;</span></li>
<li><span style="color: Gray;">top.cb1304344({ /* 数据 */ });</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: Green;">script</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>——首先，很多情况下你请求到的不会是动态页面，在这个到处都强调高负载的web世界里，你拿到的经常是<a target="_blank" href="http://blog.s135.com/book/squid/">squid</a>之类的代理程序返回的缓存。其次，如果你请求的是HTML格式的文本，为了能作为JS代码来执行，服务器端必须对这段文本做转义和清理工作，而且安全性还不一定能保证（因为HTML里经常包含很多来自UGC的内容），如果你请求的是JSON格式的数据……那何必用iframe咧……直接嵌script罢……</p>
<h3>四、用iframe直接请求数据的最佳实践</h3>
<p>我推荐在上述方法的基础上做改良，首先在服务器端，直接返回数据本身，并且把数据“包裹”在一个textarea标签里，比如：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">textarea</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">yyyyy</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">textarea</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>textarea的优点是可以支持任何格式的内容，而且这些内容不会在iframe子页面里解析（比如创建DOM树，执行JS），接下来前端要做的，只是在父页面里获取到子页面的DOM，把textarea的内容取出来（注意不能取innerHTML而要取value）。</p>
<p>这里存在一个判断iframe是否加载完成的问题，解决方法之一是在iframe标签上写onload事件，不过这样就需要显式的调用一个函数。</p>
<p>方法二如下：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Green;">try</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">callback</span><span style="color: Olive;">(</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">crossdomain</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">contentWindow</span><span style="color: Gray;">.</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">body</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementsByTagName</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">TEXTAREA</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)[</span><span style="color: Maroon;">0</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">value</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span><span style="color: Green;">catch</span><span style="color: Olive;">(</span><span style="color: Blue;">e</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">setTimeout</span><span style="color: Olive;">(</span><span style="color: Blue;">arguments</span><span style="color: Gray;">.</span><span style="color: Blue;">callee</span><span style="color: Gray;">,</span><span style="color: Maroon;">0</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp; &nbsp; </span></li>
<li><span style="color: Olive;">})()</span><span style="color: Gray;">;</span></li></ol></div>
<p>最后我们可以封装出这样一个方法：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">TUI</span><span style="color: Gray;"> = </span><span style="color: Teal;">window</span><span style="color: Gray;">.$ = </span><span style="color: Olive;">{}</span><span style="color: Gray;">;</span></li>
<li><span style="color: #ffa500;">/**</span></li>
<li><span style="color: #ffa500;"> * @public 通过iframe异步请求数据</span></li>
<li><span style="color: #ffa500;"> * @param {string}&nbsp; url是请求的地址</span></li>
<li><span style="color: #ffa500;"> * @param {function}&nbsp; cb是处理返回数据的回调函数</span></li>
<li><span style="color: #ffa500;"> */</span></li>
<li><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">getIframeData</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">url</span><span style="color: Gray;">, </span><span style="color: Blue;">cb</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">f</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">crossdomain</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">f</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">f</span><span style="color: Gray;">.</span><span style="color: Blue;">src</span><span style="color: Gray;"> = </span><span style="color: Blue;">url</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">else</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">t</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">createElement</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">DIV</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">t</span><span style="color: Gray;">.</span><span style="color: Blue;">innerHTML</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;iframe id=&quot;crossdomain&quot; width=&quot;0&quot; height=&quot;0&quot; style=&quot;visibility:hidden;&quot; src=&quot;</span><span style="color: #8b0000;">'</span><span style="color: Gray;"> + </span><span style="color: Blue;">url</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">'</span><span style="color: Red;">&quot; &gt;&lt;/iframe&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">body</span><span style="color: Gray;">.</span><span style="color: Blue;">appendChild</span><span style="color: Olive;">(</span><span style="color: Blue;">t</span><span style="color: Gray;">.</span><span style="color: Blue;">firstChild</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">try</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">cb</span><span style="color: Olive;">(</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">crossdomain</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">contentWindow</span><span style="color: Gray;">.</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">body</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementsByTagName</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">TEXTAREA</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)[</span><span style="color: Maroon;">0</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">value</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Green;">catch</span><span style="color: Olive;">(</span><span style="color: Blue;">e</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">setTimeout</span><span style="color: Olive;">(</span><span style="color: Blue;">arguments</span><span style="color: Gray;">.</span><span style="color: Blue;">callee</span><span style="color: Gray;">,</span><span style="color: Maroon;">0</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp; &nbsp; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">})()</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">//像这样执行</span></li>
<li><span style="color: Gray;">$.</span><span style="color: Blue;">getIframeData</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">http://yoursite.com/request_url/</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">, </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">data</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #ffa500;">/* do something */</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li></ol></div>
<p>只要再增加一个可选的param参数，这就是一个很标准的jQuery AJAX API，我们还可以在jQuery的$.get上面封装，增加一个是否跨域的判断，当这个request的URI修改成同样的域名后，自动切换到普通的AJAX方法来请求，把返回的文本用类似这样的正则/<(textarea)>(.+)<\/(textarea)>/删掉多余的字符，再传给回调函数，前端和服务器端都不用修改代码。</p>
<h3>五、用iframe直接请求数据的缺陷</h3>
<p>必须指出的是，iframe在ie里获取数据时会引发一些“小问题”，dojo的创始人Alex Russell把它们称作<a target="_blank" href="http://alex.dojotoolkit.org/2006/02/what-else-is-burried-down-in-the-depths-of-googles-amazing-javascript/">“灵异点击（phantom click）”和“噩梦般的指示器（throbber of doom）”</a>，前者是指在iframe请求内容的时候会出现一次点击链接的音效（让用户怀疑闹鬼，多差的体验口牙！），后者是指iframe加载过程中，ie的界面上会出现正在读取的提示（比如左下的进度条，右上的图标）……好罢，其实以我个人的标准，这两个问题都可以无视……</p>
<p>这种方法还有一个明显的缺陷，就是只支持GET类型的请求。</p>
<h3>六、用iframe结合ajax</h3>
<p>不过iframe还有一种使用方法，不但可以避免上面提到的问题，也不需要服务器端做任何调整，简单来说：在iframe的src里调用一个包含ajax方法的页面，然后父页面调用这个方法来发起跟子页面同域名下的ajax请求。在土豆网的播放页面上，我使用这种方法请求用户评论统一接口里的HTML内容，例如这个WH40K:DOWII的视频：</p>
<p><a  target="_blank" href="http://www.tudou.com/programs/view/iPcprDz_LhI/">http://www.tudou.com/programs/view/iPcprDz_LhI/</a></p>
<p>获得评论部分HTML的接口类似这样:</p>
<p><a  target="_blank" href=" http://comments.tudou.com/itemcomment.srv?method=get&#038;iid=21283123&#038;page=1&#038;tm=5&#038;ban=1">http://comments.tudou.com/itemcomment.srv?method=get&#038;iid=21283123&#038;page=1&#038;tm=5&#038;ban=1</a></p>
<p>这个接口在独立的一组服务器上实现，在视频播放页，豆单播放页，豆单封面，相册，个人主页都会被调用。由于包含大量用户提交的内容和复杂的HTML结构，如果用JSON形式，前端后端处理起来都效率低，此外，提交新评论，回复，删除，也会用到comments.tudou.com这个域名下的接口，而这些操作显然需要POST类型的请求。在这种需求下，借助iframe的AJAX方法</p>
<p>首先在comments.tudou.com域名下部署一个供iframe调用的跨域文件，感觉很像flashplayer的crossdomain.xml……</p>
<p><a  target="_blank" href="http://comments.tudou.com/crossdomain/index.html">http://comments.tudou.com/crossdomain/index.html</a></p>
<p>可以看到源文件里仅仅包含一个stand-alone的ajax方法……呃……你觉得很眼熟？不用怀疑，就是在jQuery源代码的基础上修改来的-___-b，支持最基本的需求。这个页面可以设置很长的过期头让浏览器缓存起来，因为不会再有变动。</p>
<p>在父页面里通过<a target="_blank" href="http://js.tudouui.com/js/comments_9.js">TUI.videoComment.request</a>提供统一的接口，不做详述了，只列举其中访问跨域方法的部分：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">try</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; $</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">#crossdomain</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)[</span><span style="color: Maroon;">0</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">contentWindow</span><span style="color: Gray;">.</span><span style="color: Blue;">TUI</span><span style="color: Gray;">.</span><span style="color: Blue;">ajax</span><span style="color: Olive;">(</span><span style="color: Blue;">o</span><span style="color: Olive;">)</span><span style="color: Gray;">;&nbsp; &nbsp; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Green;">catch</span><span style="color: Olive;">(</span><span style="color: Blue;">e</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">setTimeout</span><span style="color: Olive;">(</span><span style="color: Blue;">arguments</span><span style="color: Gray;">.</span><span style="color: Blue;">callee</span><span style="color: Gray;">,</span><span style="color: Maroon;">500</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp; &nbsp; </span></li>
<li><span style="color: Olive;">})()</span><span style="color: Gray;">;</span></li></ol></div>
<h3>七、总结一下</h3>
<p>iframe适用于 ( 跨域的 &#038;&#038; ( 返回大量数据 || 返回HTML内容 || 需要发POST请求 ) ) 的场合，除此之外还有<a  target="_blank" href="http://www.ibm.com/developerworks/cn/web/wa-lo-comet/">comet里的串流技术（streaming）</a>——本文不涉及。使用时需要注意保持资源的纯粹性，并尽可能隐藏那些跟其他异步请求差异很大的或包含hack的细节（比如嵌入iframe，触发回调函数，处理数据），设计出一致的，兼容性和扩展性良好的，不碍眼的接口XD</p>
<p>关于跨域还要补充一点：修改document.domain可能会产生一些无法预料的问题，比如在firefox里，document.styleSheets的cssRules属性会被拒绝访问。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2008/12/31/iframe-cross-site-request/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>土豆网三周年PARTY</title>
		<link>http://www.limboy.com/2008/04/19/tudou_3th_party/</link>
		<comments>http://www.limboy.com/2008/04/19/tudou_3th_party/#comments</comments>
		<pubDate>Fri, 18 Apr 2008 17:19:05 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[土豆网]]></category>
		<category><![CDATA[纯水]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2008/04/19/tudou_3th_party/</guid>
		<description><![CDATA[PARTY刚刚结束，其实我到现在还没想明白为什么在我关于动画和游戏的记忆里，PARTY都是那么有趣，而现实中的PARTY只给我留下看见一堆站着的人以及自己手足无措的记忆，不明白到底有哪些不同……
好罢，PARTY本身虽然满足不了我的YY，但今天晚上还是很有趣的，本来在这种时候，最适合我的行为是留在二楼开发部里上网，该干什么干什么（这是理性的那部分人格反复告诫我的），但是我还有一部分加盟了感觉会(Society of Sensation)的人格不停的催促我去PARTY现场看看……这种implicate conflict（隐缠冲突，自创词）时常碰到，今天我碰巧找到了平衡两种人格，既能体验PARTY又不至于无事可做让自己很尴尬的方法：帮前台的XIXI姐姐搬运食物（顺便吃）+看守通道（顺便涂鸦）…
涂鸦是土豆办公室的最大特色之一，以下是我去年4月来面试时拍的照片，据说都是从以前的四行仓库搬到现在的仓库时涂的，我来晚了，没机会留下墨宝……但是由于如今土豆规模今非昔比，以前闲置的一楼也被塞满了人，白墙都需要“装修”，所以今天的PARTY搞了新的涂鸦…

我刚才下楼看过，有些画的还是很不错的，比如异型和OOXX的男女，但是重叠的太多，缺乏美学智慧……作为一个极端重视信息可见度和呈现方式的人，我是绝不能容忍这种事情的，所以我的涂鸦都在二楼主过道里…挖哈哈哈………有图有真相：
P.S. 土红色的颜料
图一，有爱

图二，图像和文字无关联

图三，javascript, lambda, closure和currying

图四，全

以下是其他图，请原谅N73的效果，我一直认为“摄影”是伪小资和真小资们为填补精神的空虚和寻求群体认同感而最喜欢选择的兴趣爱好之一（另一个是“旅游”），所以DC是邪恶的，单反是邪恶的，宜敬而远之。内置打印机的polaroid还可以考虑…
邀请函

战前

入口

现场配对，由前微软研究院的老爷开发的算法提供支持

二楼天台，有蛋糕，所以人多

三楼天台，有肉，所以人最多

后来把人赶下来，gary开讲

然后有专业舞者和饶舌者上台，台下很挤很暴力，蛋糕进不了场

再后来没拍了，完，谢谢。
]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.limboy.com/2008/04/19/tudou_3th_party/newtudoujpg/' rel='attachment wp-att-187' title='newtudou.jpg'><img src='http://www.limboy.com/wp-content/uploads/2008/04/newtudou.jpg' alt='newtudou.jpg' style="float:left;margin:0 10px 5px 0;" /></a>PARTY刚刚结束，其实我到现在还没想明白为什么在我关于动画和游戏的记忆里，PARTY都是那么有趣，而现实中的PARTY只给我留下<em>看见一堆站着的人</em>以及<em>自己手足无措</em>的记忆，不明白到底有哪些不同……</p>
<p>好罢，PARTY本身虽然满足不了我的YY，但今天晚上还是很有趣的，本来在这种时候，最适合我的行为是留在二楼开发部里上网，该干什么干什么（这是理性的那部分人格反复告诫我的），但是我还有一部分加盟了<a href="http://www.ntrpg.org/yy/undertopia/article.php?articleid=636&#038;pagenum=13" target="_blank">感觉会(Society of Sensation)</a>的人格不停的催促我去PARTY现场看看……这种implicate conflict（隐缠冲突，自创词）时常碰到，今天我碰巧找到了平衡两种人格，既能体验PARTY又不至于无事可做让自己很尴尬的方法：帮前台的XIXI姐姐搬运食物（顺便吃）+看守通道（顺便涂鸦）…<span id="more-185"></span></p>
<p>涂鸦是土豆办公室的最大特色之一，以下是我去年4月来面试时拍的照片，据说都是从以前的四行仓库搬到现在的仓库时涂的，我来晚了，没机会留下墨宝……但是由于如今土豆规模今非昔比，以前闲置的一楼也被塞满了人，白墙都需要“装修”，所以今天的PARTY搞了新的涂鸦…</p>
<p><a href="http://www.flickr.com/photos/dexter-yy/2285868675/" title="Flickr 上 dexteryy 的 20070426034"><img src="http://farm3.static.flickr.com/2162/2285868675_98c6496203_m.jpg" width="240" height="180" alt="20070426034" /></a><a href="http://www.flickr.com/photos/dexter-yy/2286654582/" title="Flickr 上 dexteryy 的 20070426029"><img src="http://farm4.static.flickr.com/3168/2286654582_3d571570fc_m.jpg" width="240" height="180" alt="20070426029" /></a></p>
<p>我刚才下楼看过，有些画的还是很不错的，比如异型和OOXX的男女，但是重叠的太多，缺乏美学智慧……作为一个极端重视信息可见度和呈现方式的人，我是绝不能容忍这种事情的，所以我的涂鸦都在二楼主过道里…挖哈哈哈………有图有真相：</p>
<p>P.S. 土红色的颜料</p>
<h4>图一，有爱</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2422810901/" title="Flickr 上 dexteryy 的 涂鸦，有爱"><img src="http://farm4.static.flickr.com/3177/2422810901_bc2ee10241_m.jpg" width="240" height="180" alt="涂鸦，有爱" /></a></p>
<h4>图二，图像和文字无关联</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2423625018/" title="Flickr 上 dexteryy 的 涂鸦，图像和文字无关联"><img src="http://farm3.static.flickr.com/2019/2423625018_bbce745fb6_m.jpg" width="240" height="180" alt="涂鸦，图像和文字无关联" /></a></p>
<h4>图三，javascript, lambda, closure和currying</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2423625160/" title="Flickr 上 dexteryy 的 涂鸦，javascript, 拉姆达,闭包和curry化"><img src="http://farm4.static.flickr.com/3078/2423625160_78301795fe_m.jpg" width="240" height="180" alt="涂鸦，javascript, 拉姆达,闭包和curry化" /></a></p>
<h4>图四，全</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2423625352/" title="Flickr 上 dexteryy 的 涂鸦，全"><img src="http://farm3.static.flickr.com/2389/2423625352_5c9a01349c_m.jpg" width="240" height="180" alt="涂鸦，全" /></a></p>
<p>以下是其他图，请原谅N73的效果，我一直认为“摄影”是伪小资和真小资们为填补精神的空虚和寻求群体认同感而最喜欢选择的兴趣爱好之一（另一个是“旅游”），所以DC是邪恶的，单反是邪恶的，宜敬而远之。内置打印机的polaroid还可以考虑…</p>
<h4>邀请函</h4>
<p><a href='http://www.limboy.com/wp-content/uploads/2008/04/3thparty.jpg' title='3thparty.jpg'><img src='http://www.limboy.com/wp-content/uploads/2008/04/3thparty.jpg' alt='3thparty.jpg' style="width:300px;" /></a></p>
<h4>战前</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2422809233/" title="Flickr 上 dexteryy 的 开始前的主会场"><img src="http://farm4.static.flickr.com/3016/2422809233_a0ae4b7121_m.jpg" width="240" height="180" alt="开始前的主会场" /></a></p>
<h4>入口</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2422810297/" title="Flickr 上 dexteryy 的 入口"><img src="http://farm3.static.flickr.com/2286/2422810297_4dccbc9603_m.jpg" width="180" height="240" alt="入口" /></a><a href="http://www.flickr.com/photos/dexter-yy/2422810077/" title="Flickr 上 dexteryy 的 入口"><img src="http://farm4.static.flickr.com/3080/2422810077_df431db120_m.jpg" width="240" height="180" alt="入口" /></a></p>
<h4>现场配对，由前微软研究院的老爷开发的算法提供支持</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2422809335/" title="Flickr 上 dexteryy 的 土豆后台算法支持的现场配对"><img src="http://farm4.static.flickr.com/3128/2422809335_225dd1f105_m.jpg" width="240" height="180" alt="土豆后台算法支持的现场配对" /></a></p>
<h4>二楼天台，有蛋糕，所以人多</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2422809463/" title="Flickr 上 dexteryy 的 2楼天台"><img src="http://farm4.static.flickr.com/3163/2422809463_be52773126_m.jpg" width="240" height="180" alt="2楼天台" /></a><a href="http://www.flickr.com/photos/dexter-yy/2422809991/" title="Flickr 上 dexteryy 的 人挤人的2楼天台"><img src="http://farm3.static.flickr.com/2104/2422809991_908865b2b7_m.jpg" width="240" height="180" alt="人挤人的2楼天台" /></a></p>
<h4>三楼天台，有肉，所以人最多</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2423623398/" title="Flickr 上 dexteryy 的 3楼天台"><img src="http://farm3.static.flickr.com/2104/2423623398_ce5ce0e26c_m.jpg" width="240" height="180" alt="3楼天台" /></a><a href="http://www.flickr.com/photos/dexter-yy/2423623478/" title="Flickr 上 dexteryy 的 3楼天台"><img src="http://farm3.static.flickr.com/2344/2423623478_d121dc83ca_m.jpg" width="240" height="180" alt="3楼天台" /></a></p>
<h4>后来把人赶下来，gary开讲</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2423624226/" title="Flickr 上 dexteryy 的 GARY开讲"><img src="http://farm3.static.flickr.com/2087/2423624226_8d2b473a43_m.jpg" width="240" height="180" alt="GARY开讲" /></a></p>
<h4>然后有专业舞者和饶舌者上台，台下很挤很暴力，蛋糕进不了场</h4>
<p><a href="http://www.flickr.com/photos/dexter-yy/2423624548/" title="Flickr 上 dexteryy 的 蛋糕挤不进会场"><img src="http://farm3.static.flickr.com/2260/2423624548_1128603f8c_m.jpg" width="240" height="180" alt="蛋糕挤不进会场" /></a></p>
<p>再后来没拍了，完，谢谢。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2008/04/19/tudou_3th_party/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>为什么信仰apple</title>
		<link>http://www.limboy.com/2007/11/17/why_apple/</link>
		<comments>http://www.limboy.com/2007/11/17/why_apple/#comments</comments>
		<pubDate>Sat, 17 Nov 2007 05:58:09 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[Apple]]></category>
		<category><![CDATA[土豆网]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2007/11/17/why_apple/</guid>
		<description><![CDATA[土豆的老大gary这段时间在硅谷，好像是去参加NewTeeVee大会（陈士俊在演讲中宣布youtube将推出高清视频），前天还去了苹果总部，有跟steve jobs见面，内部邮件里传出的八卦新闻非常劲爆，说是jobs当时表示“中国人stupid”，而老大又似乎是很血性的文青，于是当即拍桌子大怒，吵了一架，出门时连纪念品都没买………不过昨天老大的blog更新………似乎p事都没有……也没说要砸自己的macbook pro（/失望），同去的marc也有更新blog，描述的状况更是大相径庭，还说“but he said that he loves China”……啊啊啊，都是幻觉！吓不倒我的！……
不过假如jobs真的说了“中国人stupid”，又会怎样？这次帝都的网志年会上，据说macbook普及率都很高了(我在facebook上还发现，keso和tinyfool也买了macbook pro)。大家为什么要砸钞票买苹果，肯定不是因为jobs是中国人民的老朋友……我不是很清楚别人的想法，不过我买苹果产品，其实就跟用ubuntu的原因一样：它能让我感受到科技的未来和人类的梦想。
正好在论坛写过一个相关的回帖，这种观点以后也许还要复述，为了避免每次都浪费时间重新组织观点构造上下文，还是copy到blog上来罢：
sunnix ：
我认识到苹果的SB就是从第一代shuffle开始的……而我认识到苹果粉丝的SB则是从对岸的 frostyplace这个网站，苹果粉丝就是两个凡是的坚定拥护者——凡是苹果出的，都是伟大的，创新的，艺术的，合理的，友好的，直觉式的，精美的，典范的，blahblahblah;凡是非苹果的就是愚蠢的，笨重的，保守的，不方便的，丑陋的，吃不到葡萄说葡萄酸的，抄袭的，眼红的， blahblahblah。
Dexter.Yy :
这“两个凡是”我很理解，你看，虽然mac是建立在大量开源软件和技术的基础之上，但它跟Linux是两个相反的极端：
Linux会给你提供无数的选择，强烈的参与感，让你和整个开源社区一起共同打造心目中的“未来操作系统”。同样的功能都有几个不同风格的项目供你选择，即使在一个软件里，比如Compiz Fusion，也会给你一大堆选项，让你定制出osx的效果，vista的效果，或是osx和vista都没有的效果。用图形界面改不出来，可以改文本形式的配置文件，配置文件里也没有，可以写脚本，脚本也实现不了，可以改源代码重新编译。还有无数的文档来支持你做这些事情………………firefox也很类似，我可以在一个光秃秃的浏览器上安装各种扩展，定制出一个符合自己需求的网络平台……
而mac只给你一个选择（不是指软件），它明白无误的让你感觉到：这就是“未来的操作系统”。虽然它提供了完善的unix命令行工具（osx10.5是标准的UNIX系统, Linux都只能算unix like）和开发工具（这些工具的强大我难以形容，只能截图），自带了ruby，python，php这样的开源语言，只要你有深入的了解，一样可以控制系统的大部分，但归根结底，它为了给大众用户最方便最简洁的体验，实际上是封装了刚才说的那些东西，把强大的技术隐藏在华丽的图形界面之后。“设计”和 “整合”，这就是apple最擅长的事情。
你可以自己定制，安装各种新东西，却总是觉得自己很笨拙，生怕打乱整个系统的和谐和完美（没有linux上那种自由自在，搞砸事情也不怕的感觉），你可以创作出各种界面，却就是觉得比不上cocoa的原生界面（cocoa是osx的GUI库），那种简洁，高效，细致，优雅，让你除了学习和模仿之外完全没有别的想法。很多人可能看不出来，现在web上流行的一些设计风格和元素，都是从osx里模仿来的。apple的作品几乎从没让你失望过，apple提供的选择虽然少，但几乎就是最好的选择，用mac的过程实际上是不断的在强化这种感觉。所以难免会产生“两个凡是”的思维定式。还有一个例子是：比较一下 windows软件的界面，各种风格都有，就算外观上接近windows的原生界面，面板的布局，按钮位置也可能完全不同。形成鲜明对比的是，mac上的软件（先声明，mac软件的数量不少）几乎都有一致的界面和用户体验，因为mac平台的开发者都谨守apple的GUI规范和建议。
我没有说绝对自由是最好的，也不认为应该让一个强势的偶像级的独裁者给你提供唯一的最好的选择。linux和osx都是能让我感受到未来的科技产品，在两者间做取舍时，我其实是抱着很务实的态度：在现阶段，osx要更优秀更成熟，而且我需要的是能提高效率提高生活质量的工具，而不是把精力和时间消耗在操作系统本身，我既希望享受到开源技术的好处，又不想为此浪费太多时间，所以我用mac……
]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.limboy.com/2007/11/17/why_apple/20070806stevejpg/' rel='attachment wp-att-164' title='20070806steve.jpg'><img src='http://www.limboy.com/wp-content/uploads/2007/11/20070806steve.jpg' style="width:220px;float:left;margin:0 10px 5px 0;" alt='aplycos2_jobs_f.jpg' alt='20070806steve.jpg' /></a>土豆的老大gary这段时间在硅谷，好像是去参加<a href="http://live.newteevee.com/">NewTeeVee大会</a>（陈士俊在演讲中宣布youtube将推出高清视频），前天还去了苹果总部，有跟steve jobs见面，内部邮件里传出的八卦新闻非常劲爆，说是jobs当时表示“中国人stupid”，而老大又似乎是很血性的文青，于是当即拍桌子大怒，吵了一架，出门时连纪念品都没买………不过昨天老大的<a href="http://blog.tudou.com/?p=96627">blog更新</a>………似乎p事都没有……也没说要砸自己的macbook pro（/失望），同去的marc也有更新blog，<a href="http://www.marc.cn/2007/11/27-hours-in-silicon-valley.html">描述的状况</a>更是大相径庭，还说“but he said that he loves China”……啊啊啊，都是幻觉！吓不倒我的！……<span id="more-162"></span></p>
<p>不过假如jobs真的说了“中国人stupid”，又会怎样？这次帝都的网志年会上，据说macbook普及率都很高了(我在facebook上还发现，<a href="http://blog.donews.com/keso/">keso</a>和<a href="http://www.tinydust.net/prog/diary/diary.htm">tinyfool</a>也买了macbook pro)。大家为什么要砸钞票买苹果，肯定不是因为jobs是<a href="http://www.google.com/search?q=%E4%B8%AD%E5%9B%BD%E4%BA%BA%E6%B0%91%E7%9A%84%E8%80%81%E6%9C%8B%E5%8F%8B">中国人民的老朋友</a>……我不是很清楚别人的想法，不过我买苹果产品，其实就跟用ubuntu的原因一样：它能让我感受到科技的未来和人类的梦想。</p>
<p>正好在论坛写过一个相关的回帖，这种观点以后也许还要复述，为了避免每次都浪费时间重新组织观点构造上下文，还是copy到blog上来罢：</p>
<p>sunnix ：</p>
<blockquote><p>我认识到苹果的SB就是从第一代shuffle开始的……而我认识到苹果粉丝的SB则是从对岸的 frostyplace这个网站，苹果粉丝就是两个凡是的坚定拥护者——凡是苹果出的，都是伟大的，创新的，艺术的，合理的，友好的，直觉式的，精美的，典范的，blahblahblah;凡是非苹果的就是愚蠢的，笨重的，保守的，不方便的，丑陋的，吃不到葡萄说葡萄酸的，抄袭的，眼红的， blahblahblah。</p></blockquote>
<p>Dexter.Yy :</p>
<blockquote><p>这“两个凡是”我很理解，你看，虽然mac是建立在大量开源软件和技术的基础之上，但它跟Linux是两个相反的极端：</p>
<p>Linux会给你提供无数的选择，强烈的参与感，让你和整个开源社区一起共同打造心目中的“未来操作系统”。同样的功能都有几个不同风格的项目供你选择，即使在一个软件里，比如<a href="http://www.compiz-fusion.org/">Compiz Fusion</a>，也会给你一大堆选项，让你定制出osx的效果，vista的效果，或是osx和vista都没有的效果。用图形界面改不出来，可以改文本形式的配置文件，配置文件里也没有，可以写脚本，脚本也实现不了，可以改源代码重新编译。还有无数的文档来支持你做这些事情………………firefox也很类似，我可以在一个光秃秃的浏览器上安装各种扩展，定制出一个符合自己需求的网络平台……</p>
<p>而mac只给你一个选择（不是指软件），它明白无误的让你感觉到：这就是“未来的操作系统”。虽然它提供了完善的unix命令行工具（osx10.5是<a href="http://www.google.com/search?q=leopard+unix+03+posix">标准的UNIX系统</a>, Linux都只能算unix like）和开发工具（这些工具的强大我难以形容，只能截图），自带了ruby，python，php这样的开源语言，只要你有深入的了解，一样可以控制系统的大部分，但归根结底，它为了给大众用户最方便最简洁的体验，实际上是封装了刚才说的那些东西，把强大的技术隐藏在华丽的图形界面之后。“设计”和 “整合”，这就是apple最擅长的事情。</p>
<p>你可以自己定制，安装各种新东西，却总是觉得自己很笨拙，生怕打乱整个系统的和谐和完美（没有linux上那种自由自在，搞砸事情也不怕的感觉），你可以创作出各种界面，却就是觉得比不上cocoa的原生界面（cocoa是osx的GUI库），那种简洁，高效，细致，优雅，让你除了学习和模仿之外完全没有别的想法。很多人可能看不出来，现在web上流行的一些设计风格和元素，都是从osx里模仿来的。apple的作品几乎从没让你失望过，apple提供的选择虽然少，但几乎就是最好的选择，用mac的过程实际上是不断的在强化这种感觉。所以难免会产生“两个凡是”的思维定式。还有一个例子是：比较一下 windows软件的界面，各种风格都有，就算外观上接近windows的原生界面，面板的布局，按钮位置也可能完全不同。形成鲜明对比的是，mac上的软件（先声明，mac软件的数量不少）几乎都有一致的界面和用户体验，因为mac平台的开发者都谨守apple的GUI<a href="http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html?http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIntro/chapter_1_section_1.html#//apple_ref/doc/uid/TP30000894-TP6">规范和建议</a>。</p>
<p>我没有说绝对自由是最好的，也不认为应该让一个强势的偶像级的独裁者给你提供唯一的最好的选择。linux和osx都是能让我感受到未来的科技产品，在两者间做取舍时，我其实是抱着很务实的态度：在现阶段，osx要更优秀更成熟，而且我需要的是能提高效率提高生活质量的工具，而不是把精力和时间消耗在操作系统本身，我既希望享受到开源技术的好处，又不想为此浪费太多时间，所以我用mac……</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2007/11/17/why_apple/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>魔戒风格的&#8221;web技术冒险地图&#8221;</title>
		<link>http://www.limboy.com/2007/11/14/webisagreement/</link>
		<comments>http://www.limboy.com/2007/11/14/webisagreement/#comments</comments>
		<pubDate>Wed, 14 Nov 2007 04:11:04 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[Web2.0]]></category>
		<category><![CDATA[kuso]]></category>
		<category><![CDATA[web服务/应用]]></category>
		<category><![CDATA[土豆网]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2007/11/14/webisagreement/</guid>
		<description><![CDATA[其实这张手绘地图的名字应该是“和谐web，和谐世界”（The Web is Agreement） &#8230;.
地图从左到右是作者心目中的善良阵营和邪恶阵营……开源社区、创作共用协议、web2.0里的blog圈,tag,mashup技术，RDF, RSS之类的开放架构都在左边……而微软的FUD，DRM技术，病毒，垃圾邮件，SOA之类的企业架构被放在右边……出人意料的是“google的全知全能之眼”也在邪恶一边，是因为google的平台不够开放还是因为用户隐私问题？
中间的圣山顶端是W3C组织和IETF，很多人在下面争吵和游说…… 
地图从下到上的象征意义比较复杂，有点像web技术从简单到复杂，也像是从前端到后端的关系……最下面是最简单的URL地址和REST/HTTP架构的设计者Fielding博士……往上是各种前端技术，javascript/ajax是一座跨越“富用户体验”的桥梁……最上面的终点是一片混沌，叫做“不兼容的大漩涡”，右边的魔多软件（微软）往里面排入ie，activex之类的私有技术，左边的开源社区往里面排入更多的技术，产品和代码……从 perl, php，java到linux…… 
还有很多很多细节……总之这张地图告诉我们的是：web技术这个世界很危险……好孩子不要来玩…… 
注释版，下载PDF
p.s. 这个东西我准备用大度4开的80克哑粉纸打印，裱起来帖到公司墙上……
再p.s. 我的桌子搬家了：




不过窗外的景色很无趣……很乏味……
]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.limboy.com/2007/11/14/webisagreement/1805709102_4fc795431b_mjpg/' rel='attachment wp-att-151' title='1805709102_4fc795431b_m.jpg'><img src='http://www.limboy.com/wp-content/uploads/2007/11/1805709102_4fc795431b_m.jpg' alt='1805709102_4fc795431b_m.jpg' style="float:left;margin:0 10px 5px 0;" /></a>其实这张手绘地图的名字应该是<a href="http://blog.whatfettle.com/2007/10/31/the_web_is_agreement/">“和谐web，和谐世界”（The Web is Agreement）</a> &#8230;.</p>
<p>地图从左到右是作者心目中的善良阵营和邪恶阵营……开源社区、创作共用协议、web2.0里的blog圈,tag,mashup技术，RDF, RSS之类的开放架构都在左边……而微软的FUD，DRM技术，病毒，垃圾邮件，SOA之类的企业架构被放在右边……出人意料的是“google的全知全能之眼”也在邪恶一边，是因为google的平台不够开放还是因为用户隐私问题？</p>
<p>中间的圣山顶端是W3C组织和IETF，很多人在下面争吵和游说…… </p>
<p>地图从下到上的象征意义比较复杂，有点像web技术从简单到复杂，也像是从前端到后端的关系……最下面是最简单的URL地址和REST/HTTP架构的设计者Fielding博士……往上是各种前端技术，javascript/ajax是一座跨越“富用户体验”的桥梁……最上面的终点是一片混沌，叫做“不兼容的大漩涡”，右边的魔多软件（微软）往里面排入ie，activex之类的私有技术，左边的开源社区往里面排入更多的技术，产品和代码……从 perl, php，java到linux…… <span id="more-152"></span></p>
<p>还有很多很多细节……总之这张地图告诉我们的是：web技术这个世界很危险……好孩子不要来玩…… </p>
<p><a href="http://www.flickr.com/photos/psd/1805709102/">注释版</a>，<a href="http://ia351403.us.archive.org/2/items/TheWebIsAgreement/web.PDF">下载PDF</a></p>
<p>p.s. 这个东西我准备用大度4开的80克哑粉纸打印，裱起来帖到公司墙上……</p>
<p>再p.s. 我的桌子搬家了：</p>
<p><a href="http://www.yupoo.com/photos/view?id=ff80808115a3155f0115b1dab5cb4fa8" title="来YUPOO看我的照片"><img src="http://photo5.yupoo.com/20071018/144356_184930116_m.jpg" alt="DSCN4332" width="240" height="180" border="0" /></a></p>
<p><a href="http://www.yupoo.com/photos/view?id=ff80808115a3155f0115b1daa1014fa6" title="来YUPOO看我的照片"><img src="http://photo11.yupoo.com/20071018/144351_2126221726_m.jpg" alt="DSCN4319" width="240" height="180" border="0" /></a></p>
<p><a href="http://www.yupoo.com/photos/view?id=ff8080811638366c01163c5787214f65" title="来YUPOO看我的照片"><img src="http://photo11.yupoo.com/20071114/120754_936129863_m.jpg" alt="20071010317" width="240" height="180" border="0" /></a></p>
<p><a href="http://www.yupoo.com/photos/view?id=ff8080811638366c01163c57943f4f67" title="来YUPOO看我的照片"><img src="http://photo5.yupoo.com/20071114/120757_284991186_m.jpg" alt="20071010318" width="240" height="180" border="0" /></a></p>
<p>不过窗外的景色很无趣……很乏味……</p>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2007/11/14/webisagreement/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>土豆生活翰部落格（上）</title>
		<link>http://www.limboy.com/2007/07/20/tudou_and_blog/</link>
		<comments>http://www.limboy.com/2007/07/20/tudou_and_blog/#comments</comments>
		<pubDate>Thu, 19 Jul 2007 16:06:56 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[Blogger]]></category>
		<category><![CDATA[Web2.0]]></category>
		<category><![CDATA[土豆网]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2007/07/20/tudou_and_blog/</guid>
		<description><![CDATA[讲谈社的少年向棒球漫画《王牌投手－振臂高挥》的改编动画，由于有安达充FEEL、有《热带雨林的爆笑生活》的监督水岛努、还有非常适合BL的男性角色们，所以最近似乎大受欢迎，提到这部动画是因为我突然想到了其中的一段对白，说是在人的身体之中，有三种非常重要的物质，它们分别代表着你的过去、现在和未来，它们是多巴胺、肾上腺激素、甲状腺激素。
我觉得自己现在一定很缺乏多巴胺，加入土豆网已经有两个多月，4个月以前的激情仍然潜伏在大脑里，但是好像离皮层太远……按照我以前的想法，逃离专门培养代码民工和项目经理的Outsourcing产业，加入到web2.0技术革命的最前沿，进入我所热爱（用keso的话来说应该是“信仰”？）的互联网的中心，从无趣的武汉来到真正的国际化都市，接触更多强者，第一次独立生活……这些都应该是很值得高兴、很值得满足一阵子的事情，但事实上……我的大脑很快就被紧张的工作、生活中的琐事、物质欲望、以及其他各种烦恼填充的快要内存溢出，满足感从一开始就被挤出大脑，再也找不回来……
正因为我自顾不暇，所以进入土豆以后，这个BLOG反而更新的少多了，虽然与以前相比，好像有更多可写的素材，但如果你知道我写BLOG的理由，就应该可以理解：一个自己都缺乏满足感，没时间去品味、消化的人，是不会舍得花时间写BLOG跟别人分享的……
缺乏写BLOG的欲望，也可能与成本太高有关，现在流行的twitter和饭否，都是因为降低了BLOG的参与成本，增强了交流，才大受欢迎的，虽然我不习惯用这种随时随地记录的WEB服务，但是也许我应该把这个blog的撰写、修改流程简化到像Aether的Avalon那样……
说到Avalon项目，当然要大力推荐一下，这是一个不管从哪方面说都很有新意的BLOG程序，前端完全用XML/XSL取代了XHTML，而且保持很好的兼容性，内容组织方式类似twitter，以时间来区分，简化到连标题都没有，非常大胆，牺牲文章的可见性和读者的易用性，换取作者的超爽体验和简易流程……哎呀，我其实是想描述优点的-____-b……没有任何后台界面，不用登录（使用openID），直接在文字段落上点击就可以增删修改，自动保存，没有任何按钮，发表新文章时也像在纸上写字那么简单，还可以通过GTALK来提交……总之，这是一个完全为作者利益服务，UI方面有很多创新的BLOG程序，缺点除了上面提到的，还有一点就是：它是基于.net的……
Aether是我在土豆认识的第一个同事（因为他是前端开发小组的lead，负责招聘-____-b），他可以利用偶尔的业余时间在星巴克用笔记本写Avalon，晚上加班的时候写BLOG，这种方式与我的习惯差之千里……实际上，在我刚进入土豆的一个多月里，几乎连业余时间都没有……一些在做外包开发的同学，都以为互联网公司很轻松，拿过VC的互联网公司更是休闲场所，实际上这里的前端开发工作更加繁重，要考虑的细节更多（文字/符号提示、整体流程），项目不但一个接一个，还有并行的，你需要主动替用户发现新需求（等到让用户来告诉你时，通常意味着已经落后了），实现过程中不能太随意太大胆，要考虑用户习惯，项目提交之后等待你的是QA的折磨和几轮DEBUG，谁也不敢掉以轻心，“在足够多的眼球下，任何BUG都无处隐藏”，Eric Raymond的名言其实说的是WEB2.0应用……上线之后还要持续跟踪、改进。更麻烦的是……土豆网恰好处于国内WEB2.0行业里竞争最激烈的领域，虽然土豆有很大优势，但是2006年已经涌现出了两三百家视频网站，除了YOUTUBE式的视频分享，还有很多五花八门打视频旗号的概念，有垂直领域的专题视频网站，也有新浪这样的门户参战，颇有以前互联网泡沫的feel，视频网站做大以后也是最烧钱的，也许过不了一年多，90%的视频网站都会扑街，这里的竞争和压力，远远超过豆瓣之类的网站……
本来打算在这篇文章里简单总结一下在土豆的感受，还有我来土豆之后做的几个项目……但是由于在NTRPG养成的跑题习惯……这篇文章已经太长了，到此结束……下一篇再作补充……
]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.limboy.com/2007/07/20/tudou_and_blog/logojpg/' rel='attachment wp-att-150' title='logo.jpg'><img src='http://www.limboy.com/wp-content/uploads/2007/07/logo.jpg' alt='logo.jpg' style="float:left;margin:0 10px 10px 0;" /></a>讲谈社的少年向棒球漫画《王牌投手－振臂高挥》的改编动画，由于有安达充FEEL、有《热带雨林的爆笑生活》的监督水岛努、还有非常适合BL的男性角色们，所以最近似乎大受欢迎，提到这部动画是因为我突然想到了其中的一段对白，说是在人的身体之中，有三种非常重要的物质，它们分别代表着你的<strong>过去</strong>、<strong>现在</strong>和<strong>未来</strong>，它们是<strong>多巴胺</strong>、<strong>肾上腺激素</strong>、<strong>甲状腺激素</strong>。<span id="more-149"></span></p>
<p>我觉得自己现在一定很缺乏多巴胺，加入<a href="http://www.tudou.com">土豆网</a>已经有两个多月，<a href="http://www.limboy.com/2007/03/03/herosback/">4个月以前的激情</a>仍然潜伏在大脑里，但是好像离皮层太远……按照我以前的想法，逃离专门培养代码民工和项目经理的Outsourcing产业，加入到web2.0技术革命的最前沿，进入我所热爱（用<a href="http://blog.donews.com/keso/archive/2007/07/16/1186858.aspx">keso的话</a>来说应该是“信仰”？）的互联网的中心，从无趣的武汉来到真正的国际化都市，接触更多强者，第一次独立生活……这些都应该是很值得高兴、很值得满足一阵子的事情，但事实上……我的大脑很快就被紧张的工作、生活中的琐事、物质欲望、以及其他各种烦恼填充的快要内存溢出，满足感从一开始就被挤出大脑，再也找不回来……</p>
<p>正因为我自顾不暇，所以进入土豆以后，这个BLOG反而更新的少多了，虽然与以前相比，好像有更多可写的素材，但如果你知道我写BLOG的<a href="http://www.limboy.com/2006/12/03/continue/">理由</a>，就应该可以理解：一个自己都缺乏满足感，没时间去品味、消化的人，是不会舍得花时间写BLOG跟别人分享的……</p>
<p>缺乏写BLOG的欲望，也可能与成本太高有关，现在流行的<a href="http://twitter.com">twitter</a>和<a href="http://fanfou.com/">饭否</a>，都是因为降低了BLOG的参与成本，增强了交流，才大受欢迎的，虽然我不习惯用这种随时随地记录的WEB服务，但是也许我应该把这个blog的撰写、修改流程简化到像Aether的<a href="http://woooh.com/2007/07/14">Avalon</a>那样……</p>
<p>说到Avalon项目，当然要大力推荐一下，这是一个不管从哪方面说都很有新意的BLOG程序，前端完全用XML/XSL取代了XHTML，而且保持很好的兼容性，内容组织方式类似twitter，以时间来区分，简化到连标题都没有，非常大胆，牺牲文章的可见性和读者的易用性，换取作者的超爽体验和简易流程……哎呀，我其实是想描述优点的-____-b……没有任何后台界面，不用登录（使用<a href="http://www.google.com/search?aq=o&#038;hl=en&#038;newwindow=1&#038;client=firefox-a&#038;rls=org.mozilla%3Azh-CN%3Aofficial&#038;hs=frF&#038;q=OpenID+%E4%B8%AD%E6%96%87&#038;btnG=Search">openID</a>），直接在文字段落上点击就可以增删修改，自动保存，没有任何按钮，发表新文章时也像在纸上写字那么简单，还可以通过GTALK来提交……总之，这是一个完全为作者利益服务，UI方面有很多创新的BLOG程序，缺点除了上面提到的，还有一点就是：它是基于.net的……</p>
<p>Aether是我在土豆认识的第一个同事（因为他是前端开发小组的lead，负责招聘-____-b），他可以利用偶尔的业余时间在星巴克用笔记本写Avalon，晚上加班的时候写BLOG，这种方式与我的习惯差之千里……实际上，在我刚进入土豆的一个多月里，几乎连业余时间都没有……一些在做外包开发的同学，都以为互联网公司很轻松，拿过VC的互联网公司更是休闲场所，实际上这里的前端开发工作更加繁重，要考虑的细节更多（文字/符号提示、整体流程），项目不但一个接一个，还有并行的，你需要主动替用户发现新需求（等到让用户来告诉你时，通常意味着已经落后了），实现过程中不能太随意太大胆，要考虑用户习惯，项目提交之后等待你的是QA的折磨和几轮DEBUG，谁也不敢掉以轻心，“在足够多的眼球下，任何BUG都无处隐藏”，Eric Raymond的名言其实说的是WEB2.0应用……上线之后还要持续跟踪、改进。更麻烦的是……土豆网恰好处于国内WEB2.0行业里竞争最激烈的领域，虽然土豆有很大优势，但是2006年已经涌现出了两三百家视频网站，除了YOUTUBE式的视频分享，还有很多五花八门打视频旗号的概念，有垂直领域的专题视频网站，也有新浪这样的门户参战，颇有以前互联网泡沫的feel，视频网站做大以后也是最烧钱的，也许过不了一年多，90%的视频网站都会扑街，这里的竞争和压力，远远超过豆瓣之类的网站……</p>
<p>本来打算在这篇文章里简单总结一下在土豆的感受，还有我来土豆之后做的几个项目……但是由于在NTRPG养成的跑题习惯……这篇文章已经太长了，到此结束……下一篇再作补充……</p>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2007/07/20/tudou_and_blog/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Mozilla的中文译名太可笑了！</title>
		<link>http://www.limboy.com/2007/06/03/mozilla/</link>
		<comments>http://www.limboy.com/2007/06/03/mozilla/#comments</comments>
		<pubDate>Sun, 03 Jun 2007 04:30:12 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[土豆网]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2007/06/03/mozilla/</guid>
		<description><![CDATA[Mozilla中国终于要正式成立了，前几天的消息是Windows Live中国区前任总经理宫力（也是前任Sun公司中国工程研究院院长）将担任Mozilla中国的董事长兼CEO，今天在他的BLOG上看到进一步的消息：在中国成立的公司名叫Mozilla Online Ltd，而中文译名是谋智网络！ 全称：Beijing Mou-Zhi Network Technologies Ltd.（北京谋智网络技术有限公司）…………
这个名字让我很郁闷，本来mozilla这个名字来源于“哥斯拉（Gozilla）”和Mosaic（第一个可以显示图片的浏览器，Netscape的前身），LOGO上的图案也是一个类似恐龙的怪物，中文就应该译成“魔斯拉”哑！“魔斯拉在线”，多么华丽！多么强势！现在居然起了一个跟谷歌差不多风格的名字……真是作孽哑……
这次在北京举办的Google开发者日活动里，除了发布Google Gears，也邀请了Mozilla负责研发的副总裁Mike Schroepfer，solidot的记者对他做了采访，从笔录里可以看到，firefox在中国的占有率只有1%，远远落后于西方国家，要改善这样的状况，我觉得Mozilla必须在两个方面做大量工作，一方面是针对开发者，中国WEB开发者的整体素质明显偏低，Mozilla不仅应该致力于推广标准，也应该跟国内的开发社区加强沟通，比如51js（我在这个地方看帖无法坚持5分钟以上，否则会憋出病）。另一方面，应该研究一下“中国国情”，调查一下中国特殊的用户需求，推出适合中国小白用户的firefox套件/定制版，包括必要的扩展和初始设置。当然也要在用户中提高能见度和影响力，即使不做市场推广，我觉得也应该起一个响亮的名字……
说到中国的浏览器用户，我想起上周在开发中遇到的一个小任务，土豆网需要在首页和搜索页面临时增加一个调查表单，设计人员给的是一种很传统的小窗口，所以便做成一个固定在右下角的浮动层，在Maxthon里测试时，发现这个层会被当作广告过滤掉——随着滚动条移动几次之后，便毫无缘由的消失。判断的依据似乎是：absolute定位的层，且里面包含a标签（多么傻X的规则），于是去请示负责产品的Hans大人，他答复：先不用管Maxthon，给我确保腾讯浏览器里能正常显示……我差点晕倒。我还没看过土豆网的用户统计，如果按照Mike Schroepfer的“10％理论”，Maxthon的占有率居然低到可以忽略，而腾讯浏览器的用户高于10%……这实在太可怕了，虽然以前就知道像土豆网这样的视频网站，在中国的用户会比较低端比较小白，不过现在发现要真正理解国内的用户，我还有很多功课要做……
]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.limboy.com/wp-content/uploads/2007/06/mozilla.gif' title='mozilla.gif'><img src='http://www.limboy.com/wp-content/uploads/2007/06/mozilla.gif' alt='mozilla.gif' style="float:left;width:150px;margin:0 10px 0 0;" /></a>Mozilla中国终于要正式成立了，前几天的消息是Windows Live中国区前任总经理宫力（也是前任Sun公司中国工程研究院院长）将担任Mozilla中国的董事长兼CEO，今天在<a href="http://blog.mozilla.com/ligong/2007/05/31/bootstrapping-in-china/">他的BLOG</a>上看到进一步的消息：在中国成立的公司名叫Mozilla Online Ltd，而中文译名是<strong>谋智网络</strong>！ 全称：Beijing Mou-Zhi Network Technologies Ltd.（北京谋智网络技术有限公司）…………</p>
<p>这个名字让我很郁闷，本来mozilla这个名字来源于“哥斯拉（Gozilla）”和Mosaic（第一个可以显示图片的浏览器，Netscape的前身），LOGO上的图案也是一个类似恐龙的怪物，中文就应该译成“<strong>魔斯拉</strong>”哑！“<strong>魔斯拉在线</strong>”，多么华丽！多么强势！现在居然起了一个跟谷歌差不多风格的名字……真是作孽哑……<span id="more-136"></span></p>
<p>这次在北京举办的<a href="http://code.google.com/events/developerday/cn-home.html">Google开发者日</a>活动里，除了发布Google Gears，也邀请了Mozilla负责研发的副总裁Mike Schroepfer，solidot的记者对他做了<a href="http://software.solidot.org/article.pl?sid=07/05/30/1018256&#038;tid=39">采访</a>，从<a href="http://software.solidot.org/article.pl?sid=07/06/01/0037248&#038;from=rss">笔录</a>里可以看到，firefox在中国的占有率只有1%，远远落后于西方国家，要改善这样的状况，我觉得Mozilla必须在两个方面做大量工作，一方面是针对开发者，中国WEB开发者的整体素质明显偏低，Mozilla不仅应该致力于推广标准，也应该跟国内的开发社区加强沟通，比如<a href="http://bbs.51js.com/forum-1-1.html">51js</a>（我在这个地方看帖无法坚持5分钟以上，否则会憋出病）。另一方面，应该研究一下“中国国情”，调查一下中国特殊的用户需求，推出适合中国小白用户的firefox套件/定制版，包括必要的扩展和初始设置。当然也要在用户中提高能见度和影响力，即使不做市场推广，我觉得也应该起一个响亮的名字……</p>
<p>说到中国的浏览器用户，我想起上周在开发中遇到的一个小任务，土豆网需要在首页和搜索页面临时增加一个调查表单，设计人员给的是一种很传统的小窗口，所以便做成一个固定在右下角的浮动层，在Maxthon里测试时，发现这个层会被当作广告过滤掉——随着滚动条移动几次之后，便毫无缘由的消失。判断的依据似乎是：absolute定位的层，且里面包含a标签（多么傻X的规则），于是去请示负责产品的Hans大人，他答复：先不用管Maxthon，给我确保腾讯浏览器里能正常显示……我差点晕倒。我还没看过土豆网的用户统计，如果按照Mike Schroepfer的<a href="http://software.solidot.org/article.pl?sid=07/06/01/0037248&#038;from=rss">“10％理论”</a>，Maxthon的占有率居然低到可以忽略，而腾讯浏览器的用户高于10%……这实在太可怕了，虽然以前就知道像土豆网这样的视频网站，在中国的用户会比较低端比较小白，不过现在发现要真正理解国内的用户，我还有很多功课要做……</p>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2007/06/03/mozilla/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>补发前天的照片</title>
		<link>http://www.limboy.com/2007/04/25/tudou/</link>
		<comments>http://www.limboy.com/2007/04/25/tudou/#comments</comments>
		<pubDate>Wed, 25 Apr 2007 13:25:57 +0000</pubDate>
		<dc:creator>Dexter.Yy</dc:creator>
				<category><![CDATA[Web2.0]]></category>
		<category><![CDATA[土豆网]]></category>
		<category><![CDATA[纯水]]></category>

		<guid isPermaLink="false">http://www.limboy.com/2007/04/25/tudou/</guid>
		<description><![CDATA[临街的小门：

隔壁的房子，旁边还有酒吧和设计书店……

通过一条小道，便看到涂鸦：

大门：

顶楼：

Dev部门的工作场地：

涂鸦……以及面试BOSS NO3……

涂鸦……这次是技术主题：

休息室之一：

休息室之二：

苏州河旁的其他仓库：



THE END
]]></description>
			<content:encoded><![CDATA[<p>临街的小门：<br />
<a href="http://www.yupoo.com/photos/view?id=ff808081122800dd011228ca3f8b0fa7" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/204940_1798676708_m.jpg" alt="土豆临街门" width="240" height="180" border="0" /></a></p>
<p>隔壁的房子，旁边还有酒吧和设计书店……<span id="more-108"></span><br />
<a href="http://www.yupoo.com/photos/view?id=ff808081122800dd011228da6ff110fd" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/210721_1491831288_m.jpg" alt="土豆隔壁" width="240" height="180" border="0" /></a></p>
<p>通过一条小道，便看到涂鸦：<br />
<a href="http://www.yupoo.com/photos/view?id=ff808081122800dd011228ca4f7a0fa8" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/204942_862563044_m.jpg" alt="土豆大门旁" width="240" height="180" border="0" /></a></p>
<p>大门：<br />
<a href="http://www.yupoo.com/photos/view?id=ff808081122800dd011228ca58170fa9" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/204946_1890878869_m.jpg" alt="土豆大门" width="240" height="180" border="0" /></a></p>
<p>顶楼：<br />
<a href="http://www.yupoo.com/photos/view?id=ff808081122800dd011228ca60b90faa" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/204948_562677221_m.jpg" alt="土豆顶楼" width="240" height="180" border="0" /></a></p>
<p>Dev部门的工作场地：<br />
<a href="http://www.yupoo.com/photos/view?id=ff808081122800dd011228ca69460fab" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/204950_1072647771_m.jpg" alt="土豆办公室" width="240" height="180" border="0" /></a></p>
<p>涂鸦……以及面试BOSS NO3……<br />
<a href="http://www.yupoo.com/photos/view?id=ff8080811227ff6f011228cc69180ea3" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/205200_1312980280_m.jpg" alt="土豆涂鸦2" width="240" height="180" border="0" /></a></p>
<p>涂鸦……这次是技术主题：<br />
<a href="http://www.yupoo.com/photos/view?id=ff8080811227ff6f011228cc76da0ea4" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/205204_572290244_m.jpg" alt="土豆涂鸦" width="240" height="180" border="0" /></a></p>
<p>休息室之一：<br />
<a href="http://www.yupoo.com/photos/view?id=ff8080811227ff6f011228cc950f0ea6" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/205210_1765826218_m.jpg" alt="土豆休息室2" width="240" height="180" border="0" /></a></p>
<p>休息室之二：<br />
<a href="http://www.yupoo.com/photos/view?id=ff8080811227ff6f011228cca3880ea9" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/205215_2118279763_m.jpg" alt="土豆休息室" width="240" height="180" border="0" /></a></p>
<p>苏州河旁的其他仓库：<br />
<a href="http://www.yupoo.com/photos/view?id=ff8080811227ff6f011228c59f250e52" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/204435_226814135_m.jpg" alt="苏州河边的仓库3" width="240" height="180" border="0" /></a></p>
<p><a href="http://www.yupoo.com/photos/view?id=ff8080811227ff6f011228c5ba3a0e55" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/204442_556549308_m.jpg" alt="苏州河边的仓库1" width="240" height="180" border="0" /></a></p>
<p><a href="http://www.yupoo.com/photos/view?id=ff8080811227ff6f011228c5aca30e53" title="来YUPOO看我的照片"><img src="http://photo7.yupoo.com/20070425/204439_397722044_m.jpg" alt="苏州河边的仓库2" width="240" height="180" border="0" /></a></p>
<p>THE END</p>
]]></content:encoded>
			<wfw:commentRss>http://www.limboy.com/2007/04/25/tudou/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

