摘要：今天給大家分享的主題是前端的自我成長(zhǎng)，這是一個(gè)關(guān)于成長(zhǎng)的話題。的確如此，到目前為止，還沒(méi)有任何一個(gè)大學(xué)會(huì)教前端，倒是有些培訓(xùn)班，會(huì)講網(wǎng)頁(yè)開(kāi)發(fā)三劍客。

　　今天給大家分享的主題是前端的自我成長(zhǎng)，這是一個(gè)關(guān)于成長(zhǎng)的話題。

　　很多人都有這樣的感覺(jué)：聽(tīng)了很多技術(shù)圈子的分享，有的有深度，有的循循善誘，深入淺出，但是呢，幾年下來(lái)，到底哪些用上了，哪些對(duì)自己真的有幫助了?反而有些模糊。

　　2015 年我在不同的場(chǎng)合分享了很多內(nèi)容：有移動(dòng)端的性能、有適配、有 Web vs Native，也有 hybrid，但是其實(shí)我一直比較擔(dān)心，真正有深度的內(nèi)容，其實(shí)面向的是比較小眾的群體，比如說(shuō) Hybrid，其實(shí)它在大部分公司里面，是只能用現(xiàn)成的。

　　所以我這一次嘗試分享一個(gè)我認(rèn)為可以幫助到所有前端的話題，關(guān)于前端的成長(zhǎng)，如果說(shuō)這個(gè)分享的內(nèi)容，聽(tīng)眾里面有那么幾十個(gè)人拿到 BAT 的 offer，或者升職加薪，那么我覺(jué)得我就認(rèn)為我取得了成功。

　　前端其實(shí)是個(gè)特別苦逼的職業(yè)，因?yàn)榍岸思夹g(shù)一直革命的特別快，新技術(shù)、新技巧在不斷地被發(fā)明出來(lái)。之前我有一個(gè)朋友，他講說(shuō)他對(duì)自己的認(rèn)知是了解前端、熟悉前端、精通前端、熟悉前端、不懂前端。為什么呢，他說(shuō)當(dāng)他覺(jué)得自己對(duì)前端所有的東西覺(jué)得無(wú)所不知，無(wú)所不能的時(shí)候，忽然看到了一段代碼，他完全無(wú)法理解，于是整個(gè)世界就崩塌了，從此再也不敢說(shuō)自己會(huì)前端。

　　我就跟他說(shuō)，這里，缺少的是一種正確的方法，你覺(jué)得無(wú)所不知、無(wú)所不能的標(biāo)準(zhǔn)是什么，是工作中很久沒(méi)遇到解決不了的問(wèn)題么？他說(shuō)還真是這樣。我就又問(wèn)他，那你系統(tǒng)學(xué)過(guò)前端么？他想了想，還真沒(méi)學(xué)過(guò)，大學(xué)里不開(kāi)這個(gè)課。的確如此，到目前為止，還沒(méi)有任何一個(gè)大學(xué)會(huì)教前端，倒是有些培訓(xùn)班，會(huì)講網(wǎng)頁(yè)開(kāi)發(fā)三劍客。

　　我這里講的內(nèi)容，希望帶給大家的，就是該如何學(xué)習(xí)前端，實(shí)現(xiàn)自身成長(zhǎng)。

　　關(guān)于成長(zhǎng)，首先我得發(fā)一個(gè)免責(zé)聲明，不是我對(duì)我講的內(nèi)容沒(méi)有信心，而是成長(zhǎng)是自己的事，英文有句話，在外企工作的人會(huì)經(jīng)常聽(tīng)到，叫做：

You are the owner of your career.

　　你是你職業(yè)發(fā)展的責(zé)任人。這句話潛臺(tái)詞是，你（不是你老板，也不是你爸媽，也不是你女朋友）是你職業(yè)發(fā)展的責(zé)任人。

　　這句話我在我職業(yè)生涯的起點(diǎn)聽(tīng)說(shuō)，一直指導(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è)道理分享給大家。

　　我們講前端成長(zhǎng)，我認(rèn)為，主要在兩個(gè)方面，一部分是“能力”，一部分是“知識(shí)”。我個(gè)人的觀點(diǎn)，能力占百分之八十，知識(shí)占百分之二十。

　　從這個(gè)圖上，大家可以看到，其實(shí)我們認(rèn)為變化快的東西，最新出來(lái)的 Angular、React、ES2015，其實(shí)都在知識(shí)里面，知識(shí)又分成兩部分，一部分我把它叫做標(biāo)準(zhǔn)，它是相對(duì)而言比較穩(wěn)定的，很少會(huì)出現(xiàn)一個(gè)標(biāo)準(zhǔn)被推翻的事情。另一部分則是技術(shù)，像是 jQuery、React 這些框架啦，像是 MVC、FLUX 這些架構(gòu)的東西，這些東西是由各個(gè)公司主導(dǎo)的，變化就非常快，你看 Grunt 發(fā)展了沒(méi)多久，Gulp 就來(lái)挑戰(zhàn)他了，然后又有 browserify、webpack 這些東西。

　　而我認(rèn)為占重點(diǎn)的能力，則是非常穩(wěn)定的，我認(rèn)為能力是三大塊：編程能力、架構(gòu)能力、工程能力。

　　編程能力，就是用代碼解決問(wèn)題的能力，你編程能力越強(qiáng)，就能解決越復(fù)雜的問(wèn)題，細(xì)分又有調(diào)試、算法、數(shù)據(jù)結(jié)構(gòu)、OS 原理等這些的支撐，你才能解決各種麻煩的問(wèn)題。

　　架構(gòu)能力，則是解決代碼規(guī)模的問(wèn)題，當(dāng)一個(gè)系統(tǒng)足夠復(fù)雜，你會(huì)寫每一塊，能解決每一個(gè)問(wèn)題，不等于你能搞定整個(gè)系統(tǒng)，這就需要架構(gòu)能力，架構(gòu)能力包含了一些意識(shí)，比如解耦、接口隔離，也包含認(rèn)識(shí)業(yè)務(wù)建立抽象模型，也有一些常見(jiàn)的模式，比如經(jīng)典的 MVC，還有設(shè)計(jì)層面，面向?qū)ο?、設(shè)計(jì)模式等等。

　　最后工程能力，則是解決協(xié)作的問(wèn)題，當(dāng)系統(tǒng)規(guī)模更大，光靠一個(gè)人，是沒(méi)辦法完成的，如何保證幾個(gè)高手互相能夠配合好？如何保證項(xiàng)目里面水平最差的人不拖后腿？這個(gè)工程化建設(shè)，往往會(huì)跨越多個(gè)業(yè)務(wù)，以匯報(bào)關(guān)系上的團(tuán)隊(duì)為單位來(lái)做。包括前后端解耦，模塊化，質(zhì)量保證，代碼風(fēng)格，等等。

　　其實(shí)不難看出來(lái)，這三項(xiàng)，其實(shí)是有順序的，低等級(jí)、小團(tuán)隊(duì)，編程能力一項(xiàng)就能應(yīng)付，越資深的前端，越大的公司和團(tuán)隊(duì)，越是需要后面的技能，但是這里我要強(qiáng)調(diào)一點(diǎn)，其實(shí)資深前端，大團(tuán)隊(duì)，對(duì)能力的需求，是既要還要——不是說(shuō)資深的前端，編程能力就可以變差。

　　社區(qū)總會(huì)有一些聲音，對(duì)工程能力，對(duì)架構(gòu)能力持有一種抵觸的態(tài)度，覺(jué)得比較虛，覺(jué)得不需要。實(shí)際上以某些人所在的崗位來(lái)說(shuō)，也沒(méi)錯(cuò)，畢竟公司、團(tuán)隊(duì)的狀態(tài)確實(shí)可能用不到，但是以個(gè)人成長(zhǎng)的角度來(lái)看，就是大錯(cuò)特錯(cuò)。

　　下面我們來(lái)具體講講，關(guān)于知識(shí)的學(xué)習(xí)。

　　對(duì)知識(shí)，我一直有個(gè)觀點(diǎn)，叫做寧缺毋濫，這個(gè)圖片上寫了一句好前端才分對(duì)錯(cuò)，是的，其實(shí)很多人，他學(xué)習(xí)東西的時(shí)候就喜歡挑，挑簡(jiǎn)單的學(xué)，書選擇最”深入淺出”的，在這種心態(tài)下，沒(méi)有任何一絲學(xué)好的可能性，

　　所以我對(duì)知識(shí)學(xué)習(xí)的目標(biāo)，理解為亮點(diǎn)，一曰準(zhǔn)確，二曰全面。當(dāng)年學(xué)習(xí)一部分知識(shí)，如果你能做到這兩點(diǎn)，那你將來(lái)在業(yè)務(wù)上做技術(shù)決策的時(shí)候，你面對(duì)面試官技術(shù)問(wèn)題的時(shí)候，信心跟你只看過(guò)皮毛是完全不一樣的。

　　怎么做到這兩點(diǎn)呢？我想路子肯定有很多，而我的答案，我這里要分享的，是“建立自己的知識(shí)體系”。

　　如何建立自己的知識(shí)體系呢？我個(gè)人總結(jié)的經(jīng)驗(yàn)，是下面幾個(gè)步驟：

　　第一步，尋找線索。

　　你要了解一個(gè)知識(shí)，比如我想學(xué) Web 平臺(tái)的 API 了，當(dāng)然可以先找一本書，看看別人都寫了什么，但是我不喜歡這么干。

　　我大學(xué)里，學(xué)前端的東西，為了找個(gè) id 和 name 的區(qū)別，曾經(jīng)要借十幾本書來(lái)，對(duì)比著看，那個(gè)時(shí)候，是真的沒(méi)人告訴我，什么書比較好。所以我對(duì)別人總結(jié)好的知識(shí)，第一反應(yīng)是質(zhì)疑，不信。

　　所以我比較推薦，找一些比較準(zhǔn)確的，你可以確定它真的足夠全面的資料當(dāng)作線索。對(duì) Web 平臺(tái)的 API，我就用反射：

　　瀏覽器里給出來(lái)的這個(gè)屬性列表是不會(huì)騙人的，用這個(gè)東西作為線索，我就很有信心。

　　同樣可能比較適合做的資料，還有一些標(biāo)準(zhǔn)文檔的附錄，和源代碼里的結(jié)構(gòu)定義。

　　第二步，是建立聯(lián)系。

　　比如說(shuō)，看下面幾個(gè) DOM 屬性：

img

　　這里，左邊一列是操作 Node 的，右邊一列是操作 Element 的，它就存在一定的對(duì)應(yīng)關(guān)系。

　　一般來(lái)說(shuō)，我們找對(duì)應(yīng)關(guān)系的方式有以下幾個(gè)依據(jù)：

美感
完備性
操作同一組數(shù)據(jù)
　　特別提一下，操作同一組數(shù)據(jù)，正是面向?qū)ο蟮暮诵母拍?，?duì)前端而言，有點(diǎn)不一樣的是，所有的 API，根都是 window，所以，其實(shí)大部分的 API，可以依據(jù)面向?qū)ο蟮臄?shù)據(jù)和操作的觀點(diǎn)進(jìn)行劃分。

　　第三步，是分類。

　　這里我給出一個(gè)實(shí)際一些的例子，下圖是我對(duì) zepto(移動(dòng)簡(jiǎn)化版jQuery)，的 API 分類

　　建立聯(lián)系以后，我們依據(jù)知識(shí)之間的聯(lián)系，進(jìn)行分類，就可以得到一張圖譜，在這個(gè)圖里面，你就可以非常清楚地知道，哪些知識(shí)，是非常重要的，哪些，其實(shí)是可以互相替代的。

　　而一旦有你之前沒(méi)見(jiàn)過(guò)的東西，你又能通過(guò)把它放到圖譜里，來(lái)快速理解它，或者找出一些很好的替代方案。

　　比如說(shuō)面試的時(shí)候，如果面試官問(wèn)你 bind 和 unbind 怎么用，你還不會(huì)，這時(shí)候，如果你心里有這張圖，你就不至于一臉懵了，你可以說(shuō)，雖然我不知道 bind 和 unbind，但是我知道 live 和 die 啊，我又知道 on 和 off 啊。

　　這張圖里我們就可以看出，collection 里面的東西，多半沒(méi)什么用，而節(jié)點(diǎn)操作里，肯定就都很有用。

　　第四步，是追本溯源。

　　當(dāng)我對(duì)一個(gè)知識(shí)體系的全貌有了概念以后，占了全面兩個(gè)字，接下來(lái)需要確認(rèn)它的準(zhǔn)確性。很多知識(shí)，在社區(qū)，會(huì)有很多的爭(zhēng)議，該相信誰(shuí)呢，這是個(gè)問(wèn)題。而我的答案，就是追本溯源，去找它最初的討論和定義。

　　有一個(gè)真實(shí)的案例，就是閉包這個(gè)概念，曾經(jīng)我們很多人的理解都是錯(cuò)的，把閉包和 scope 的概念給混淆起來(lái)，認(rèn)為閉包是函數(shù)的執(zhí)行環(huán)境上下文，但是有一個(gè)叫做 hax 的（很多人應(yīng)該都認(rèn)識(shí)他，哈哈），他就對(duì)此提出了質(zhì)疑，認(rèn)為閉包就是函數(shù)。于是我就去查證閉包的概念。

　　大家都知道，wiki 其實(shí)是不準(zhǔn)確的，但是其中有一段，基本不會(huì)太有問(wèn)題，就是歷史。下圖是 closure 這個(gè)詞條的歷史部分：

　　從這段歷史里，我找到了一個(gè)名字， Peter J Landin，他是提出者，那么，我就去看看他到底是怎么說(shuō)的，于是我去 google 學(xué)術(shù)搜索，找他的文章

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

　　這個(gè)定義，對(duì)應(yīng)到我們今天 JS 里的閉包，是稍微有點(diǎn)區(qū)別的，但是它毫無(wú)疑問(wèn)，是包含了兩個(gè)部分：環(huán)境部分和控制（代碼）部分，所以其實(shí)，閉包就是對(duì)應(yīng)著 JS 的函數(shù)，而之前，普遍的觀點(diǎn)是認(rèn)為閉包只包含環(huán)境。

　　所以這個(gè)追溯的過(guò)程，能夠幫我們真正搞清楚對(duì)錯(cuò)。

　　除了 wiki-google 學(xué)術(shù)搜索的組合，還有一些郵件列表和 github 提交歷史，也是非常適合去查證一些概念和技術(shù)的歷史的。

　　最后說(shuō)，我講的這個(gè)建立知識(shí)體系的過(guò)程，是不斷接受新知識(shí)，挑戰(zhàn)、質(zhì)疑原有的體系，推翻再重建，每一次循環(huán)，你的知識(shí)體系都變得更加堅(jiān)固，更加強(qiáng)大。

　　下面分享的一部分，是關(guān)于能力培養(yǎng)。

　　能力培養(yǎng)其實(shí)重要性很高，但是其實(shí)說(shuō)起來(lái)，內(nèi)容卻很少。只有兩點(diǎn): 教材、訓(xùn)練。

　　對(duì)知識(shí)學(xué)習(xí)，我是主張建立自己的體系，不要去相信書，但是對(duì)能力培養(yǎng)，我的觀點(diǎn)就剛好相反，我覺(jué)得能力的體系，恰恰是難以自己建立的，需要教材去指導(dǎo)。這是由兩者的復(fù)雜程度和變化速度決定的。

　　想培養(yǎng)能力，就要找經(jīng)典的教材來(lái)學(xué)習(xí)，像算法導(dǎo)論，The C++ Programming Language這些經(jīng)典，幾十年都沒(méi)有過(guò)時(shí)。

　　注意這里我用了教材，而不是書。

　　教材和書最大的區(qū)別，就是有沒(méi)有習(xí)題。

　　在我看來(lái)，內(nèi)容再難的書可以一星期讀兩本，但是教材一定不行，教材一定得花幾個(gè)月的時(shí)間，一邊讀一邊做習(xí)題。

　　于是談到訓(xùn)練。

　　其實(shí)有個(gè)事實(shí)是，工作以后，只有極少數(shù)人仍然能夠做到訓(xùn)練，比如我自己的編程能力，我自覺(jué)工作 7、8 年，幾乎沒(méi)有過(guò)進(jìn)步。

　　訓(xùn)練應(yīng)該是系統(tǒng)的（需要教材）、主動(dòng)的，這兩個(gè)特點(diǎn)不可或缺，有人會(huì)覺(jué)得，我真的工作很辛苦，每天都要加班，但是其實(shí)，任何被動(dòng)的痛苦，都沒(méi)法給人帶來(lái)進(jìn)步，你的痛苦倒是可能給老板帶來(lái)更多收入。

　　如果面臨困境，可以選擇系統(tǒng)訓(xùn)練來(lái)提升自己，但是對(duì)大部分人來(lái)說(shuō)，可能更樂(lè)于選擇一個(gè)一個(gè)變通的辦法：養(yǎng)成習(xí)慣，讓工作變得更有挑戰(zhàn)。

　　這個(gè)事情其實(shí)有不少理論，比較有名的是 Noel Tichy 提出的心理舒適區(qū)、學(xué)習(xí)區(qū)和恐慌區(qū)。選擇一份對(duì)自己來(lái)說(shuō)具有挑戰(zhàn)性的工作，正面解決問(wèn)題。

　　技術(shù)圈里流行一個(gè)笑話，說(shuō)的是一個(gè)人，工作了三年，卻只有一年的經(jīng)驗(yàn)，因?yàn)楹竺鎯赡甓荚谥貜?fù)第一年的工作。

　　所以我們要做的事，就是永遠(yuǎn)不重復(fù)勞動(dòng)，當(dāng)你覺(jué)得現(xiàn)在的工作，越來(lái)越舒適，越來(lái)越缺少風(fēng)險(xiǎn)的時(shí)候，就應(yīng)該引起警惕了。

　　而雖然訓(xùn)練是個(gè)很困難的事情，其實(shí)大家也不必過(guò)于擔(dān)憂，雖然到處都是“一萬(wàn)小時(shí)訓(xùn)練”的言論，現(xiàn)在各大公司的招聘門檻，在我看來(lái)應(yīng)該都卡在幾百小時(shí)訓(xùn)練的程度。所以我想說(shuō)，一萬(wàn)小時(shí)太久，只爭(zhēng)朝夕。希望看到大家成為更好的前端，做更好的自己。

　　以上是我分享的所有內(nèi)容。

學(xué)習(xí)前端的過(guò)程中遇到什么問(wèn)題或者想獲取學(xué)習(xí)資源的話，歡迎加入前端學(xué)習(xí)交流QQ群：328058344