一個前端的自我修養

　　今天給你們分享的主題是前端的自我成長，這是一個關於成長的話題。

　　不少人都有這樣的感受：聽了不少技術圈子的分享，有的有深度，有的循循善誘，深刻淺出，可是呢，幾年下來，到底哪些用上了，哪些對本身真的有幫助了?反而有些模糊。

　　2015 年我在不一樣的場合分享了不少內容：有移動端的性能、有適配、有 Web vs Native，也有 hybrid，可是其實我一直比較擔憂，真正有深度的內容，其實面向的是比較小衆的羣體，好比說 Hybrid，其實它在大部分公司裏面，是隻能用現成的。

　　因此我這一次嘗試分享一個我認爲能夠幫助到全部前端的話題，關於前端的成長，若是說這個分享的內容，聽衆裏面有那麼幾十我的拿到 BAT 的 offer，或者升職加薪，那麼我以爲我就認爲我取得了成功。

　　前端實際上是個特別苦逼的職業，由於前端技術一直革命的特別快，新技術、新技巧在不斷地被髮明出來。以前我有一個朋友，他講說他對本身的認知是瞭解前端、熟悉前端、精通前端、熟悉前端、不懂前端。爲何呢，他說當他以爲本身對前端全部的東西以爲無所不知，無所不能的時候，突然看到了一段代碼，他徹底沒法理解，因而整個世界就崩塌了，今後不再敢說本身會前端。

　　我就跟他說，這裏，缺乏的是一種正確的方法，你以爲無所不知、無所不能的標準是什麼，是工做中好久沒遇到解決不了的問題麼？他說還真是這樣。我就又問他，那你係統學過前端麼？他想了想，還真沒學過，大學裏不開這個課。的確如此，到目前爲止，尚未任何一個大學會教前端，卻是有些培訓班，會講網頁開發三劍客。

　　我這裏講的內容，但願帶給你們的，就是該如何學習前端，實現自身成長。

　　關於成長，首先我得發一個免責聲明，不是我對我講的內容沒有信心，而是成長是本身的事，英文有句話，在外企工做的人會常常聽到，叫作：

You are the owner of your career.

　　你是你職業發展的責任人。這句話潛臺詞是，你（不是你老闆，也不是你爸媽，也不是你女友）是你職業發展的責任人。

　　這句話我在我職業生涯的起點據說，一直指導個人職業發展，甚至在我帶團隊，培養團隊的時候，也是中心的指導思想，以前我帶的團隊的同窗，他們有很多人也在帶團隊，其實他們也在實踐這句話，因此我這裏，也把這句話、把這個道理分享給你們。

　　咱們講前端成長，我認爲，主要在兩個方面，一部分是「能力」，一部分是「知識」。我我的的觀點，能力佔百分之八十，知識佔百分之二十。

　　從這個圖上，你們能夠看到，其實咱們認爲變化快的東西，最新出來的 Angular、React、ES2015，其實都在知識裏面，知識又分紅兩部分，一部分我把它叫作標準，它是相對而言比較穩定的，不多會出現一個標準被推翻的事情。另外一部分則是技術，像是 jQuery、React 這些框架啦，像是 MVC、FLUX 這些架構的東西，這些東西是由各個公司主導的，變化就很是快，你看 Grunt 發展了沒多久，Gulp 就來挑戰他了，而後又有 browserify、webpack 這些東西。

　　而我認爲佔重點的能力，則是很是穩定的，我認爲能力是三大塊：編程能力、架構能力、工程能力。

　　編程能力，就是用代碼解決問題的能力，你編程能力越強，就能解決越複雜的問題，細分又有調試、算法、數據結構、OS 原理等這些的支撐，你才能解決各類麻煩的問題。

　　架構能力，則是解決代碼規模的問題，當一個系統足夠複雜，你會寫每一塊，能解決每個問題，不等於你能搞定整個系統，這就須要架構能力，架構能力包含了一些意識，好比解耦、接口隔離，也包含認識業務創建抽象模型，也有一些常見的模式，好比經典的 MVC，還有設計層面，面向對象、設計模式等等。

　　最後工程能力，則是解決協做的問題，當系統規模更大，光靠一我的，是沒辦法完成的，如何保證幾個高手互相可以配合好？如何保證項目裏面水平最差的人不拖後腿？這個工程化建設，每每會跨越多個業務，以彙報關係上的團隊爲單位來作。包括先後端解耦，模塊化，質量保證，代碼風格，等等。

　　其實不難看出來，這三項，實際上是有順序的，低等級、小團隊，編程能力一項就能應付，越資深的前端，越大的公司和團隊，越是須要後面的技能，可是這裏我要強調一點，其實資深前端，大團隊，對能力的需求，是既要還要——不是說資深的前端，編程能力就能夠變差。

　　社區總會有一些聲音，對工程能力，對架構能力持有一種抵觸的態度，以爲比較虛，以爲不須要。實際上以某些人所在的崗位來講，也沒錯，畢竟公司、團隊的狀態確實可能用不到，可是以我的成長的角度來看，就是大錯特錯。

　　下面咱們來具體講講，關於知識的學習。

　　對知識，我一直有個觀點，叫作寧缺毋濫，這個圖片上寫了一句好前端才分對錯，是的，其實不少人，他學習東西的時候就喜歡挑，挑簡單的學，書選擇最」深刻淺出」的，在這種心態下，沒有任何一絲學好的可能性，

　　因此我對知識學習的目標，理解爲亮點，一曰準確，二曰全面。當年學習一部分知識，若是你能作到這兩點，那你未來在業務上作技術決策的時候，你面對面試官技術問題的時候，信心跟你只看過皮毛是徹底不同的。

　　怎麼作到這兩點呢？我想路子確定有不少，而個人答案，我這裏要分享的，是「創建本身的知識體系」。

　　如何創建本身的知識體系呢？我我的總結的經驗，是下面幾個步驟：

　　第一步，尋找線索。

　　你要了解一個知識，好比我想學 Web 平臺的 API 了，固然能夠先找一本書，看看別人都寫了什麼，可是我不喜歡這麼幹。

　　我大學裏，學前端的東西，爲了找個 id 和 name 的區別，曾經要借十幾本書來，對比着看，那個時候，是真的沒人告訴我，什麼書比較好。因此我對別人總結好的知識，第一反應是質疑，不信。

　　因此我比較推薦，找一些比較準確的，你能夠肯定它真的足夠全面的資料看成線索。對 Web 平臺的 API，我就用反射：

　　瀏覽器裏給出來的這個屬性列表是不會騙人的，用這個東西做爲線索，我就頗有信心。

　　一樣可能比較適合作的資料，還有一些標準文檔的附錄，和源代碼裏的結構定義。

　　第二步，是創建聯繫。

　　好比說，看下面幾個 DOM 屬性：

img

　　這裏，左邊一列是操做 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這些經典，幾十年都沒有過期。

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

　　教材和書最大的區別，就是有沒有習題。

　　在我看來，內容再難的書能夠一星期讀兩本，可是教材必定不行，教材必定得花幾個月的時間，一邊讀一邊作習題。

　　因而談到訓練。

　　其實有個事實是，工做之後，只有極少數人仍然可以作到訓練，好比我本身的編程能力，我自覺工做 七、8 年，幾乎沒有過進步。

　　訓練應該是系統的（須要教材）、主動的，這兩個特色不可或缺，有人會以爲，我真的工做很辛苦，天天都要加班，可是其實，任何被動的痛苦，都無法給人帶來進步，你的痛苦卻是可能給老闆帶來更多收入。

　　若是面臨困境，能夠選擇系統訓練來提高本身，可是對大部分人來講，可能更樂於選擇一個一個變通的辦法：養成習慣，讓工做變得更有挑戰。

　　這個事情其實有很多理論，比較有名的是 Noel Tichy 提出的心理溫馨區、學習區和恐慌區。選擇一份對本身來講具備挑戰性的工做，正面解決問題。

　　技術圈裏流行一個笑話，說的是一我的，工做了三年，卻只有一年的經驗，由於後面兩年都在重複第一年的工做。

　　因此咱們要作的事，就是永遠不重複勞動，當你以爲如今的工做，愈來愈溫馨，愈來愈缺乏風險的時候，就應該引發警戒了。

　　而雖然訓練是個很困難的事情，其實你們也沒必要過於擔心，雖然處處都是「一萬小時訓練」的言論，如今各大公司的招聘門檻，在我看來應該都卡在幾百小時訓練的程度。因此我想說，一萬小時過久，只爭朝夕。但願看到你們成爲更好的前端，作更好的本身。

　　以上是我分享的全部內容。

學習前端的過程當中遇到什麼問題或者想獲取學習資源的話，歡迎加入前端學習交流QQ羣：328058344