前端的自我成长，这是一个关于成长的话题。以及Q&A实录

今天给大家分享的主题是前端的自我成长，这是一个关于成长的话题。

很多人都有这样的感觉：听了很多技术圈子的分享，有的有深度，有的循循善诱，深入浅出，但是呢，几年下来，到底哪些用上了，哪些对自己真的有帮助了?反而有些模糊。

2016年我在不同的场合分享了很多内容：有移动端的性能、有适配、有Web vs Native，也有hybrid，但是其实我一直比较担心，真正有深度的内容，其实面向的是比较小众的群体，比如说Hybrid，其实它在大部分公司里面，是只能用现成的。

所以我这一次尝试分享一个我认为可以帮助到所有前端的话题，关于前端的成长，如果说这个分享的内容，听众里面有那么几十个人拿到BAT的offer，或者升职加薪，那么我觉得我就认为我取得了成功。

前端其实是个特别苦逼的职业，因为前端技术一直革命的特别快，新技术、新技巧在不断地被发明出来。之前我有一个朋友，他讲说他对自己的认知是了解前端、熟悉前端、精通前端、熟悉前端、不懂前端。为什么呢，他说当他觉得自己对前端所有的东西觉得无所不知，无所不能的时候，忽然看到了一段代码，他完全无法理解，于是整个世界就崩塌了，从此再也不敢说自己会前端。

我就跟他说，这里，缺少的是一种正确的方法，你觉得无所不知、无所不能的标准是什么，是工作中很久没遇到解决不了的问题么？他说还真是这样。我就又问他，那你系统学过前端么？他想了想，还真没学过，大学里不开这个课。的确如此，到目前为止，还没有任何一个大学会教前端，倒是有些培训班，会讲网页开发三剑客。

我这里讲的内容，希望带给大家的，就是该如何学习前端，实现自身成长。

关于成长，首先我得发一个免责声明，不是我对我讲的内容没有信心，而是成长是自己的事，英文有句话，在外企工作的人会经常听到，叫做：

You are the owner of your career.

你是你职业发展的责任人。这句话潜台词是，你（不是你老板，也不是你爸妈，也不是你女朋友）是你职业发展的责任人。

这句话我在我职业生涯的起点听说，一直指导我的职业发展，甚至在我带团队，培养团队的时候，也是中心的指导思想，之前我带的团队的同学，他们有不少人也在带团队，其实他们也在实践这句话，所以我这里，也把这句话、把这个道理分享给给大家。

我们讲前端成长，我认为，主要在两个方面，一部分是”能力”，一部分是”知识”。我个人的观点，能力占百分之八十，知识占百分之二十。

从这个图上，大家可以看到，其实我们认为变化快的东西，最新出来的Angular、React、ES2015，其实都在知识里面，知识又分成两部分，一部分我把它叫做标准，它是相对而言比较稳定的，很少会出现一个标准被推翻的事情。另一部分则是技术，像是jQ、React这些框架啦，像是MVC、FLUX这些架构的东西，这些东西是由各个公司主导的，变化就非常快，你看Grunt发展了没多久，Gulp就来挑战他了，然后又有browserify、webpack这些东西。

而我认为占重点的能力，则是非常稳定的，我认为能力是三大块：编程能力、架构能力、工程能力。

编程能力，就是用代码解决问题的能力，你编程能力越强，就能解决越复杂的问题，细分又有调试、算法、数据结构、OS原理等这些的支撑，你才能解决各种麻烦的问题。

架构能力，则是解决代码规模的问题，当一个系统足够复杂，你会写每一块，能解决每一个问题，你能搞定整个系统，这就需要架构能力，架构能力包含了一些意识，比如解耦、接口隔离，也包含认识业务建立抽象模型，也有一些常见的模式，比如经典的MVC，还有设计层面，面向对象、设计模式等等。

最后工程能力，则是解决协作的问题，当系统规模更大，光靠一个人，是没办法完成的，如何保证几个高手互相能够配合好？如何保证项目里面水平最差的人不拖后腿？这个工程化建设，往往会跨越多个业务，以汇报关系上的团队为单位来做。包括前后端解耦，模块化，质量保证，代码风格，等等。

其实不难看出来，这三项，其实是有顺序的，低等级、小团队，编程能力一项就能应付，越资深的前端，越大的公司和团队，越是需要后面的技能，但是这里我要强调一点，其实资深前端，大团队，对能力的需求，是既要还要——不是说资深的前端，编程能力就可以变差。

社区总会有一些声音，对工程能力，对架构能力持有一种抵触的态度，觉得比较虚，觉得不需要。实际上以某些人所在的岗位来说，也没错，毕竟公司、团队的状态确实可能用不到，但是以个人成长的角度来看，就是大错特错。

下面我们来具体讲讲，关于知识的学习。

对知识，我一直有个观点，叫做宁缺毋滥，这个图片上写了一句好前端才分对错，是的，其实很多人，他学习东西的时候就喜欢挑，挑简单的学，书选择最”深入浅出”的，在这种心态下，没有任何一丝学好的可能性，

所以我对知识学习的目标，理解为亮点，一曰准确，二曰全面。当年学习一部分知识，如果你能做到这两点，那你将来在业务上做技术决策的时候，你面对面试官技术问题的时候，信心跟你只看过皮毛是完全不一样的。

怎么做到这两点呢？我想路子肯定有很多，而我的答案，我这里要分享的，是“建立自己的知识体系”。

如何建立自己的知识体系呢？我个人总结的经验，是下面几个步骤：

第一步，寻找线索。

你要了解一个知识，比如我想学Web平台的API了，当然可以先找一本书，看看别人都写了什么，但是我不喜欢这么干。

我大学里，学前端的东西，为了找个id和name的区别，曾经要借十几本书来，对比着看，那个时候，是真的没人告诉我，什么书比较好。所以我对别人总结好的知识，第一反应是质疑，不信。

所以我比较推荐，找一些比较准确的，你可以确定它真的足够全面的资料当作线索。对Web平台的API，我就用反射：

浏览器里给出来的这个属性列表是不会骗人的，用这个东西作为线索，我就很有信心。

同样可能比较适合做的资料，还有一些标准文档的附录，和源代码里的结构定义。

第二步，是建立联系。

比如说，看下面几个DOM属性：

这里，左边一列是操作Node的，右边一列是操作Element的，它就存在一定的对应关系。

一般来说，我们找对应关系的方式有以下几个依据：

美感

完备性

操作同一组数据

特别提一下，操作同一组数据，正是面向对象的核心概念，对前端而言，有点不一样的是，所有的API，根都是window，所以，其实大部分的API，可以依据面向对象的数据和操作的观点进行划分。

第三步，是分类。

这里我给出一个实际一些的例子，下图是我对zepto(移动简化版jQuery)，的API分类

建立联系以后，我们依据知识之间的联系，进行分类，就可以得到一张图谱，在这个图里面，你就可以非常清楚地知道，哪些知识，是非常重要的，哪些，其实是可以互相替代的。

而一旦有你之前没见过的东西，你又能通过把它放到图谱里，来快速理解它，或者找出一些很好的替代方案。

比如说面试的时候，如果面试官问你bind和unbind怎么用，你还不会，这时候，如果你心里有这张图，你就不至于一脸懵了，你可以说，虽然我不知道bind和unbind，但是我知道live和die啊，我又知道on和off啊。

这张图里我们就可以看出，collection里面的东西，多半没什么用，而节点操作里，肯定就都很有用。

第四步，是追本溯源。

当我对一个知识体系的全貌，有了概念以后，需要确认它的准确性，很多知识，在社区，会有很多的争议，该相信谁呢，这是个问题。而我的答案，就是追本溯源，去找它最初的讨论和定义。

有一个真实的案例，就是闭包这个概念，曾经我们很多人的理解都是错的，把闭包和scope的概念给混淆起来，认为闭包是函数的执行环境上下文，但是有一个叫做hax的（很多人应该都认识他，哈哈），他就对此提出了质疑，认为闭包就是函数。于是我就去查证闭包的概念。

大家都知道，wiki其实是不准确的，但是其中有一段，基本不会太有问题，就是历史。下图是closure这个词条的历史部分：

从这段历史里，我找到了一个名字， Peter J Landin，他是提出者，那么，我就去看看他到底是怎么说的，于是我去google学术搜索，找他的文章

果然找到了，于是我们看看原始的文件

这个定义，对应到我们今天JS里的闭包，是稍微有点区别的，但是它毫无疑问，是包含了两个部分环境部分和控制（代码）部分，所以其实，闭包就是对应着JS的函数，而之前，普遍的观点是认为闭包只包含环境。

所以这个追溯的过程，能够帮我们真正搞清楚对错。

除了wiki-google学术搜索的组合，还有一些邮件列表和github提交历史，也是非常适合去查证一些概念和技术的历史的。

最后说，我讲的这个建立知识体系的过程，是不断接受新知识，挑战、质疑原有的体系，推翻再重建，每一次循环，你的知识体系都变得更加坚固，更加强大。

下面分享的一部分，是关于能力培养。

能力培养其实重要性很高，但是其实说起来，内容却很少。只有两点：教材、训练。

对知识学习，我是主张建立自己的体系，不要去相信书，但是对能力培养，我的观点就刚好相反，我觉得能力的体系，恰恰是难以自己建立的，需要教材去指导。这是由两者的复杂程度和变化速度决定的。

想培养能力，就要找经典的教材来学习，像算法导论，The C++ Programming Language这些经典，几十年都没有过时。

注意这里我用了教材，而不是书。

教材和书最大的区别，就是有没有习题。

在我看来，内容再难的书可以一星期读两本，但是教材一定不行，教材一定得花几个月的时间，一边读一边做习题。

于是谈到训练。

其实有个事实是，工作以后，只有极少数人仍然能够做到训练，比如我自己的编程能力，我自觉工作7、8年，几乎没有过进步。

训练应该是系统的（需要教材）、主动的，这两个特点不可或缺，有人会觉得，我真的工作很辛苦，每天都要加班，但是其实，任何被动的痛苦，都没法给人带来进步，你的痛苦倒是可能给老板带来更多收入。

如果面临困境，可以选择系统训练来提升自己，但是对大部分人来说，可能更乐于选择一个一个变通的办法: 养成习惯，让工作变得更有挑战。

这个事情其实有不少理论，比较有名的是Noel Tichy提出的心理舒适区、学习区和恐慌区。选择一份对自己来说具有挑战性的工作，正面解决问题。

技术圈里流行一个笑话，说的是一个人，工作了三年，却只有一年的经验，因为后面两年都在重复第一年的工作。

所以我们要做的事，就是永远不重复劳动，当你觉得现在的工作，越来越舒适，越来越缺少风险的时候，就应该引起警惕了。

而虽然训练是个很困难的事情，其实大家也不必过于担忧，虽然到处都是“一万小时训练”的言论，现在各大公司的招聘门槛，在我看来应该都卡在几百小时训练的程度。所以我想说，一万小时太久，只争朝夕。希望看到大家成为更好的前端，做更好的自己。

以上是我分享的所有内容。

————Q&A————

问：Winter老师 您提到建立知识体系 我想很多人在最开始的时候 遇到第一个困难就是怎么去建立一个知识体系不知道树上应该有什么。您能给点建议么，从哪里入手比较好？
winter：要先找到线索，第一步线索，就是帮你找到知识体系的依据。

问：前端技术做到资深工程师了，再往上走该怎么发展，该掌握什么专业技能？
winter：一般公司的资深工程师，我认为是编程能力比较好，架构能力有一点，工程能力可能刚刚起步或者没有，是这个标准。再往后，应该是重点发展后面两项能力。

问：是不是我们在遇到一个问题的时候以点带面の学习，知识技术点的关键？
winter：对，但是关键是两点，一是点要足够全（即我所说的线索），二是学的要准，即我介绍的追本溯源过程。

问：现在前端技术层出不穷，你是如何判断这是值得学习或关注的？
winter：很简单啊，我通过我的知识体系去判断，我对前端整个，也是有个体系的，没放出来，是因为我不希望影响大家自己学习和建立体系的过程，产生误导。

问：winter老师对前端来说算法这块能力的培养从什么地方着手呢？
winter：任何算法教材的习题，做一遍，你绝对成为社区大牛，算法专家，一定比我强多了，至少算法导论的习题，我是没做下来的。

问：对原生和框架的学习分别是怎么看的？
winter：原生和框架都要学习，原生是必选项，但是至少以目前的原生的水平，任何大一点的团队都需要框架，要么自己造，要么用别人的，这事同样取决于你的知识体系。

问：寒老师，在团队带人方面有什么经验可以分享的？
winter：带人这话题稍微有点大，而且其实在这一点上我算不上专家，我个人的风格，是比较偏向于人本身的成长的，所以之前我在无线，带的人都发展的不错，但是从整个团队拿到的结果来看，就不算好了。

问: 对于培养前端架构能力这块需要从哪些方面学习提升?
winter：还是前面分享中说的，去找经典的教材，面向对象就看《面向对象分析与设计》，还有TC++PL的最后一章。

问：winter老师，您一般如何快速掌握一个新的前端技术？比如react及相关的redux和reactnative，还有webpack等相关工具，感觉知识量好大，如何才能以最快速度掌握呢？
winter：我觉得并不大，其实这些东西都是Native十年前玩剩下的，比如MVVM吧，大概是07年微软架构师搞出来的，你会突然觉得信息量大，一定是之前你的知识体系出现了较大的空白，刚才分享中没说这个问题，有时候，你给自己贴个标签，比如我只是个前端，但是知识并不是孤岛，别的领域一定会渗透过来的，所以抓住这个机会，好好看看UI架构这十年的变化，你就能预言未来啦。

问：昨天看到新闻，说以后web开发将不再重度依赖js，任何语言都可以用来开发web，而且性能比js高，这个你怎么看待？js会在几年之后没落么？
winter：这个我是赞同的，但是我觉得可能比你想象的要慢一些，另外JS肯定不会没落，纯从编程语言角度看，JS其实挺粗糙，但是目前来看，JS的发展，TC39委员会的工作形态要远远比别的语言先进，所以它会长期统治web，将来也可能下沉，也可能JS会变得跟今天完全不同如另一门语言，当然未来很难预测，这种事看看就好啦。

问：像我这种以前从Android转前端的。刚开始是直接从ja入手。然后写公司跨平台框架。然后以js为基础，拓展，如node什么的，然后研究前端。学习css等。但是到现在就会出现一个瓶颈，就是知识较为广泛，而不精。像会后台，会手机移动，写过unity游戏，会前端，能自己写框架，但是有着致命的弱点，算法不足，没有系统深入研究过算法，感觉没有自己的核心优势。不知道应该从那一方面突破！（目前自己是先准备突破css这个点，然后积累算法，不知这样可好？希望您能给点建议）
winter：其实吧，我觉得哪边都跑不了，所以也不用太纠结，人的精力和时间有限，做你觉得最应该做的事，尽力就好，不要给自己找借口，说网上那个谁谁说了XX根本不用学啊。

问：对现在的大前端，全栈工程师你怎么看？
winter：这是必然结果，分工的目的是让你专精前端，不是让你不会后端，不能画地为牢。

问：业界前端技术这么多繁杂快速变化，大概需要到什么阶段后才容易简化并稳定下来？这个阶段需要具备什么特征？
winter：我觉得现在的前端应该跟几年前的native比较类似，所以看native的发展就可以预测前端的未来啦，之前的html5相当于移动这一波，是底层API的发展，API差不多了，估计就是开发体验的竞争了，等到开发体验出现了霸主，就可以稳定一段了，但是看现在的行业发展速度，估计新的一波又要开始了……

问：以前一直在做浏览器端的工作，最近借nodejs接触了一些服务端的内容，感觉做起来遇到很多困难，需要如何系统的提高一下呢？
winter：这个问题有点难，因为我自己并没有服务端的经验呢，似乎服务端技术并没什么系统的资料，都掌握在各大公司手里，所以我觉得进大公司，学习他们的服务端技术也许比较靠谱。即使是作为前端，我个人在阿里还是觉得服务端方面很有收获。

问：如果现在的工作就是切图，而且加班，没时间学习的话，是不是应该考虑换一份工作？
winter：老实说，我没见过真的忙到没时间学习的人，一般总还有些娱乐和摸鱼的时间，即使我们996期间，也还是有很多自我提高的机会的。假设说真的到这个程度，那我的答案肯定是赶紧走，不说成长，身体也受不了啊。当然，辛苦程度和薪资一般成正比，肯定要牺牲些收入的，但是我个人是不可能选择超出自己能力如此多的岗位的。

问：前端现在范围越来越宽，是否还需要做到全知全能？还是注重在某一方面形向发展？
winter：不可能全能啊，你看80年代那帮搞C的也不行啊…… 你要做的还是专精几种技术和组合出商业价值。

问：问老师，对于一新手前端应该怎么样面对大千前端世界，很容易在多选择化变得迷茫！是专注一点还是全面发展？
winter：这个差不多吧，有情怀的就专精，想赚钱获得社会认可就组合几种技能，不可能真的全面的……

问：winter老师，感觉前端的天花板不太高，在普通的公司前端的地位很难赶上后端，面对这种情况，是学点java或者node方面的知识接触后端，还是加深前端的知识，跳去大公司？
winter：薪资是由人决定的，所以说，其实你转去做别的，是按照你的工资反算级别，不是按照级别重新算工资……这是行业规则。

问：老师推荐看框架源码吗？看源码有什么好的方法呢 平常看容易头晕？
winter：我不看框架源码，因为我觉得他们写的不好。

问：对于不懂后端的同学来说应该先熟悉java php node三选一该怎么选？
winter：你们公司用什么，就选什么，否则你会哭的，相信我。

问：@winter 老师，如何在没有导师或者公司规模达不到的情况下，提高自己的工程能力和架构能力，这两种能力怎么自学提高？
winter：如我分享的，还是得找教材呀，不系统学习，师傅也好，公司也好，都是浮云。

问：再赶快问一个问题，现在前端架构从mvc、mvp已经前进mvvm，未来还会如何演进？mvvm架构的短板是什么？
winter：这个问题我回答不了，这几个架构的创造者无一不是划时代的大师，我觉得我只能跟着学习呀，下一个大师估计不会是我。 mvvm目前是我见过的最完美的架构，我只能从使用的角度来看，它最大的问题在于，让整个团队理解并且实施，还是挺困难的。

问：像你刚才说的追溯技术源头的过程，一般都有哪些渠道呢？
winter：看我分享噢，里面有讲到，先去wiki找历史，再去google搜原始的论文。还有邮件列表啦，代码提交记录啦，都是不错的资料。

问：如何看待现阶段浮躁的前端环境？
winter：每个时代大家都觉得浮躁，因为其实有不少伟大而低调的技术方案的创造者在踏踏实实干活不肯出来说话呢。

问：winter老师，在前端开发现在极度依赖框架的情况下，是否还需要从JS最基础方法和浏览器相关接口开始学习？就jQuery的使用而言，可以说很多JS原生的东西都是被颠覆了，学习了原生用法可能反而不利于学习jQuery等框架。
winter：这个嘛，我觉得是一派胡言，jr他自己敢说颠覆原生么？而且等你真的做到比较资深，你会发现，所谓API风格这种东西，根本就没什么工作量和实际意义，原生的确是繁琐，也不能说好到哪里去，但在我看来，还是比jq强一点的。至于说学了原生以后不利于学习jq，那说明没真学明白。

问：只是一种感觉吧 大量的人涌入前端 正正做事的人还是在少数 在这种时候 如何选择？
winter：选择真正做事呗……

问：前几天看到H5OS已经开始部署市场，还有有中国势力的出现，未来对于这种H5部署的手机系统有什么看法？真的能成为android的竞争对手吗？google的sky的语言发展会不会对前端技术有一定影响呢？
winter：这事别想了，Android上又不是没有H5，操作系统竞争靠的是私有技术，没听说过功能比别人少能拿来当卖点的。

问：对于移动端开发，特别是很多国产浏览器，如何能够比较有效率的进行兼容性测试，采用什么使用api的策略，能规避一些坑？
winter：这个嘛，比较复杂，我们的做法是测试要定开发调试机型（大概三五种）和发布机型（30多种）两档，再根据caniuse数据反算一个icanuse列表，再由架构团队来决定，哪些要，能pollyfill。

问：Winter老师，对于很多企业前端框架来说，旧有的框架很快会成为未来重构的负担，如何持续保持企业前端框架的先进性，适应未来的发展？为什么天猫采用react？而不是在原有框架改进？企业中这种大规模的替换成本很高。
winter：其实保持框架先进性是个伪命题，企业没这个需要，只有权衡利弊来选择框架。天猫的情况我倒了解一些，这个基本上是必须要还的技术债，之前基于Kissy的mui太过于沉重，修改的代价大于推倒重来呗。

问：移动端M页开发，有前端架构科学合理，工程化特别高的网站推荐吗？
winter：嗯，手机淘宝应该算比较好的吧，但是还是有很多旧页面和别的bu的页面，这个就没办法了。

问：@winter 我最想前端技术回到win32时代拖控件可视化开发模式，但是就连微软也是把asp.net、asp MVC扔了又扔，啥时候重回唐朝啊？是不是一直没戏了？
winter：这个嘛，我觉得不是没有拖控件，而是现在的UI，它基本是自动排版，而不是固定位置，所以我觉得是IDE懒得搞啦，而且恰好赶上新技术大量出来，竞争的焦点不再开发体验而在于功能，毕竟后者才是真金白银呢。

问：手机淘宝注意到首页是全部由touch来做的滚动，这在一些安卓原生浏览器对translate属性支持不是特别好的时候特别卡顿，淘宝是已经放弃这些浏览器的引入订单了么？
winter：这个决策是根据机型占比来做优化的，大部分机型应该体验会好过原生，如果不行的会降级回原生，不过有些低量手机就管不到了。

问：对ES新出的一堆语法怎么看？是进步还是引起混乱？
winter：当然是进步，但用不好肯定也会引起混乱啊，所以对团队leader和架构师考验更大了。

本人长期维护的前端公众号欢迎大家关注

前端那些事