[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"list-\u002Farticles\u002F10":3},{"items":4,"total":121},[5,20,34,42,50,57,67,75,82,90,100,110],{"id":6,"type":7,"slug":8,"title":9,"date":10,"category":11,"tags":12,"body_markdown":14,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},74,"article","the-broken-window-effect","破窗效应","2013-03-04 19:52","life",[13,9],"随笔","\n最近的状态基本有点“放羊”，整天整天地不想做事情。其实从过年回来就差不多一直是这个状态了，一方面从封闭开发的环境中搬出来，项目的压力小了很多，但另一方面，恐怕更为重要的是过年把人养懒了。有些习惯真的是开弓就难回头。\n\n有种很神奇的现象叫“破窗效应”，它说的是如果一扇窗子有一块玻璃被打碎，而又没有及时修补，那么其它的玻璃不久也会被一一打碎。\n\n我觉得我就处在一种被打碎的状态了。其实这种现象老祖宗早就有过总结，叫破罐子破摔。反正都没把自己搞那么紧张了，今天再休息一会也觉得无所谓了。于是就这样懒懒散散地度过了开头的头两周，其中还有好几天赖床错过班车。\n\n是时间想想年前的紧张时光了，那或许是我状态最好的时光了，不知道还能不能找回那种状态。不过，既然决定找的话，就应该从点滴做起，先把破掉的窗户玻璃先一块一块修复起来。于是，今天早起了。\n\n加油！（没准备写这么短的，不过进不去状态，作罢。）\n",null,0,"2026-08-28 04:37:17","published","",{"id":21,"type":7,"slug":22,"title":23,"date":24,"category":25,"tags":26,"body_markdown":30,"permalink":15,"excerpt_src":15,"media_type":31,"media_title":29,"media_author":28,"media_url":32,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":33},12,"warm","温热——读《看见》有感","2013-01-17 08:22:00","bmm",[27,28,29],"观后感","柴静","看见","\n![看见](\u002Fassets\u002Fbmm\u002F2013\u002Fwarm\u002F01.jpg)\n\n我看柴静的节目不多，但偶尔会看看她的博客。她博客中那些简练平实的文字和一些独到的视角总能引起我很多的思考。因此在看到她的新书《看见》首发之后，就迫不及待地买了一本。起初，我还在想，是不是我又冲动消费了，居然对一位CCTV的记者有兴趣？可是当我断断续续花了一个多月看完它以后，觉得再买一本都不为过。\n\n这本书延续了柴静博客的风格，文字非常平实，没有华丽的词藻，没有夸张的渲染。它只是在叙事，几乎没有评论，但她笔下的寥寥数语，却能一下一下直直地撞到心坎上，让人真真切切地感觉到文字后面的另一个世界，唏嘘不已。\n\n昨天我发了一天微博，说读了这本书，有种白活这么多年的感觉，很想从头再活一次。事实上，这是我二十多年来第一次有这种感觉。一直以来，在外人眼中，我都是一个很有原则的人，因为我的生活哲学很简单，觉得一切事务都有其规则，生活不过就是遵循这些所有的规则而已。同时，因为一些变故，突然觉得这世上人情淡薄，冷暖自知。在这种生活哲学的指导下和感情上的刺激下，我渐渐地开始把自己关起来，远离身边的人，远离心中的事。那时候的我以“心如止水，无欲无求”为最高追求，以“冷眼看世界”作为自己的的行动指导，并很欣然地接受了“抒寒”一名，寓意“写意人间冷暖”，延用至今。\n\n诚然，这些处世态度很好地培养了我的洞察力和应变能力，因为人在没有情绪的时候也是最理智的时候，往往能很好地处理手上遇到的问题，甚至连我的同学都说羡慕我冷静的头脑，而这一点也一直让我很自豪。在看《看见》的前半部分时，我也为此深深共鸣，她在采访时不断要求自己尽量客观，多听当事各方的意见，不做评论只呈现事实，都让我觉得有种遇到知音的感觉。读到“真相往往流失于涕泪交加”时，甚至觉得这世界上懂得这个道理的人太少，柴静真的是不可多得的记者。\n\n然而，当我接着往后看，看到她慢慢地理解何谓信任，何谓感受，何谓理解时，才发现这些直白的道理，于我而言，竟不是如此理所当然的事情。当看到她慢慢地将质问的习惯很艰难地改掉，然后说出“当一个人关心别人的时候，才会忘记自己” 、“理解的基础是感受。人能感受别人的时候，心就变软了，软不是脆弱，是韧性”时，我突然就觉得心中有些地方被敲中了，隐隐地还有些疼。\n\n我是在上班的班车上开始看最后一章的，到了公司后还没看完，于是索性在办公室接着看，这也是我第一次大清早在公司看书，因为完全没有办法停下来。甚至那天的一整个上午，我脑袋中都充满了这本书带给我的震憾。我开始想到，我是不是离这个世界太远了，而忽略了太多太多的人性和情感？眼前突然就浮现出太多的画面：跟人聊天永远只听不看，甚至心不在焉；不到万一，从来不跟人打招呼；讨论事情永远单刀直入，不看气氛情绪……\n\n而柴静，就是那一片温热，她有血有肉，她把自己放入这个世界，放到别人的生活中，去感受去体验，然后交流就成了一件并不需要刻意去做的事情，很多东西就会自然而然地流淌出来，无比真实和深刻。\n\n我果然是把自己包裹太严实了，离世界太远，离人太远。好在，我还年轻，好在，我读到了这本书。\n","book","https:\u002F\u002Fbook.douban.com\u002Fsubject\u002F20427187\u002F","https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fbmm\u002F2013\u002Fwarm\u002F01.jpg",{"id":35,"type":7,"slug":36,"title":37,"date":38,"category":11,"tags":39,"body_markdown":41,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},75,"the-meaning-of-write-blogs","写博客的意义","2013-01-07 12:34:00",[13,40],"博客","\n昨天一天很烦躁，到了晚上，一边饿着肚子一边看着项目中数不清的bug，更是烦躁透顶了。老是封闭在一个小会议室做着不知所谓的事情，这种看不到尽头的工作已经进行小半年了。\n\n人在消极的时候总是会冒出很多奇怪的想法，会去质疑手上的每件工作，质疑身边的每一个人。心直口快的可能就直接骂出来了，而我，忍了一下，收回去了。\n\n这种状态下我发现我会有想写博客的冲动，于是假设了一个场景，我打开了编辑器，即将敲下新的一篇文字。这时，奇特的事情发生了，我发现我会不由自主地将自己抬到一个很高的精神层次，然后接下来就是一连串的质问：你怎么可以有如何消极的想法，你怎么可以如此评价身边的人？你的职业素养、个人修养都到哪里去了？\n\n我有点惊讶。然后发现，原来以前每次准备写博客的时候，也会将自己精心包装一番，然后回头去看自己的现状，还算满意，再写出一句一句自己还满意的句子。更进一步，我发现写博客的过程其实就是一个不断自我剖析的过程。在这个过程中，会自然而然地将事情一丝一缕地分析清楚，同时也会自然而然地去拒绝那些负面的情绪。\n\n古人曰过：“吾日三省吾身”。在这个高节奏的时代，能有时间去反省自身已经实属不易，而博客，正是一个反省自身的绝佳机会。\n\n发现这一点让我又惊又喜，我终于可以找到除了文笔之外的第二个坚持写博客的理由。或许这个理由一直在我心中，但是直到今天，我才真真切切地看到它。于是，我相信，我的博客会一直写下去。\n",{"id":43,"type":7,"slug":44,"title":45,"date":46,"category":11,"tags":47,"body_markdown":49,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},72,"my-2011-and-2012-2","我的2011&2012 工作、生活篇","2013-01-02 15:04:00",[48],"年度总结","\n## 三、工作\n\n2011和2012两年基本都是在公司度过的了，所以其实工作才是这两年最重要的事情。虽然中间有段时间回学校处理毕业事宜，但毕竟时间太短，在两年这样一个时间跨度内算不上什么。当然，其中有趣的事情还是会在下面记录一下。\n\n其实在公司两年的时间比我想象中要过得快得多，尤其是2012年，还没回过神来，就已经走到结尾了。回头来看，这两年的成长还是非常明显的。\n\n最大的变化其实是心态上的变化。初来公司时怎么都觉得自己是个小屁孩，工作上多少会有些学生时代留下的毛病，比如开会不爱带笔记本、沟通不清楚时不敢去确认、有问题时不知道后果有多严重而不敢支声等等。诚然，我现在仍然觉得会有些事情比较懵懂，但至少我已经在用一名工程师的标准来要求自己去承担更多的东西。\n\n当然，更加职业化也是一个随时间顺其而然的事情，比如现在会要求沟通时留下更多的邮件，会在处理事情的时候做好备份留下log之类。\n\n除了这些之外，2012年还有一个不得不提的坑，就是运营。这一年我们做了好几个需要运营的项目，本来以为做好管理界面之后就万事大吉了，但最后还是不得不回头去处理大量的用户咨询，虽然后来做了一些措施有所缓解，但仍然时不时会有一堆人给你电话，然后打乱手上的工作计划去处理这些乱七八糟的事情，甚至连节假日都不能安心。虽然这些事情对于了解用户需求、客户导向之类的指导思想有相当积极的作用，但是对于开发的效率来说完全就是灾难。这似乎已经成了一块心病，而且无法预见会到什么时候结束，只能痛并痛着了。\n\n还有一些事情也值得记录一下。\n\n2012年，突然就工作繁忙起来了，上半年是因为一个运营项目，下半年则是因为另外一个内部项目。其实这个内部项目已经做了很久，按理说不应该突然出现这么繁忙的情况，但因为一些特殊的情况，项目团队成员在比较晚才完全到位，而且因为有新的成员，磨合也不是特别好，导致经常需要加班。希望这一情况能在下一年有所改观。\n\n通过这个内部项目，我也更加坚信，我内心深处其实更希望做一些扎实的基础技术，而不太喜欢太过表面的花哨东西。虽然我知道有些东西容易出彩，但就是没有太大兴趣。在这个项目中，我在我能掌控的范围内，尽量地将架构搭得合理，将基础写得牢靠。让我很高兴的是，事实证明，这个项目的前端还是比较扎实的，在应对后期不断的需求更改时表现超出我的预期。\n\n最后一件，仅仅是记录一下，那就是提前升职到T2了。但这一改变没有带来任何影响，既没有涨薪，也没有其它变化。不过我倒也觉得挺好的，免得乱了心智，继续埋下头认真做事就好。\n\n\n## 四、生活\n\n这两年来基本都在公司度过，唯一的例外是2011年夏，回学校毕业。因此这一段特别值得一说。\n\n一提起地大，必然不可回避的一个字眼就是“民乐团”，我大学四年里几乎所有印象深刻的时候都发生在这里，那些日子是永远在记忆中抹不掉的，最快乐的、最痛苦的、最感动的、最有成就感的……\n\n回到学校毕业的那一个多月的时间，也几乎天天和民乐团有些关系。那段时间突然就真的有了一种我要离开了的不舍，因此我也第一次从乐队中站起来，在排练的时候去观察大家，用相机去记录一些片段。当我很惊讶地发现，原来大家所有的人，不管你是学电子的学计算机的学美术的学工程的，当你投入到我们一起合作的音乐当中去的时候是那么美的时候，我几乎感动得想落泪。回想起以前的点点滴滴，一路走过来多么不容易，然而只要每一个人能感受到美，对民乐团来说，也就足够了。\n\n除了民乐团之外，还有一件正事，那就是毕业。我曾在[2010年的总结](\u002Farticle\u002Flife\u002F2010\u002Fmy-2010.html)中说过，我在大学投入了大把时间在民乐和计算机上，因此，毕业成了一个问题。所幸，最终顺利解决。中间的过程当然是艰辛的，这里也不愿细说过程。只是想说，帮助过我的每一个人，我都会在心里深深地记住并感激！\n\n回望这两年，从象牙塔出来，丢掉了琴棋书画诗酒花，捡起了柴米油盐酱醋茶，生生地感受到了生活的重量。2号腾讯月捐日，8号信用卡还款，18号交房租，19号手机月结日，20号信用卡账单日……米3块一斤，茄子1块一个，猪肉12块一斤……总是要记住很多个日子，总是要关注很多个数字，还要关注下账本，在心里默默地心算一遍，是不是又白干了一个月。\n\n在叫了大半年外卖之后，终于决定自己做饭了。虽然账本上仍看不到有明显的变化，但学会做饭好歹也算是人生中的一件大事，记录一下吧。\n\n再回到公司的生活，日子很规律，不加班的时候朝九晚五，加班的时候朝九，似乎没什么可说的。\n\n让我觉得还算兴奋的事情是上下班的时候在班车上看看书，不管是有代码的还是没代码的，都能吸引我读下去。这两年来也确实看了不少书，受益匪浅。\n\n偶尔想起来，会觉得自己的生活真的是过得很没有生趣。每每看着墙角那两支陪伴了我整个大学生活的笛子，总有一种隐隐的负罪感，大学的功底也荡然无存，深感对不起我的老师们和同我一起练过来的同伴们，当然，最对不起的是我自己那些酷暑寒冬里练功的日子。\n\n我跟哥说，我现在很多时候都会开着QQ音乐，然后让它“猜我喜欢”，然后一整天一整天在办公室这样听下去，对音乐已经毫无追求。他说，这是一种很可怕的状态。我懂。希望在2013年，我能对音乐好一点。\n\n除了音乐之外，还有一件让我心痛的事情是写作。曾经，在大学的时候，我以为我丢掉了写作，直到前几天整理博客，我才发现，其实我整个大学里都在写东西，2008、2009、2010的博客都有十几甚至几十篇。然而进入公司后，我就从博客上神秘消失了，直到写这篇总结的时候，才发现原来把文章写得行云流水并不是与生惧来的功夫。这个发现让我感到很恐慌。希望在2013年，我可以留下更多生活的痕迹。\n\n当然，必须一提的是，2012年，和部门的同事一起去了一趟泰国普吉岛。其实我并没有抱着很明确的目的去玩，只是隐隐地想让自己走远一点，去感受一下别国他乡的风土人情。普吉岛风景确实很好，于是我也在这里第一次给朋友们寄出了明信片。不过很遗憾的是，普吉岛已经成为一个旅游胜地，痕迹太重，风土人情太少，多多少少觉得有些失落。[彪叔](http:\u002F\u002Fwww.twisenliang.net)去的时候说，他想去当地人家里多坐坐，我想，如果还有下一次，我会跟他一起的。\n\n生活也就大约如此吧。\n\n最后想记录的是自己的观念。以前总爱较真，处处守着自己的原则，但现在我已经不再轻易宣扬了，因为你不可能说服所有的人。有人愿意听时，我会认真地表达，但大部分时间，我只愿意静静地听一下，偶尔会笑而不语。\n\n最后的最后，当然还要总结下感情生活啦。如果用一个字来说呢，那就是好，两个字就是很好。但和以前相比，总还是有些变化。\n\n第一个变化是外在的。当年，我去淘宝面试的时候，小马问过我一个问题，说你女朋友觉得你有什么缺点。我想了一下，答，她觉得我太爱讲道理了。这是事实，以前我确实爱讲道理，但现在却很少讲了。一来，生活落到现实中，我的生活经验并不比她丰富，弄巧成拙的时候并不少；二来，从学校出来后，大家都知道了学习的范围是无限广的，大家都在努力地接受新的东西，因此以前我那点靠不务正业得来的知识已经没有优势；三来，除了讲道理，我们有了做饭吃饭看电影看电视之类更多的事情可以做。我本以为这个变化会让我觉得失落，但事实上，却更让我觉得踏实了，有种落地站住脚根的感觉。\n\n第二个变化是心理上的。2012年，有大约两个月的时间是一个人生活的。以前我也一个人生活过，觉得一切都好，但这一次，突然觉得对对方有了一种强烈的依赖感。发现这一事实让我第一感觉是恐慌，我怎么过不了一个人的生活了。但随之而来的是心安，两个人，正是这样才正常。\n\n就这样收笔好了，虽然文风上来看，似乎意犹未尽，但是，我要写的话真的已经写完了。期待明年的总结文笔能再通顺一点。\n",{"id":51,"type":7,"slug":52,"title":53,"date":54,"category":11,"tags":55,"body_markdown":56,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},67,"my-2011-and-2012-1","我的2011&2012 业界、技术篇","2012-12-29 18:53:00",[48],"\n这几天在捣鼓以前的博客，看着[归档](\u002Farticle\u002Fall-1.html)中空荡荡的2011和2012，突然意识到我是有多久没有写过文字了。粗看一眼，就会发现时间界线很明显，2010年末，那是我来到公司的日子，自此之后，博客上几乎一言不发，甚至连2011年的总结都欠下来了。\n\n文字已经生疏，以至于犹豫了一个小时，仍然不知道如何下笔。但世界末日已经过去，无论如何都需要认真地回头看一看这两年的时光了，否则，我真的不知道这些总结的文字会欠到什么时候去。\n\n## 一、业界\n\n对业界的理解基本上是在进入公司之后从零开始建立的。我相信，有非常多的人和我进公司之前一样，觉得自己每天都在使用互联网产品，多少还是有一些了解的。但是，在现在这个时间点去看两年前的自己，我只能说，我看到了互联网行业的趋势，但并不知道这些趋势是由谁驱动而来，又由谁发扬光大的。\n\n关于这一点，由于涉及到太多的专业知识和背景，不打算细细论证，只陈列出几个观点：\n\n1. 互联网企业归根结底是“企业”，不想着赚钱的企业不是好企业。（当然，赚钱的方式有很多，并不是免费的产品就不赚钱。）\n2. 一款产品算创新还是算山寨很多时候会由企业的营销和公关来决定，其它的（包括专利）都是浮云。\n3. 仅有想法在互联网行业是活不下去的，执行力和团队远比想法重要。\n4. 中国互联网的处境很艰难，面临的监管太多，谁都想插一脚。\n5. 中国互联网的技术已经追平甚至在某些方面开始超越国际互联网。\n\n关于这些观念，如果展开来讲可以讲很久很久，但我并不打算细讲。只是经过这两年，才深深地觉得，互联网的水相当深。得出这些结论并不是一朝一夕的事情，而是需要长期保持对业界相当高的关注度，才能慢慢看出些所以然。况且，互联网本身瞬息万变，没有一个结论是可以经年不衰的，这迫使每一位互联网的从业者都需要不断地学习充电，不断用新的眼光去看待自己从事的行业。\n\n对这些资讯的积累和思考也更进一步让我坚信了任何行业都是需要积累的，同时对刚出校门的互联网创业者有了更悲观的态度。\n\n## 二、技术\n\n近两年来，看过不少的技术书，尝试过不少的技术方向，也不得不说，仅从技术角度来讲，跟两年前相比，现在还是有质的飞跃的。\n\n当然，这不是最重要的。最重要的是对待技术的心态变化。何谓NB？[彪叔](http:\u002F\u002Fwww.twinsenliang.net)说，能做出NB的产品才是NB的技术。以前我总是觉得，知道越多的技术，知道得越深的人越是牛人，但两年多的工作下来，会发现，其实那些能够合理利用时间、合理使用技术、做出最漂亮的产品的人才是最牛的人。\n\n这一点对于一个工程师来说是非常重要的。在网上和同行交流的时候，很多人会了陷入工程师自己的小世界里面去，比如会纠结于产品的某个需求会影响到代码的架构，比如会纠结于设计的某个实现让他对这部分的代码感到恶心，比如对老板要求快速出成果的要求本能地反感。其实这种想法是很危险的，很容易让人产生另一种想法：“什么都做不了，算个毛的工程师。”换个角度，把自己不再当成是工程师，而是当成项目成员，甚至是产品经理，想象手上的东西是要一个完美的用户体验而不是完美的技术，一切都会有改观。\n\n回到技术本身，前端方向近两年可谓是风起云涌，HTML5\u002FCSS3\u002FNode\u002FPhoneGap\u002FAdobe AIR\u002FWeb App等方向可谓是风起云涌。而自己在这两年也有幸在工作中使用过其中的一些技术。在有过这些外延方向的尝试经历之后，其实会发现，基础知识才是最重要的东西。而对周边技术的了解则会让你在跨领域开发的时候如鱼得水。所幸，我觉得我还做得不错。\n\n而在前端理论和工具方面，国内外也是非常活跃的，模块加载机制、异步编程体验改进、CSS编写和维护方式改进、基于Node的前端工具等都是非常活跃的领域。这两年我也在努力地跟随社区去理解这些东西，但目前为止，尝试得仍然太少，也许2013年这是一个可以发力的方向，也可能会是一个有空间可以发挥的领域。\n\n此外，在接触业界最先进的东西后，对开源的理解也更为深刻，同时也喜欢上了开源社区[github](http:\u002F\u002Fwww.github.com)，从中学到了不少好东西。此外还有一些国外产品也让我非常欣喜，比如[cloud9 IDE](http:\u002F\u002Fc9.io)是一款在线代码编辑器，可以直接从github推拉代码，也可以在线编辑调试，甚至还可以直接部署到一些应用环境中，非常方便。\n\n当然，我也在2012年向开源社区提交了自己的第一行代码，并被接收了，这让我非常惊喜。我也希望自己能在2013年在开源社区中更加活跃，为开发者贡献更多更好的代码。\n",{"id":58,"type":7,"slug":59,"title":60,"date":61,"category":62,"tags":63,"body_markdown":66,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},113,"hello-farbox","hello farbox!","2012-12-27 09:47:48","tech",[40,64,65],"搬家","farbox","\n应该是从07年开始写博客的吧，最早是在[新浪](http:\u002F\u002Fblog.sina.com.cn\u002Fshuhan0520)。当时还纠结了好久好久，因为自己是一个不爱随大流的人，当大家都一窝蜂地开博客的时候，我就有种从心底升起的反感。不过后来想想，其实无所谓，重要的是我自己记录下的那些文字，而不是其它，或者其它人。\n\n后来可能是09年，觉得新浪博客玩得不过瘾了，自己搭了一个PJBlog，也就是在新浪留的最后一篇文章中的域名shuhan.sssky.net，不过好景不长，一段时间后又觉得PJBlog实在是有点难用，加上当时正值求职前夕，遂自己写了一个当时觉得很风骚的仿XP界面的抒寒居网站。这个站后来在面试中也应该为我加了不少分。\n\n再后来就工作了，渐渐不再使用ASP，于是抒寒居也就不再维护。自己也因为忙于工作，很久不再写博客，于是很长一段时间因为服务器关闭而导致博客一直打不开。\n\n直到昨天，遇到[FarBox](http:\u002F\u002Ffarbox.com)才深深觉得，这就是我想要的！不需要后台，不需要空间，不需要维护。所有需要的只是写下文字，按一下CTRL+S，其它的一切都搞定了。\n\n以后就在这里写博客了，FarBox！\n",{"id":68,"type":7,"slug":69,"title":70,"date":71,"category":62,"tags":72,"body_markdown":74,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},114,"predict-on-internet","2012中国互联网预测","2012-12-04 18:58",[73],"互联网","\n来自知乎问题[即将逝去的2012年，中国的互联网发生了哪些重要的事情，这些事情将会对今后将产生哪些重要的影响？](https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F20635900\u002Fanswer\u002F15705606)\n\n1、微信用户突破2亿，有理由相信微信会开创移动互联网的新格局，包括再造app store或者创造出移动互联网第一个成熟的盈利模式，或者开创中国互联网产品国际化推广新成就都是有可能的。\n\n2、淘宝2012年交易额突破10000亿，占到GDP的2%，这将成为互联网购物史上的一个标志性事件，有很多意义可以说，比如网购已经切实走进人们生活，比如天猫的成功已经表明低价不是网购唯一的吸引力，比如支付宝强大的现金流后面可能衍生出来的更多游戏模式（当然，也有可能因为政策原因难产），比如线上购物开始面临和线下同样的来自各方面的管理（质检、税收等），比如对物流提出更高的要求从而使物流行业也产生格局变化等。\n\n3、优酷土豆合并，可以算是作为2011年烧钱运动结束的一个明显标志，从此视频行业从烧钱中解脱出来，开始采用联合版权购买等方式来降低成本，也开始有恃无恐地投放广告、试水收费电影。总体来说竞争减少，合作增多，也许会为在线视频行业带来新的机遇。\n\n4、360搜索，会慢慢改变国内的搜索格局，百度的日子会不好过。\n\n5、小米手机退烧，被指期货，今后小米走的这条路未必顺利，尤其是在魅族、华为等厂商下决心打硬仗的时候。（必须承认，小米在手机本身上下的功夫不及后两者。）\n\n想写第6条的，但总还是觉得2012年的中国互联网太平淡。迅雷未上市、资本市场遇冷、网络反腐问政、腾讯电商独立、阿里巴巴私有化、金山一系列积极的动作都没有看到太多对互联网业界的意义。\n",{"id":76,"type":7,"slug":77,"title":78,"date":79,"category":11,"tags":80,"body_markdown":81,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},66,"how-to-face-disabled","如何面对身体残疾导致的压力","2012-11-20 09:01",[],"\n来自知乎问题[我是一个跛足女生，承受了很大的压力。其他的残疾朋友是如何面对的？](https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F20324376\u002Fanswer\u002F15607155)\n\n在我6岁刚上小学学前班的时候，某一天中午在回校过马路时没有看到对面来的一辆大卡车，不幸被卷到车轮下，从此失去左小腿。当时我妈妈很伤心，而我，不知道为什么竟冒了一句“都已经这样了，哭也没有用了”。大家夸我心态好，其实现在想起来才知道，那时候，真的只是年少无知，还不明白这件事对以后的生活会有多大的影响。\n\n当时，我真的没有觉得这件事很严重，我依然可以看书写字学拼音讲故事，虽然不是在学校而是在医院。基本上我从学前班到小学一年级都是在医院度过的（除了当场的截肢，后续还有一系列手术），从镇上的医院到地级市的中心医院都呆过很长时间。那时候在医院里没有觉得很苦闷的感觉，反而觉得有些小开心，因为每天可以不用做作业，功课只需要妈妈稍微讲一下就懂了，有大把的时间可以把玩亲戚们买来解闷的小玩具，还可以每天期待进来打针的是哪位护士，看见是我喜欢的打针不疼的护士就会高兴好一阵，偶尔当她们有空的时候也会到病房里串串话说说笑笑，我也会很高兴地给病房的病友们唱唱歌。现在想想那时候真的还是挺开心的。\n\n回想起来，当时的心态真的是够好的，原因其实也很简单，就是啥都不想，眼前有啥就干啥。\n\n\u003C!-- more -->\n\n后来，从医院出院以后，装了假肢（义肢），生活是可以自理了，上下坡楼梯都没问题，甚至平坦一点的小山也可以爬一小会，但走路终还是不能像正常人那样灵活自如，当然也不如正常人走路好看。\n\n不过从小学到初中到大学到现在工作，生活其实一直过得都不错，小学的时候当各种班干，初中的时候和一群铁哥们天天泡网吧玩游戏，当然功课也没落下，老师们也喜欢，高中的时候和老师同学们的关系也挺不错，到大学时在各种社团瞎混，后来也做过一些领导工作，干得也还不错。最最重要的是，从小学到大学，身边的朋友很多。有时候我也会想，这么多朋友，跟我在一起玩一起走路，会不会多少觉得有一些有碍观瞻？但是我发现朋友们从来不会因为我的身体原因而有任何不高兴的地方，一点点都没有。也从来没有人因为身体的原因而质疑我能不能把一件事情做好。发现这件事让我觉得十分高兴，因为它让我知道我的担心我的自卑完全是多余的，没有人把你当成特殊的人群，他们一样觉得你可以自理，一样跟你开玩笑让你请吃饭，一样把重要的任务交给你，一样跟你出去游玩，一样跟你骑自行车。甚至，当你在某些方面做得比别人要好的时候，他们一样羡慕你景仰你。这一点让我在精神上获得了极大的满足，慢慢地，我也和他们一样，不再把我当成一个残疾人来看了，我慢慢觉得我其实就是一个正常的人，没有什么和别人不一样。在银行，我也和正常人一样排两个小时队办业务，在公交上，我也会给不方便的人让座，在旅游景点，我也和正常人一样买全价门票。\n\n其实回想起来会发现，身边的人没有那么在乎你身体上的一点小缺陷，真正在乎的是你自己。当你把自己这关过掉，把心打开，去跟周围的人们认真的接触认真的交流的时候，你会发现，他们也会同样真诚地来对待你。同样，当你打开心扉，去追求自己的爱好，去实现自己的梦想，去拓展自己的知识能力的时候，你也会发现，这美好的世界给予你的并不比给予任何一个人的要少了什么。\n\n有了这样的心态，再来回到这个现实的世界，会发现，其实仍然会有人多看你几眼。但是回到我自己，我发现当我看见一个脚有问题的人的时候，也会忍不住多看几眼，这实在是太正常，完全不代表任何的恶意。\n\n迄今为止，还没有碰到过任何人对我的身体缺陷有过恶意的评价。不过，即使遇到，我想我也不会有什么太过激的反应，因为，这是一个事实，我已经很坦然地接受它了，没有什么伤口可以再被戳中。\n\n反而，我会在心里冷笑一下，可怜的人，这点修养都没有，怎么做人做事啊。\n\n总结一下，其实外界不存在什么压力，所有的压力都是来自于自己的内心。当你坦然地去接受这一事实，然后认真地去跟人打交道，认真地做事，你会发现，世界仍然是美好的，而且没什么能改变这一事实，包括你身体的缺陷也不能。\n",{"id":83,"type":7,"slug":84,"title":85,"date":86,"category":62,"tags":87,"body_markdown":89,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},115,"why-photoshop-so-complex","为什么Photoshop这么复杂","2012-10-04 09:28",[88],"Photoshop","\n来自知乎问题[为什么像 Photoshop 这种如此复杂难懂的软件可以垄断图像编辑领域 20 年？\n](https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F20510915\u002Fanswer\u002F15335855)\n\n首先，你要对你的问题领域进行限定：是在专业图像处理领域垄断，其实民用级并不一定垄断，类似美图秀秀、QQ影像之类的软件用户并不少。\n\n原因：\n\n1. 因为是专业软件，所以必然涉及到专业概念，例如颜色模式、图层、通道、颜色叠加模式、色阶、曲线、白平衡等等，因为没有这些专业概念，你根本做不了专业的图像处理。\n2. 从专业的角度来解释难用的问题：除了上面说的概念多以外，功能细化，分布广、散也是PS一个重要的特性，而事实上，它也只能这么做。我们先说，为什么你觉得有些软件好用，从交互的角度来说，无非是因为这些软件梳理了用户的核心任务、常用操作，对这些操作进行了优先级排序和路径合并（比如将两步合并为一步），然后将重点的地方突出出来，将不重点的地方弱化，所以你觉得好用。但是这一招在PS里行不通，因为用户的核心任务既不是P图也不是美肤也不是美瞳也不是去红眼也不是web设计，你根本梳理不出来用户打开PS的目的，唯一可以确定是“图像处理”。因此，PS只能将足够细化的功能一一列出来，由用户自己来操作组合。（这也是为什么PS做一个很简单的效果也需要N多步骤的原因。）功能非常强大的东西必然会是细碎的操作。\n3. 解释PS跟iPhone的区别。上面说到功能非常强大的东西必然是细碎的操作，有人会拿iPhone说事。iPhone的强大并不在于它的软件，而是在于它将很多的硬件（多指触控屏、光线感应、GPS、陀螺仪等）带入了手机，并且用软件来配合它们进行工作。事实上分析一下就可以发现，这些东西几乎不涉及到交互流程或者是用户交互，它只是为手机提供了一种能力。iPhone的强大还表现在硬件好、触控流畅、生态系统完善，这些特性都具备我刚分析的特征，即几乎不涉及用户交互。而PS，它从头到尾都是在做一个与用户交互的东西（“P图”），两者的“强大”不是同一个概念。\n\n最后一点题外话，虽然我的PS功底很水，但是还是有一些关于如何学好PS的建议：\n\n1. 学习好专业的图像领域的概念，即上面答案中第一点提到的（可能不全）。\n2. 理解好PS中每一项功能的用意以及对图像产生什么影响。\n3. 实践，走向高手之路。\n\n推荐一个视频教程，李涛的《PhotoShop高手之路》，里面对PS的概念和功能有详细解说。\n",{"id":91,"type":7,"slug":92,"title":93,"date":94,"category":95,"tags":96,"body_markdown":99,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},159,"why-browsers-not-build-more-selectors","为什么浏览器不内建更多选择器","2012-09-06 09:27","web",[97,98],"浏览器","JavaScript","\n来自知乎问题[JavaScript 为什么不内建选择器？](https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F20433809\u002Fanswer\u002F15189900)\n\n首先，与这个问题有关的浏览器中的技术概念其实大致有这些：\n\n1. BOM，即浏览器对象模型，简单说就是浏览器提供的环境，包括各种对象及其方法，比如window\n2. DOM，即文档对象模型，它是由HTML经解析后生成的一个模型，我们对页面可视部分进行操作实际上就是在操作DOM\n3. JavaScript，浏览器提供了BOM，也解析了DOM，那么，开发者如何去操作它们呢？这时候就轮到JavaScript出场了，所以JavaScript（在这个例子中）是用来操作DOM和BOM的\n\n那么所谓的选择器，`getElement(s)ByXXXX`实际上是由DOM提供的，而且对DOM的level实现的程度不一样，这些方法也不一样，比如DOM level 0中主要的方法（确切说是属性）就是`document.images`，`document.links`之类。而DOM level 3中则提供了`querySelector(All)`之类更为方便的API。\n\n\u003C!-- more -->\n\n第二个想说的点是关于为什么没有更精简的API和写法：\n\n1. 在DOM中，所有的方法必须隶属于DOM对象，所以在非别名实现的情况下，以`$`函数来实现是不可能的，即使实现，也会是类似`document.$`之类的方法\n2. 假设使用别名方法实现（即`window.$ = document.$`），那么会有一个很严重的后果——染污全局空间，即jQuery（或者prototype或者其它的任何类库）再也不能使用`$`函数\n3. 即使不纠结是否别名实现的问题，假设可以用`$classname`这样的函数来选择，那么也是有问题的。第一，方法名字不够直观，作为一个浏览器（确切地说，是一份标准），引入一个名称含义不确定的方法是不可以接受的，虽然`getElementById`很长，但是任何人都能一眼看明白它是做什么的，对不对？第二，使用`$`开头似乎不符合JavaScript中的要求，`$`开头的应该是留给机器编译后的代码来避免冲突。（这一点是听说的，我没有自己去看规范。）\n\n第三个想说的是关于jQuery（及风格类似）的选择器。事实上jQuery的选择器的确很方便，但它也引起了很多的争议，包括占用$符号和承载太多重载的jQuery方法（即$），可能跟jQuery的理念有关，“write less, do more”，而一份web标准因为它强大的影响力和不可随意更新（bug就只能bug了，在下一份标准出来前不可能有修复的机会）的特性，显然还要在API设计的方方面面考虑更多的东西。\n",{"id":101,"type":7,"slug":102,"title":103,"date":104,"category":95,"tags":105,"body_markdown":107,"permalink":108,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":109},158,"what_is_shadow_dom","[译]什么是Shadow Dom？","2012-06-07 18:24",[106],"ShadowDOM","\n如果你做过网站，那么很可能你已经用过一些JavaScript类库。既然如此，你可能会对这些不知名的类库作者心存感激。\n\n这些作者——web开发领域的勇士们——都面对着同样的一个问题——封装。他们会花大量的精力在面向对象的经典问题之一上面，即如何封装自己的代码，以便与类库使用者的代码分离。\n\n除了SVG，现在的Web平台只提供了一种原生的方法去隔离代码块，这并不优雅。没错，我说的就是iframe。对大部分需要封装的场景来说，frames太重而且限制太多。\n\n如果我需要把每个自定义的按钮都放到iframe里，你是什么感觉，会不会疯掉？\n\n所以，我们需要一些更好的东西。事实上，大部分的浏览器已经变相地提供了一种强大技术去隐藏一些实现细节。这个技术就是所谓的“shadow DOM”。\n\n\u003C!-- more -->\n\n### 我的名字是DOM，Shadow DOM\n\nShadow DOM是指浏览器的一种能力，它允许在文档（`document`）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。看一个简单的slider：\n\n```html\n\u003Cinput id=\"foo\" type=\"range\"\u002F>\n```\n\n把这段代码放到webkit内核的浏览器中，它会这样显示：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F1.png)\n\n很简单吧，这里有一个滑槽，还有一个滑块可以沿滑槽滑动。\n\n嗯。一切看起来都那么美好，喝杯咖啡先……等下等下，这里居然有一个可以在`input`元素中滑动的元素！为什么我不能通过JavaScript看到它？\n\n```javascript\nvar slider = document.getElementsById(\"foo\");\nconsole.log(slider.firstChild); \u002F\u002F 返回 null\n```\n\n这是一种魔法么？\n\n我的观点来看，不是。这只是shadow DOM在起作用。你看，浏览器的开发者们已经意识到了手工编写这些DOM元素的表现和行为很困难而且很SB。所以，从一定程度上讲，他们骗了我们，给了我们一个输入框，但拥有比输入框更多的功能。\n\n他们为你——web开发者设定了一个边界，界定了哪些是你可以访问的，哪些实现细节是访问不到的。然而，浏览器本身却可以随意跨越这个边界。设置这样一个边界之后，它们就可以在你看不见的地方使用熟悉的web技术、同样的HTML元素去创建更多的功能，而不是像你一样要在页面上用div和span来堆。\n\n有一些很简单，就像上面说的slider。而有一些却相当复杂。我们来看一下`video`元素，它有一些按钮、进度条、hover态的音量控制，像这样：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F2.png)\n\n所有的这一切都只是HTML和CSS——但是是隐藏在shadow DOM子树中的。\n\n借用XXX的一首诗，“它是怎样工作的？”为了直观一些，我们假装可以用JavaScript操作它。看这个简单的页面：\n\n```html\n\u003Chtml>\n\u003Chead>\n\u003Cstyle> p { color: Green; } \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\u003Cp>My Future is so bright\u003C\u002Fp>\n\u003Cdiv id=\"foo\">\u003C\u002Fdiv>\n\u003Cscript>\n    var foo = document.getElementById('foo');\n    \u002F\u002F 注意：这里只是模拟，不是真实的API\n    foo.shadow = document.createElement('p');\n    foo.shadow.textContent = 'I gotta wear shades';\n\u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n我们获得了一个这样的DOM树：\n\n```html\n\u003Cp>My Future is so bright\u003C\u002Fp>\n\u003Cdiv id=\"foo\">\u003C\u002Fdiv>\n```\n\n但是它像是被这样渲染出来的：\n\n```html\n\u003Cp>My Future is so bright\u003C\u002Fp>\n\u003Cdiv id=\"foo\"> \u003C!-- shadow subtree begins -->\n    \u003Cp>I gotta wear shades\u003C\u002Fp>\n\u003C\u002Fdiv> \u003C!-- shadow subtree ends -->\n```\n\n看起来是这样：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F3.png)\n\n注意一下，为什么渲染的句子的第二部分不是绿色的？这是因为文档（document）中选择器p不能获取到shadown DOM。很酷对不对？！如果一个框架开发者被赋予这样的能力会怎么样？想象一下你只需要写你的widget，而不用担心被不知哪里蹦出来的选择器愚弄……简直令人陶醉。\n\n### 事件的情况\n\n为了保持自然，shadow DOM子树中的事件可以在文档（document）中被监听。比如，你点击一下`audio`元素中的静音按钮，你可以在一个包裹它的div中监听到这个事件。\n\n```html\n\u003Cdiv onclick=\"alert('who dat?')\">\n    \u003Caudio controls src=\"test.wav\">\u003C\u002Faudio>\n\u003C\u002Fdiv>\n```\n\n但是，如果你要确认事件的来源，会发现它是audio元素，而不是它内部的按钮。\n\n```html\n\u003Cdiv onclick=\"alert('fired by:' + event.target)\">\n    \u003Caudio controls src=\"test.wav\">\u003C\u002Faudio>\n\u003C\u002Fdiv>\n```\n\n为什么这样？因为当事件穿过shadown DOM边界的时候，会被重新设定`target`，以避免暴露shadow DOM子树内部结构。用这种方式，你可以监听到从shadow DOM中产生的事件，而实现者也可以继续隐藏细节。\n\n### 通过CSS访问（Reaching into）Shadow\n\n另一个需要提到的技巧是怎样通过CSS来访问shadow DOM子树。假设我想自定义我的slider。我想让它有一些样式，而不是系统原生的那样，像这样：\n\n```css\ninput[type=range].custom {\n    -webkit-appearance: none;\n    background-color: Red;\n    width: 200px;\n}\n```\n\n结果如下：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F4.png)\n\n很好，但是我怎样定义滑块的样式呢？我们已经知道，常规的CSS选择器并不能获取到shadow DOM子树。但事实上，这里有一些很方便的伪元素，可以取到shadow DOM子树中的元素。例如，slider中的滑块在webkit中可以这样访问：\n\n```css\ninput[type=range].custom::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    background-color: Green;\n    opacity: 0.5;\n    width: 10px;\n    height: 40px;\n}\n```\n\n样子如下：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F5.png)\n\n很完美对不对？想想看，你可以为shadow DOM子树中的元素赋予样式，而不需要真的访问到这些元素。而这些shadow DOM的作者有了决定哪些部分可以被赋予样式的权利。如果你是作者，在做一些UI widget toolkit的时候，难道不想有这样的能力吗？\n\n### 带有洞（hole）的Shadow DOM，无穷的想象力\n\n讲完了这些令人惊叹的能力，我们想象一样，如果给一个有shadown DOM子树的元素插入子元素会怎样？我们来实验一下：\n\n```javascript\n\u002F\u002F Create an element with a shadow DOM subtree.\nvar input = document.body.appendChild(document.createElement('input'));\n\u002F\u002F Add a child to it.\nvar test = input.appendChild(document.createElement('p'));\n\u002F\u002F .. with some text.\ntest.textContent = 'Team Edward';\n```\n\n结果如下：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F6.png)\n\n哇！欢迎来到twilight DOM的世界！它是文档（document）的一部分，可以被遍历到，但是不会渲染！它是不是很有用呢？不一定，但是如果你需要的话它确实就在那等你。\n\n但是，如果我们真的有能力把元素的子元素放入shadow DOM子树中会怎么样？想象一下shadow DOM是一个模板，通过它的某个洞（hole）可以看到内部的子元素：\n\n```javascript\n\u002F\u002F 注意：这里只是模拟，不是真实的API\nvar element = document.getElementById('element');\n\u002F\u002F 创建shadow DOM子树\nelement.shadow = document.createElement('div');\nelement.shadow.innerHTML = '\u003Ch1>Think of the Children\u003C\u002Fh1>' +\n    '\u003Cdiv class=\"children\">{{children-go-here}}\u003C\u002Fdiv>';\n\u002F\u002F Now add some children.\nvar test = element.appendChild(document.createElement('p'));\ntest.textContent = 'I see the light!';\n```\n\n如果你去遍历DOM，你会看到这个：\n\n```html\n\u003Cdiv id=\"element\">\n    \u003Cp>I see the light\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n但是像是这样渲染出来的：\n\n```html\n\u003Cdiv id=\"element\">\n    \u003Cdiv> \u003C!-- shadow tree begins -->\n        \u003Ch1>Think of the Children\u003C\u002Fh1>\n        \u003Cdiv class=\"children\"> \u003C!-- shadow tree hole begins -->\n            \u003Cp>I see the light\u003C\u002Fp>\n        \u003C\u002Fdiv> \u003C!-- shadow tree hole ends -->\n    \u003C\u002Fdiv> \u003C!-- shadow tree ends -->\n\u003C\u002Fdiv>\n```\n\n当你添加子元素的时候，从DOM树中看像一个正常的子元素，但是渲染的时候，他们从“洞（hole）”中进到了shadow DOM子树。\n\n写到这里，你应该会承认，这真的很酷，也会问：\n\n浏览器中什么时候才会有呢？\n\n### 家庭作业\n\n你认为听完了这么多说教的内容会没有家庭作业？作为一个JavaScript类库或者框架的开发者，尝试者去想象一下你可以利用shadow DOM制作的跟之前不一样的伟大的东西。然后想一下shadow DOM可以应用到的一些特定的使用场景（加上真实的或者模拟的代码）。\n\n最后，共享你想到的使用场景到public-webapps邮件列表。关于在web平台中加入这种能力的讨论正在进行，我们需要你的帮助。\n\n如果你不是一个框架作者，你仍然可以参与进来，你可以给shadown DOM加油，也可以将这份快乐传播到你最喜欢的社交网络上，因为快乐就是我们工作的全部。\n\n附：SVG和shadow DOM\n\n差点忘了，至于你信不信，我反正信了，SVG确实已经用到了shadow DOM，从一开始就是这样。但是比较麻烦的是，SVG的shadow DOM非常……非常……水（shady），不不，不是这个词，是另一个词，以sh开头，以y结尾。（译注：对英文语境不是太熟悉，评论中有人提到是shy。）对对，就是它！我可以继续说，但是请相信我对SVG shadow DOM的评价。或者你可以查看文档。\n\n原文地址：\u003Chttp:\u002F\u002Fglazkov.com\u002F2011\u002F01\u002F14\u002Fwhat-the-heck-is-shadow-dom\u002F>\n\n译者注：应该说这是一篇关于前端理论的文章，并不能给前端开发人员带来什么便利，至少短期内没有，但是了解这种技术对我们从事web相关的软件开发会有好处，而且指不定哪天这种开发模式就出现了呢！\n\n> 2013年5月24日更新：修正了一下之前翻译不通的地方。另外Chrome 23+已经实现了Shadow Dom，Chrome 25+已经默认打开了Shadow Dom的使用选项。因此，现在可以有一些更具体的案例可以看了，比如\u003Chttps:\u002F\u002Fgithub.com\u002FTooooBug\u002FshadowDatePicker>。\n","\u002Farticle\u002Fwhat_is_shadow_dom.html","https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fwhat_is_shadow_dom\u002F1.png",{"id":111,"type":7,"slug":112,"title":113,"date":114,"category":95,"tags":115,"body_markdown":119,"permalink":120,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"cover":19},157,"xheditor_paste_images","xheditor从剪贴板粘贴图片的实现原理","2011-11-30 10:08",[116,117,118],"剪贴板","复制","粘贴","\r\n[xheditor](http:\u002F\u002Fxheditor.com\u002F)是一个优秀的国产富文本编辑器，最近的（其实我也不知道有多久了）版本推出了一个粘贴剪贴板图片的功能，很是喜爱，好奇了好久，最终不住去看了下源码，基本明白了。\r\n\r\n> 2016-07-29 似乎这个编辑器也很久没更新了，现在对上面这段话持保留态度，不做推荐。\r\n\r\n首先，这个功能很新，不支持IE系列浏览器……用的是一些新的API。我手上的代码是1.1.10，所以代码行数以这个版本为准。\r\n\r\n一点前置小知识是必备的，那就是对大部分截图软件来说，截图操作是一个把截取的图片转换成指定格式（windows自带的是bmp）然后放入剪贴板的过程。所以，要粘贴图片，核心就是读取剪贴板。\r\n\r\n\u003C!-- more -->\r\n\r\n## 一、读取剪贴板的时机\r\n\r\n近几年浏览器在拼标准、拼性能的时候，其实也在暗里拼安全，为了防止某个网页一打开就自动把你剪贴板的内容传网上去（IE6可以做到），现代浏览器不允许随时读写剪贴板。\r\n\r\n浏览器为我们提供了`onpaste`事件（粘贴），读取剪贴板数据仅能在该事件发生时在事件处理程序中进行。因这里理解就好，所以就不贴代码。\r\n\r\n## 二、图片数据\r\n\r\n之所以IE不能粘贴图片，就在于IE没有处理二进制文件的机制，它只能处理文本。\r\n\r\n在现代浏览器中，则有关于文件的API，这里用到的就是File Reader，主要用来处理二进制文件数据。\r\n\r\n首先，在xheditor的第1922行，有一个`cleanPaste()`函数，它的作用就是读取剪贴板的数据，然后放入编辑器中，具体见代码注释。\r\n\r\n```javascript\r\nvar clipboardData,items,item;\u002F\u002Ffor chrome\r\n\r\n\u002F\u002Fev是事件，其实大家都喜欢用e或者evt或者event\r\n\u002F\u002F这句主要是确定剪贴板中是否有图片\r\nif(ev&&\r\n\t(clipboardData=ev.originalEvent.clipboardData)&&\r\n\t(items=clipboardData.items)&&\r\n\t(item=items[0])&&item.kind=='file'&&item.type.match(\u002F^image\\\u002F\u002Fi)\r\n){\r\n\tvar blob = item.getAsFile(),\t\u002F\u002Fblob就是剪贴板中的二进制图片数据\r\n\t\treader = new FileReader();\r\n\r\n\t\u002F\u002F定义fileReader读取完数据后的回调\r\n\treader.onload=function(){\r\n\t\tvar sHtml='\u003Cimg src=\"'+event.target.result+'\">';\t\u002F\u002Fresult是base64编码后的图片\r\n\t\t\u002F\u002F这里执行了一个将base64上报到服务器，然后将图片url从base64编码的图片数据换成上传后的图片地址\r\n\t\tsHtml=replaceRemoteImg(sHtml);\r\n\t\t_this.pasteHTML(sHtml);\u002F\u002F这里应该是关于光标和插入代码的具体操作\r\n\t}\r\n\r\n\treader.readAsDataURL(blob);\t\u002F\u002F用fileReader读取二进制图片，完成后会调用上面定义的回调函数\r\n\treturn false;\r\n}\r\n```\r\n\r\n好吧，本来还想写下中间上报到服务器的代码的，想了想觉得也没什么很特别的地方。最多是把base64数据当成普通URL上报，然后服务端再解码成图片。\r\n\r\n嗯。就这样，当笔记了。\r\n","\u002Farticle\u002Fxheditor_paste_images.html",190]