今天給大家分享的主題是前端的自我成長，這是一個(gè)關(guān)于成長的話題。
很多人都有這樣的感覺：聽了很多技術(shù)圈子的分享，有的有深度，有的循循善誘，深入淺出，但是呢，幾年下來，到底哪些用上了，哪些對自己真的有幫助了?反而有些模糊。
2015 年我在不同的場合分享了很多內(nèi)容：有移動(dòng)端的性能、有適配、有 Web vs Native，也有 hybrid，但是其實(shí)我一直比較擔(dān)心，真正有深度的內(nèi)容，其實(shí)面向的是比較小眾的群體，比如說 Hybrid，其實(shí)它在大部分公司里面，是只能用現(xiàn)成的。
所以我這一次嘗試分享一個(gè)我認(rèn)為可以幫助到所有前端的話題，關(guān)于前端的成長，如果說這個(gè)分享的內(nèi)容，聽眾里面有那么幾十個(gè)人拿到 BAT 的 offer，或者升職加薪，那么我覺得我就認(rèn)為我取得了成功。
前端其實(shí)是個(gè)特別苦逼的職業(yè)，因?yàn)榍岸思夹g(shù)一直革命的特別快，新技術(shù)、新技巧在不斷地被發(fā)明出來。之前我有一個(gè)朋友，他講說他對自己的認(rèn)知是了解前端、熟悉前端、精通前端、熟悉前端、不懂前端。為什么呢，他說當(dāng)他覺得自己對前端所有的東西覺得無所不知，無所不能的時(shí)候，忽然看到了一段代碼，他完全無法理解，于是整個(gè)世界就崩塌了，從此再也不敢說自己會(huì)前端。
我就跟他說，這里，缺少的是一種正確的方法，你覺得無所不知、無所不能的標(biāo)準(zhǔn)是什么，是工作中很久沒遇到解決不了的問題么？他說還真是這樣。我就又問他，那你系統(tǒng)學(xué)過前端么？他想了想，還真沒學(xué)過，大學(xué)里不開這個(gè)課。的確如此，到目前為止，還沒有任何一個(gè)大學(xué)會(huì)教前端，倒是有些培訓(xùn)班，會(huì)講網(wǎng)頁開發(fā)三劍客。
我這里講的內(nèi)容，希望帶給大家的，就是該如何學(xué)習(xí)前端，實(shí)現(xiàn)自身成長。
關(guān)于成長，首先我得發(fā)一個(gè)免責(zé)聲明，不是我對我講的內(nèi)容沒有信心，而是成長是自己的事，英文有句話，在外企工作的人會(huì)經(jīng)常聽到，叫做：
You are the owner of your career.
你是你職業(yè)發(fā)展的責(zé)任人。這句話潛臺詞是，你（不是你老板，也不是你爸媽，也不是你女朋友）是你職業(yè)發(fā)展的責(zé)任人。
這句話我在我職業(yè)生涯的起點(diǎn)聽說，一直指導(dǎo)我的職業(yè)發(fā)展，甚至在我?guī)F(tuán)隊(duì)，培養(yǎng)團(tuán)隊(duì)的時(shí)候，也是中心的指導(dǎo)思想，之前我?guī)У膱F(tuán)隊(duì)的同學(xué)，他們有不少人也在帶團(tuán)隊(duì)，其實(shí)他們也在實(shí)踐這句話，所以我這里，也把這句話、把這個(gè)道理分享給給大家。
我們講前端成長，我認(rèn)為，主要在兩個(gè)方面，一部分是“能力”，一部分是“知識”。我個(gè)人的觀點(diǎn)，能力占百分之八十，知識占百分之二十。
從這個(gè)圖上，大家可以看到，其實(shí)我們認(rèn)為變化快的東西，最新出來的 Angular、React、ES2015，其實(shí)都在知識里面，知識又分成兩部分，一部分我把它叫做標(biāo)準(zhǔn)，它是相對而言比較穩(wěn)定的，很少會(huì)出現(xiàn)一個(gè)標(biāo)準(zhǔn)被推翻的事情。另一部分則是技術(shù)，像是 jQuery、React 這些框架啦，像是 MVC、FLUX 這些架構(gòu)的東西，這些東西是由各個(gè)公司主導(dǎo)的，變化就非?？?，你看 Grunt 發(fā)展了沒多久，Gulp 就來挑戰(zhàn)他了，然后又有 browserify、webpack 這些東西。
而我認(rèn)為占重點(diǎn)的能力，則是非常穩(wěn)定的，我認(rèn)為能力是三大塊：編程能力、架構(gòu)能力、工程能力。
* 編程能力*，就是用代碼解決問題的能力，你編程能力越強(qiáng)，就能解決越復(fù)雜的問題，細(xì)分又有調(diào)試、算法、數(shù)據(jù)結(jié)構(gòu)、OS 原理等這些的支撐，你才能解決各種麻煩的問題。
架構(gòu)能力，則是解決代碼規(guī)模的問題，當(dāng)一個(gè)系統(tǒng)足夠復(fù)雜，你會(huì)寫每一塊，能解決每一個(gè)問題，不等于你能搞定整個(gè)系統(tǒng)，這就需要架構(gòu)能力，架構(gòu)能力包含了一些意識，比如解耦、接口隔離，也包含認(rèn)識業(yè)務(wù)建立抽象模型，也有一些常見的模式，比如經(jīng)典的 MVC，還有設(shè)計(jì)層面，面向?qū)ο?、設(shè)計(jì)模式等等。
最后工程能力，則是解決協(xié)作的問題，當(dāng)系統(tǒng)規(guī)模更大，光靠一個(gè)人，是沒辦法完成的，如何保證幾個(gè)高手互相能夠配合好？如何保證項(xiàng)目里面水平最差的人不拖后腿？這個(gè)工程化建設(shè)，往往會(huì)跨越多個(gè)業(yè)務(wù)，以匯報(bào)關(guān)系上的團(tuán)隊(duì)為單位來做。包括前后端解耦，模塊化，質(zhì)量保證，代碼風(fēng)格，等等。
其實(shí)不難看出來，這三項(xiàng)，其實(shí)是有順序的，低等級、小團(tuán)隊(duì)，編程能力一項(xiàng)就能應(yīng)付，越資深的前端，越大的公司和團(tuán)隊(duì)，越是需要后面的技能，但是這里我要強(qiáng)調(diào)一點(diǎn)，其實(shí)資深前端，大團(tuán)隊(duì)，對能力的需求，是既要還要——不是說資深的前端，編程能力就可以變差。
社區(qū)總會(huì)有一些聲音，對工程能力，對架構(gòu)能力持有一種抵觸的態(tài)度，覺得比較虛，覺得不需要。實(shí)際上以某些人所在的崗位來說，也沒錯(cuò)，畢竟公司、團(tuán)隊(duì)的狀態(tài)確實(shí)可能用不到，但是以個(gè)人成長的角度來看，就是大錯(cuò)特錯(cuò)。
下面我們來具體講講，關(guān)于知識的學(xué)習(xí)。
對知識，我一直有個(gè)觀點(diǎn)，叫做寧缺毋濫，這個(gè)圖片上寫了一句好前端才分對錯(cuò)，是的，其實(shí)很多人，他學(xué)習(xí)東西的時(shí)候就喜歡挑，挑簡單的學(xué)，書選擇最”深入淺出”的，在這種心態(tài)下，沒有任何一絲學(xué)好的可能性，
所以我對知識學(xué)習(xí)的目標(biāo)，理解為亮點(diǎn)，一曰準(zhǔn)確，二曰全面。當(dāng)年學(xué)習(xí)一部分知識，如果你能做到這兩點(diǎn)，那你將來在業(yè)務(wù)上做技術(shù)決策的時(shí)候，你面對面試官技術(shù)問題的時(shí)候，信心跟你只看過皮毛是完全不一樣的。
怎么做到這兩點(diǎn)呢？我想路子肯定有很多，而我的答案，我這里要分享的，是“建立自己的知識體系”。
如何建立自己的知識體系呢？我個(gè)人總結(jié)的經(jīng)驗(yàn)，是下面幾個(gè)步驟：
第一步，尋找線索。
你要了解一個(gè)知識，比如我想學(xué) Web 平臺的 API 了，當(dāng)然可以先找一本書，看看別人都寫了什么，但是我不喜歡這么干。
我大學(xué)里，學(xué)前端的東西，為了找個(gè) id 和 name 的區(qū)別，曾經(jīng)要借十幾本書來，對比著看，那個(gè)時(shí)候，是真的沒人告訴我，什么書比較好。所以我對別人總結(jié)好的知識，第一反應(yīng)是質(zhì)疑，不信。
所以我比較推薦，找一些比較準(zhǔn)確的，你可以確定它真的足夠全面的資料當(dāng)作線索。對 Web 平臺的 API，我就用反射：
瀏覽器里給出來的這個(gè)屬性列表是不會(huì)騙人的，用這個(gè)東西作為線索，我就很有信心。
同樣可能比較適合做的資料，還有一些標(biāo)準(zhǔn)文檔的附錄，和源代碼里的結(jié)構(gòu)定義。
第二步，是建立聯(lián)系。
比如說，看下面幾個(gè) DOM 屬性：
這里，左邊一列是操作 Node 的，右邊一列是操作 Element 的，它就存在一定的對應(yīng)關(guān)系。
一般來說，我們找對應(yīng)關(guān)系的方式有以下幾個(gè)依據(jù)：
美感
完備性
操作同一組數(shù)據(jù)
特別提一下，操作同一組數(shù)據(jù)，正是面向?qū)ο蟮暮诵母拍?，對前端而言，有點(diǎn)不一樣的是，所有的 API，根都是 window，所以，其實(shí)大部分的 API，可以依據(jù)面向?qū)ο蟮臄?shù)據(jù)和操作的觀點(diǎn)進(jìn)行劃分。
第三步，是分類。
這里我給出一個(gè)實(shí)際一些的例子，下圖是我對 zepto(移動(dòng)簡化版jQuery)，的 API 分類
建立聯(lián)系以后，我們依據(jù)知識之間的聯(lián)系，進(jìn)行分類，就可以得到一張圖譜，在這個(gè)圖里面，你就可以非常清楚地知道，哪些知識，是非常重要的，哪些，其實(shí)是可以互相替代的。
而一旦有你之前沒見過的東西，你又能通過把它放到圖譜里，來快速理解它，或者找出一些很好的替代方案。
比如說面試的時(shí)候，如果面試官問你 bind 和 unbind 怎么用，你還不會(huì)，這時(shí)候，如果你心里有這張圖，你就不至于一臉懵了，你可以說，雖然我不知道 bind 和 unbind，但是我知道 live 和 die 啊，我又知道 on 和 off 啊。
這張圖里我們就可以看出，collection 里面的東西，多半沒什么用，而節(jié)點(diǎn)操作里，肯定就都很有用。
第四步，是追本溯源。
當(dāng)我對一個(gè)知識體系的全貌有了概念以后，占了全面兩個(gè)字，接下來需要確認(rèn)它的準(zhǔn)確性。很多知識，在社區(qū)，會(huì)有很多的爭議，該相信誰呢，這是個(gè)問題。而我的答案，就是追本溯源，去找它最初的討論和定義。
有一個(gè)真實(shí)的案例，就是閉包這個(gè)概念，曾經(jīng)我們很多人的理解都是錯(cuò)的，把閉包和 scope 的概念給混淆起來，認(rèn)為閉包是函數(shù)的執(zhí)行環(huán)境上下文，但是有一個(gè)叫做 hax 的（很多人應(yīng)該都認(rèn)識他，哈哈），他就對此提出了質(zhì)疑，認(rèn)為閉包就是函數(shù)。于是我就去查證閉包的概念。
大家都知道，wiki 其實(shí)是不準(zhǔn)確的，但是其中有一段，基本不會(huì)太有問題，就是歷史。下圖是 closure 這個(gè)詞條的歷史部分：
從這段歷史里，我找到了一個(gè)名字， Peter J Landin，他是提出者，那么，我就去看看他到底是怎么說的，于是我去 google 學(xué)術(shù)搜索，找他的文章
果然找到了，于是我們看看原始的文件
這個(gè)定義，對應(yīng)到我們今天 JS 里的閉包，是稍微有點(diǎn)區(qū)別的，但是它毫無疑問，是包含了兩個(gè)部分：環(huán)境部分和控制（代碼）部分，所以其實(shí)，閉包就是對應(yīng)著 JS 的函數(shù)，而之前，普遍的觀點(diǎn)是認(rèn)為閉包只包含環(huán)境。
所以這個(gè)追溯的過程，能夠幫我們真正搞清楚對錯(cuò)。
除了 wiki-google 學(xué)術(shù)搜索的組合，還有一些郵件列表和 github 提交歷史，也是非常適合去查證一些概念和技術(shù)的歷史的。
最后說，我講的這個(gè)建立知識體系的過程，是不斷接受新知識，挑戰(zhàn)、質(zhì)疑原有的體系，推翻再重建，每一次循環(huán)，你的知識體系都變得更加堅(jiān)固，更加強(qiáng)大。
下面分享的一部分，是關(guān)于能力培養(yǎng)。
能力培養(yǎng)其實(shí)重要性很高，但是其實(shí)說起來，內(nèi)容卻很少。只有兩點(diǎn): 教材、訓(xùn)練。
對知識學(xué)習(xí)，我是主張建立自己的體系，不要去相信書，但是對能力培養(yǎng)，我的觀點(diǎn)就剛好相反，我覺得能力的體系，恰恰是難以自己建立的，需要教材去指導(dǎo)。這是由兩者的復(fù)雜程度和變化速度決定的。
想培養(yǎng)能力，就要找經(jīng)典的教材來學(xué)習(xí)，像算法導(dǎo)論，The C++ Programming Language這些經(jīng)典，幾十年都沒有過時(shí)。
注意這里我用了教材，而不是書。
教材和書最大的區(qū)別，就是有沒有習(xí)題。
在我看來，內(nèi)容再難的書可以一星期讀兩本，但是教材一定不行，教材一定得花幾個(gè)月的時(shí)間，一邊讀一邊做習(xí)題。
于是談到訓(xùn)練。
其實(shí)有個(gè)事實(shí)是，工作以后，只有極少數(shù)人仍然能夠做到訓(xùn)練，比如我自己的編程能力，我自覺工作 7、8 年，幾乎沒有過進(jìn)步。
訓(xùn)練應(yīng)該是系統(tǒng)的（需要教材）、主動(dòng)的，這兩個(gè)特點(diǎn)不可或缺，有人會(huì)覺得，我真的工作很辛苦，每天都要加班，但是其實(shí)，任何被動(dòng)的痛苦，都沒法給人帶來進(jìn)步，你的痛苦倒是可能給老板帶來更多收入。
如果面臨困境，可以選擇系統(tǒng)訓(xùn)練來提升自己，但是對大部分人來說，可能更樂于選擇一個(gè)一個(gè)變通的辦法：養(yǎng)成習(xí)慣，讓工作變得更有挑戰(zhàn)。
這個(gè)事情其實(shí)有不少理論，比較有名的是 Noel Tichy 提出的心理舒適區(qū)、學(xué)習(xí)區(qū)和恐慌區(qū)。選擇一份對自己來說具有挑戰(zhàn)性的工作，正面解決問題。
技術(shù)圈里流行一個(gè)笑話，說的是一個(gè)人，工作了三年，卻只有一年的經(jīng)驗(yàn)，因?yàn)楹竺鎯赡甓荚谥貜?fù)第一年的工作。
所以我們要做的事，就是永遠(yuǎn)不重復(fù)勞動(dòng)，當(dāng)你覺得現(xiàn)在的工作，越來越舒適，越來越缺少風(fēng)險(xiǎn)的時(shí)候，就應(yīng)該引起警惕了。
而雖然訓(xùn)練是個(gè)很困難的事情，其實(shí)大家也不必過于擔(dān)憂，雖然到處都是“一萬小時(shí)訓(xùn)練”的言論，現(xiàn)在各大公司的招聘門檻，在我看來應(yīng)該都卡在幾百小時(shí)訓(xùn)練的程度。所以我想說，一萬小時(shí)太久，只爭朝夕。希望看到大家成為更好的前端，做更好的自己。
以上是我分享的所有內(nèi)容。
