【转】如何从前端工程师到前端架构师

摘要：之前人家写过的弹出层，富文本编辑器，语法高亮插件你一套也不能少，这样你才能接触到之前碰不到的原生与知识点。通过引入双向绑定与分层架构，完全脱离进行前端开发。

原文：http://www.cnblogs.com/rubylouvre/p/3658441.html
作者：司徒正美

历时两年多，我的书终于付梓出版了。应各方面的要求，写软文一篇，隆重介绍一下此书对各位程序员的钱途有什么帮助及阅读顺序等疑问。作为国内第一本讲述前端框架构的书，它里面充斥着许多大家前所未闻的知识，这些知识有50%只见于github的issue，讲述各种隐秘的浏览器兼容性问题及各种神奇的修复方案，或者是某些危险但美丽的黑魔法，另外50%我深夜梦游般在外国某些大牛（不局限于英语，有日语，俄语，韩语等，不同的语言的人，受制了他们的语法结构，他们的思考回路是与我们不同的，给出的答案有时真的是拍案叫绝）的博客或网站瞥见的神奇东东。在我通过编写dom Framework, mass Framework这两大框架（dom Framework是老式的金字塔式的基于类的大框架， mass Framework是拥有AMD加载器的开放式框架，再后来的avalon，是鬼怪式的分层构架的MVVM框架，黑魔法满满的），建立完整的知识树后，开始狂热如征服六国后的秦王，热衷于收集各种奇珍异宝于我的博客——你们看的部分，只是我未公开的十分之一而已，本书将额外开恩公布另外的十分之二。

其实这世界很奇妙的，当你水平上去后，就算你不想继续，这世界也推动着你前进。就像jQuery1.3通过Sizzle大获成功后，成为世界的明星，就算John Resig想撒手，但这么多pull request，它也只能从更好变成更加好！三年前，当我写了三百多篇的博文，出版社已经找上门来了。在那半年内，总共有三四家来找我，让我看到前端的希望。于是我的重心由ruby慢慢转向javascript。待到我加入盛大创新院后，我已经确保我能hold住《javascript框架设计》这个大题目，于是签约写书。不过，在最初我提交给出版社的目录里，我有着更为恢宏的目标，包含拖放组件， 路由系统， 及各式UI组件，但最后由于篇幅的问题，只好说声抱歉了。

野望总是被现实所掣肘，亚历山大想证明世界，可他的HP也是这么短，经不起长途跋涉。实体书与博客是不同的，它必须要形成一个体系，文体也有要求，不能太口语化，什么喜乐哀痛必须收起来，板着脸正正经经地对大家宣讲。错别字也要收殓一下，虽然我找了许多高手审稿了。可惜个个都开写轮眼，自动过滤掉错别字，最终还是让出版社的张涛大大帮忙处理了大部分错别字与病句，太专业的东西他也无能为力，但愿不影响阅读。幸好各位大神贡献了不少冷癖有用的知识点，让本书充实了不少，因此才一改再改，三番四次，导致两年多才交稿。在盛大创建院时，不断有人（同事或群友）问我的书什么时候出来，人家半年就搞出一本了。我今天终于不为这问题烦恼了。

在继续这篇软文时，我脑海真的是闪现许多词汇，什么大教堂与集市，造轮子与DRY，公司利益与个人成长……一个个来吧

大教堂与集市说的是如何构建一个软件工程，是大教堂式的专制主义还是开放式的以众包方式让大家贡献源码。前者，缓和一点地说，是英雄主义，jQuery之于John Resig， Node.JS之于Ryan Dahl，他们单人匹马开创了一个新天地。后者，最杰出的代表是Linux。但在这个互相浸透学习的世界，绝对的东西是不存在的。jQuery与Node.JS现在也是在众多的项献者的努力一下前进，原作者向新目的地进发了。在国内，你懂的，每个人都自命不凡，一开始只能是你一个踽踽独行。只有你真正成为明灯式的人物后，才有人追随。

造轮子与DRY这问题也新浪微博上也吵过许多次了。有个软件设计原则叫DRY，防止组员们随意克隆代码，或在不知情的情况下重复发明相似的功能模块。公司出于利益的考虑，也不愿给时间组员自己去造轮子，上网找一个jQuery插件了事。因此，小中公司的页面非常恐怖，允斥着大量第三方插件，而相对而言，大阿狸能用的基本自己做，这正是游击队与正规军的区别。从国内看，最重视JS的公司也恰恰是大阿狸，他们拥有国内最庞大优秀的前端团队（700多人），小公司还是一个前端对20个后端的节奏。招这么多高手干嘛呢？造轮子！当然，这不是一个轮子所代表的，这涉及一整合的工具链，目的是实现前端自动化集成布署。写框架与UI组件保是其中一个很少环节，这也是一般人能理解的东西，更多高大上的东西，大公司也不会公开出来。但你起码拥有创造UI组件这样的能力，才能让你碰更底层的工具。

公司利益与个人成长，这个更不用说。只有目光短浅的公司，才会用杂牌的组件写码。大公司早已为你准备一整好东西了。而你的任务就是成长到具有写UI组件的地步，进入架构师，为公司的未来挑战做好更多准备（工具）。HTML5对于一般人而言，好像是非常遥远的事，但大公司早已有一帮人用它做出许多好东西，为公司产品的用户体验添砖加瓦。为了积聚这实力，你必须自己暗暗发力，偷偷自己写一套东西。之前人家写过的弹出层，富文本编辑器，语法高亮插件……你一套也不能少，这样你才能接触到之前碰不到的原生API与知识点。如弹出层有关垂直居中的CSS知识点，select穿透问题，富文本编辑器用到的iframe知识点，Range与Selection对象的知识点，语法高亮则是你正则的大检验！如果写业务代码，你写十年，水平还是那样。因此有句话说——“用一年的经验混十年”

最近在微博看到一件可怕的事：

  
【我所了解的一个精神失常的程序员】http://t.cn/8sinEOr 不久前我们公司有个程序员精神失常。他走进经理办公室开始大喊大叫，说着一些奇怪的事情。如果我不是像了解自己一下了解他，就会以为他磕了药。但是事实上他简直就是精神失常了！

  
他是我在编程行业见过的最勤奋员工。他经常在下班后加班，周末的时候，当管理人员需要人手去处理紧急工作时，他总是随叫随到。在这个阶段公司并不赚 钱，老板需要尽可能快的完成项目，所以任何被客户急催的软件开发都会自动分配给他。他很乐意地全心投入把工作做完正是老板喜欢的地方。

"我能力强，我效率高，我应该是公司的关键人物"，其实那是错的，不可替代性才是最重要的。如果靠“卖力”增加不可替代性，作用是微乎其微的，还是得靠“高门槛”。我认识的工程师里，越是技术好的工程师越会意识到这个问题，然后去做一些"深度"的发展，这也算是工程师的自我保护吧。说什么做IT没前途，30岁要转行，这只是无能者的藉口。

古人说——“人无远虑，必有近忧”。你平时有这么多空闲时间，为何不努力提升一下自己的水平呢。不去认真阅读一下大师们的框架，不自己写一个框架。记得当初我在博客宣传我的框架，被某个嫉妒的人骂个狗血喷头，两年过去，他消声匿迹，而我，从一个公司的核心前端变为另一个公司的核心前端，现在是去哪儿网的前端架构师。因此要相信自己！不要怕这怕那，有努力就有回报！

再回来说我的书，前端的知识点是非常庞杂的。但知识只有串起来，形成知识树才是你自己的。现在市面上的书，基本上抄来抄去，还是依照老旧的方法教人，一开始总是历史回顾，然后是各种数据类型介绍，然后是语法（条件分支，循环分支）什么的，最后再来几个“真实案例”。这对于90%半路出家的前端来说，未免太闷了。而且前端不单单是javascript， javascript只是水泥， 或者说储如化学分子这东西，而我们工作是为了构建一整座大厦！只有肉眼看到的物理级别的东西才是主角。它们就是本书的重点， DOM与BOM。 javascript通过特性侦测或传参等，进入不同的分支，来解决前端臭名昭著的兼容性问题。本书介绍了大量这样的黑魔法，如何知道当前浏览器是支持这个事件呢？ 为何在这里要劫持this呢？ 怎么样让选择器引擎跑得更快。于是这一个个疑问，便化解成本书所介绍的知识点，什么AMD加载器， 选择器引擎，批量生成一堆元素节点……

所有前端框架面对的问题都是一样，不同的是解决手段的高下程度。于是Prototype死了，jQuery火了。 angular爆发了， jQuery沉寂了！本书的章节就是按照编写一个多文件框架的顺序来写。最开始肯定是种子模块，定义框架的名字与版本号，与一些最核心的方法，还有加载器。然后通过加载器，添加一些常用的工具模块，对javascript语言进行扩张与修复。之后是数据缓存什么的，再之后是主菜，各种DOM问题， 节点啊， 样式啊， 事件啊， 动画啊……最后是MVVM，当前最强大的前端解决方案。通过引入双向绑定与分层架构，完全脱离DOM进行前端开发。

你或者有过激情，你或者有过梦想，但当你的KIP考核点是PM那些荒唐的改来改去的功能点，多炽热的火焰也会被浇灭。因此你必须要搞出一点东西出来，努力爬上去。是废命于加班，天天写业务，还是专注于底层框架的研发，为某个难题而苦恼，完全在于你一念之差。“是金子总会发光的”，或“是石头到哪都不会发光的”，也完全在于你一念之差。本书将为你提供了一个可能性及一大堆技能点，打开了一个美丽的新世界，提供了一个X年不遇的机会，准备了一个迅速上升的渠道。

可能有些人会嫌它贵，也有些人怕自己看不明白这么“高大上”的东西。我说一个故事吧。

一个特别喜爱昆虫的人做了这样一个实验：他将跳蚤放进敞口的瓶子里，它立刻便跳了出来。当把瓶子盖上时，跳蚤还是会竭力跳出瓶子，它不停地撞击着瓶盖的内侧。一个多小时后，他还在那样跳着。差不多三个小时后，它依然在跳，只是它不再撞着瓶盖了，此时它跳的高度离瓶盖大约1厘米左右，而且每一次都是如此。这时，瓶盖被拿掉了，但是跳蚤并没有跳出瓶口，它依然保持着有瓶盖时的高度，再也跳不出瓶口。

同理，如果你，总嫌这个贵那个贵，你又不努力改变现状，过了一段时间，你就会习惯了，就会安于贫困了。就像瓶子的跳蚤那样安于天命，永远困死在瓶子里。

怕自己理解不了这东西，这虽然是一个理智的考量，但只要是人就会遇到瓶颈，但问题是如何突破瓶颈。瓶盖又不是总是盖上的，有机遇你得抓住！

我也曾毕业找不到工作，潦倒到当了一年保安。但我相信“是金子总会发光的”，我终会一鸣惊人，我现在只是一只受伤的野狼，我不会被命运所屈服驯化。因此跟我咆哮吧——

无名的生命之花 已惨遭摧残践踏
一度坠地的飞鸟 正焦急以待风起
一味埋头祈祷 却不会有任何改变
若想有所改变 就请起而奋战吧
踏过尸体前行的我们
嘲笑这进击意志的猪猡啊
家畜般的安宁 那虚伪的繁荣
请赐予誓死之饿狼以自由！
……
——进击的巨人OP《红莲の弓矢》

框架的世界就是像电路板一样复杂而精密，得道者能庖丁解牛，游刃有余，外行者则如坠迷梦，困死在盗梦空间。

原文：http://www.cnblogs.com/rubylouvre/p/3658441.html