你好，我是winter。今天我們一起來(lái)聊聊前端的學(xué)習(xí)路線與方法。
到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一?？墒?，與此相對(duì)的是，我發(fā)現(xiàn)極少或者幾乎沒(méi)有大學(xué)的計(jì)算機(jī)專業(yè)愿意開(kāi)設(shè)前端課程，更沒(méi)有系統(tǒng)性的教學(xué)方案出現(xiàn)。大部分前端工程師的知識(shí)，其實(shí)都是來(lái)自于實(shí)踐和工作中零散的學(xué)習(xí)。
基礎(chǔ)知識(shí)的欠缺會(huì)讓你束手束腳，更限制你解決問(wèn)題的思路。缺少系統(tǒng)教育加上技術(shù)快速革新，在這樣的大環(huán)境下，前端工程師保持自學(xué)能力就顯得尤其重要了。
那么，前端究竟應(yīng)該怎么學(xué)呢？我想，我想給大家簡(jiǎn)單分享一下自己的經(jīng)驗(yàn)。
學(xué)習(xí)路徑與學(xué)習(xí)方法
首先是0基礎(chǔ)入門(mén)的同學(xué)，你可以讀幾本經(jīng)典的前端教材，比如《JavaScript高級(jí)程序設(shè)計(jì)》、《精通CSS》等書(shū)籍，去閱讀一些參考性質(zhì)的網(wǎng)站也是不錯(cuò)的選項(xiàng)，比如MDN。
如果你至少已經(jīng)有了一年以上的工作經(jīng)驗(yàn)，希望在技術(shù)上有一定突破，我最近在極客時(shí)間的專欄《重學(xué)前端》是一個(gè)不錯(cuò)的選擇。
除此之外，我想和你談兩個(gè)前端學(xué)習(xí)方法。
第一個(gè)方法：建立知識(shí)架構(gòu)
建立自己的知識(shí)架構(gòu)，并且在這個(gè)架構(gòu)上，不斷地進(jìn)行優(yōu)化。
我們先來(lái)講講什么叫做知識(shí)架構(gòu)？我們可以把它理解為知識(shí)的“目錄”或者索引，它能夠幫助我們把零散的知識(shí)組織起來(lái)，也能夠幫助我們發(fā)現(xiàn)一些知識(shí)上的盲區(qū)。
當(dāng)然，知識(shí)的架構(gòu)是有優(yōu)劣之分的，最重要的就是邏輯性和完備性。
我們來(lái)思考一個(gè)問(wèn)題，如果我們要給JavaScript知識(shí)做一個(gè)頂層目錄，該怎么做呢？
如果我們把一些特別流行的術(shù)語(yǔ)和問(wèn)題，拼湊起來(lái)，可能會(huì)變成這樣：
- 類型轉(zhuǎn)換；
- this指針；
- 閉包；
- 作用域鏈；
- 原型鏈；
- ……
、這其實(shí)不是我們想要的結(jié)果，因?yàn)檫@些知識(shí)點(diǎn)之間，沒(méi)有任何邏輯關(guān)系。它們既不是并列關(guān)系，又不是遞進(jìn)關(guān)系，合在一起，也就沒(méi)有任何意義。這樣的知識(shí)架構(gòu)，無(wú)法幫助我們?nèi)グl(fā)現(xiàn)問(wèn)題和理解問(wèn)題。
如果讓我來(lái)做，我會(huì)這樣劃分：
- 文法；
- 語(yǔ)義；
- 運(yùn)行時(shí)。
為什么這樣分呢，因?yàn)閷?duì)于任何計(jì)算機(jī)語(yǔ)言來(lái)說(shuō)，必定是“用規(guī)定的文法，去表達(dá)特定語(yǔ)義，最終操作運(yùn)行時(shí)的”一個(gè)過(guò)程。
這樣，JavaScript的任何知識(shí)都不會(huì)出現(xiàn)在這個(gè)范圍之外，這是知識(shí)架構(gòu)的完備性。我們?cè)偻录?xì)分一個(gè)層級(jí)，就變成了這個(gè)樣子：
-
文法
詞法
語(yǔ)法
-
語(yǔ)義
運(yùn)行時(shí)
類型
執(zhí)行過(guò)程
我來(lái)解釋一下這個(gè)劃分。
文法可以分成詞法和語(yǔ)法，這來(lái)自編譯原理的劃分，同樣是完備的。語(yǔ)義則跟語(yǔ)法具有一一對(duì)應(yīng)關(guān)系，這里暫時(shí)不區(qū)分。
對(duì)于運(yùn)行時(shí)部分，這個(gè)劃分保持了完備性，我們都知道：程序 = 算法 + 數(shù)據(jù)結(jié)構(gòu)，那么，對(duì)運(yùn)行時(shí)來(lái)說(shuō)，類型就是數(shù)據(jù)結(jié)構(gòu)，執(zhí)行過(guò)程就是算法。
當(dāng)我們?cè)偻录?xì)分的時(shí)候，就會(huì)看到熟悉的概念了，詞法中有各種直接量、關(guān)鍵字、運(yùn)算符，語(yǔ)法和語(yǔ)義則是表達(dá)式、語(yǔ)句、函數(shù)、對(duì)象、模塊，類型則包含了對(duì)象、數(shù)字、字符串等。
這樣逐層向下細(xì)分，知識(shí)框架就初見(jiàn)端倪了。在頂層和大結(jié)構(gòu)上，我們通過(guò)邏輯來(lái)保持完備性。如果繼續(xù)往下，就需要一些技巧了，我們可以尋找一些線索。
比如在JavaScript標(biāo)準(zhǔn)中，有完整的文法定義，它是具有完備性的，所以我們可以根據(jù)它來(lái)完成，我們還可以根據(jù)語(yǔ)法去建立語(yǔ)義的知識(shí)架構(gòu)。實(shí)際上，因?yàn)镴avaScript有一份統(tǒng)一的標(biāo)準(zhǔn)，所以相對(duì)來(lái)說(shuō)不太困難。
如果是瀏覽器中的API，那就困難了，它們分布在w3c的各種標(biāo)準(zhǔn)當(dāng)中，非常難找。但是我們要想找到一些具有完備性的線索，也不是沒(méi)有辦法。我喜歡的一個(gè)辦法，就是用實(shí)際的代碼去找：for in 遍歷window的屬性，再去找它的內(nèi)容。
我想，學(xué)習(xí)的過(guò)程，實(shí)際上就是知識(shí)架構(gòu)不斷進(jìn)化的過(guò)程，通過(guò)知識(shí)架構(gòu)的自然延伸，我們可以更輕松地記憶一些原本難以記住的點(diǎn)，還可以發(fā)現(xiàn)被忽視的知識(shí)盲點(diǎn)。
第二個(gè)方法，我把它稱作追本溯源。
有一些知識(shí)，背后有一個(gè)很大的體系，例如，我們對(duì)比一下CSS里面的兩個(gè)屬性：
opacity；
display。
雖然都是“屬性”，但是它們背后的知識(shí)量完全不同，opacity是個(gè)非常單純的數(shù)值，表達(dá)的意思也很清楚，而display的每一個(gè)取值背后都是一個(gè)不同的布局體系。我們要講清楚display，就必須關(guān)注正常流（Normal Flow）、關(guān)注彈性布局系統(tǒng)以及grid這些內(nèi)容。
還有一些知識(shí)，涉及的概念本身經(jīng)歷了各種變遷，變得非常復(fù)雜和有爭(zhēng)議性，比如MVC，從1979年至今，概念變化非常大，MVC的定義幾乎已經(jīng)成了一段公案，我曾經(jīng)截取了MVC原始論文、MVP原始論文、微軟MSDN、Apple開(kāi)發(fā)者文檔，這些內(nèi)容里面，MVC畫(huà)的圖、箭頭和解釋都完全不同。
這種時(shí)候，就是我們做一些考古工作的時(shí)候了。追本溯源，其實(shí)就是關(guān)注技術(shù)提出的背景，關(guān)注原始的論文或者文章，關(guān)注作者說(shuō)的話。
操作起來(lái)也非常簡(jiǎn)單：翻翻資料（一般wiki上就有）找找歷史上的文章和人物，再順藤摸瓜翻出來(lái)歷史資料就可以了，如果翻出來(lái)的是歷史人物（幸虧互聯(lián)網(wǎng)的歷史不算悠久），你也可以試著發(fā)封郵件問(wèn)問(wèn)。
這個(gè)過(guò)程，可以幫助我們理解一些看上去不合理的東西，有時(shí)候還可以收獲一些趣聞，比如JavaScript之父 Brendan Eich 曾經(jīng)在Wikipedia的討論頁(yè)上解釋JavaScript最初想設(shè)計(jì)一個(gè)帶有prototype的scheme，結(jié)果受到管理層命令把它弄成像Java的樣子（如果你再挖的深一點(diǎn)，甚至能找到他對(duì)某位“尖頭老板”的吐槽）。
根據(jù)這么一句話，我們?cè)偃タ纯磗cheme，看看Java，再看看一些別的基于原型的語(yǔ)言，我們就可以理解為什么JavaScript是現(xiàn)在這個(gè)樣子了：函數(shù)是一等公民，卻提供了new this instanceof等特性，甚至抄來(lái)了Java的getYear這樣的Bug。
今天我?guī)闾剿髁饲岸说膶W(xué)習(xí)路徑，并提出了兩個(gè)學(xué)習(xí)方法：你要試著建立自己的知識(shí)架構(gòu)，除此之外，還要學(xué)會(huì)追本溯源，找到知識(shí)的源頭。
戳此查看完整文章：
拓展閱讀：
一份前端知識(shí)架構(gòu)圖，戳此領(lǐng)取
作者程劭非，網(wǎng)名“winter”，前端社區(qū)知名專家，前手機(jī)淘寶前端負(fù)責(zé)人，極客時(shí)間《重學(xué)前端》專欄作者。先后就職于微軟、盛大、阿里巴巴等公司。winter 早年做過(guò)嵌入式系統(tǒng)瀏覽器、電子書(shū)和 WebOS 的相關(guān)工作，近年致力于移動(dòng)前端領(lǐng)域研究，提出過(guò) Flexible 布局等先進(jìn)概念，也產(chǎn)出過(guò) Weex 這樣的移動(dòng)前端開(kāi)發(fā)框架。
