很多人都想學(xué)編程。但是苦于沒有具體的步驟和指導(dǎo)。比如想找份前端開發(fā)的工作，卻不知道應(yīng)該先學(xué)習(xí)什么再學(xué)習(xí)什么，也不知道該選擇什么樣的工具。因?yàn)榻?jīng)常被人問到類似的問題，全棧開發(fā)者KamranAhmed索性在github上制訂了一份現(xiàn)代前端開發(fā)的路線圖，并且用一篇文章對前端開發(fā)的整個(gè)學(xué)習(xí)過程進(jìn)行了詳細(xì)解釋。感興趣的初學(xué)者不容錯(cuò)過。你首先想要去做的件事是學(xué)習(xí)一些基礎(chǔ)，包括學(xué)習(xí)HTML、CSS的一點(diǎn)基礎(chǔ)知識，以及熟悉一下JavaScript的語法
HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上：
學(xué)習(xí)HTML基礎(chǔ)，了解如何編寫語義HTML理解如何把網(wǎng)頁分成section（段落），以及如何正確組織DOM（文檔對象模型）任務(wù)——一旦你學(xué)習(xí)了HTML基礎(chǔ)，至少要制作5個(gè)HTML網(wǎng)頁。我建議你隨便找一個(gè)網(wǎng)站，比如看看Github的檔案頁或者Twitter的登錄頁。然后把焦點(diǎn)放在恰當(dāng)?shù)亟M織內(nèi)容上。出來的東西可能會很難看，但是暫時(shí)別擔(dān)心，把你的關(guān)注點(diǎn)放在恰當(dāng)?shù)慕Y(jié)構(gòu)上。
2、學(xué)點(diǎn)CSS
現(xiàn)在我們已經(jīng)學(xué)會了如何給網(wǎng)頁準(zhǔn)備好骨架，接下來就是在此基礎(chǔ)上添加一些皮膚讓它好看一點(diǎn)了。CSS——級聯(lián)樣式表就是用來美化你的HTML頁面的。
首先要做的是學(xué)習(xí)語法，熟悉常見的CSS屬性。了解盒模型（box model），掌握如何利用Grid和Flexbox準(zhǔn)備布局一旦學(xué)習(xí)完上面的，再學(xué)習(xí)以下通過媒體查詢把網(wǎng)站做成響應(yīng)式的。
任務(wù)——一旦你掌握了基礎(chǔ)，接下來就應(yīng)該設(shè)計(jì)上一步制作的HTML網(wǎng)頁。比方說如果你給Github檔案編寫了HTML頁面的話，現(xiàn)在是時(shí)候應(yīng)用CSS來讓它的樣子看起來像實(shí)際的Github資料頁面一樣了。前面的那5個(gè)頁面都要拿來試一下。
3、學(xué)習(xí)JavaScript基礎(chǔ)
JavaScript能讓你的HTML頁面互動(dòng)性更強(qiáng)。比方說你在網(wǎng)站上看過的所有那些幻燈片、彈出窗口以及廣播通知，以及在沒有重載頁面的情況下重載頁面的特定部分，這些都是用JavaScript做的。在這一步中，你將會學(xué)習(xí)JavaScript的基礎(chǔ)來為后面的旅程做好準(zhǔn)備——學(xué)習(xí)這門語言的語法和基本機(jī)構(gòu)。
學(xué)習(xí)如何用JavaScript來操縱DOM，比方說如何從頁面移除一些元素，如何增加一些元素，增加和移除類，通過JavaScript應(yīng)用CSS樣式等。
完成之后再學(xué)習(xí)和理解諸如范圍、閉包、變量提升以及事件冒泡這樣的主題。
學(xué)習(xí)如何用XHR或者Ajax生成HTTP調(diào)用。Ajax可以讓你在不需要重載網(wǎng)頁的情況下執(zhí)行特定動(dòng)作。
學(xué)完之后接下來就要了解ES6+的所有新特性。ES6只是JavaScript的一個(gè)版本，里面給這門語言引入了大量有趣的更新，比如類、定義變量的多種方式，給數(shù)組增加了新的方法，字符串連接等。你們在網(wǎng)上找到的大部分文章都會用Babel來解析ES6，這其實(shí)是個(gè)轉(zhuǎn)譯器，可以將這門新的JavaScript轉(zhuǎn)換為舊的JavaScript，因?yàn)橛幸恍┡f版的瀏覽器不支持新版的JS。不過現(xiàn)在先不用擔(dān)心Babel，只需要了解相關(guān)概念，然后用到任何一種支持ES6的版瀏覽器上來練習(xí)一下就行。我們后面還會再繼續(xù)講ES6的。
現(xiàn)在你應(yīng)該已經(jīng)感覺到東西像是那么一回事了。如果你按照上面的步驟做下來的話應(yīng)該鼓勵(lì)一下。這些是你剛剛學(xué)到的一些重要的東西。
我應(yīng)該學(xué)jQuery嗎？
曾經(jīng)有一段時(shí)間每個(gè)人都對jQuery瘋狂，也有充分的理由；這是一個(gè)強(qiáng)大的庫，在JavaScript基礎(chǔ)上提供了一個(gè)封裝，讓你可以用兼容瀏覽器的方式執(zhí)行任何東西。不過那些日子已經(jīng)一去不復(fù)返，現(xiàn)在新項(xiàng)目用它已經(jīng)不是很多了，但是仍然還有人在用。你不是一定要學(xué)它，但是這玩意兒的確很容易，如果你想看看的話還是有好處的。
盡管我愿意推薦這個(gè)Github庫，但是這需要了解一點(diǎn)git的知識，所以這是可選的。你不必做這個(gè)但如果你做了的話，你會發(fā)現(xiàn)真的很有用——只要你開口你會驚訝地發(fā)現(xiàn)居然有那么多人愿意幫助你。那你也可以找到很多有關(guān)git的免費(fèi)資源，比如試試這個(gè)。
鼓勵(lì)自己一下
現(xiàn)在你已經(jīng)學(xué)習(xí)了必要的基礎(chǔ)了。如果一切都學(xué)得不錯(cuò)的話，你就可以去找份自由職業(yè)工作或者也許可以去試試能不能找份全職了。然而，如果你想有一份更好的職業(yè)的話，現(xiàn)在還不能停止腳步，因?yàn)檫€有很長一段路要走。
4、包管理器
在此之前，如果你要用到一些外部庫比如插件或者任何外部的桌面小部件的話，你得手工下載JavaScript和CSS文件并且將它們放到項(xiàng)目里面，然后那些庫或者插件發(fā)布新版本的時(shí)候，你又得下載更新的文件再放到你的項(xiàng)目里面，這是極其麻煩的事情。包管理器可以干掉這種麻煩。它們幫助你把外部庫和插件放到你的項(xiàng)目里面，這樣你就不用關(guān)心手工復(fù)制庫或者費(fèi)事地在它們發(fā)布新版時(shí)更新文件的事情了。現(xiàn)在有yarn和npm了。這兩個(gè)幾乎是一樣的，都只是實(shí)現(xiàn)，你可以任選一個(gè)，一旦學(xué)會了使用其中一個(gè)，另一個(gè)自然也不成問題。現(xiàn)在學(xué)以致用吧
在對包管理器有了基本了解之后，你就可以去安裝一些外部庫到你前面制作的一些網(wǎng)頁上了，比如安裝一些提示插件，當(dāng)用戶點(diǎn)擊某個(gè)按鈕時(shí)顯示提示信息，或者創(chuàng)建一個(gè)登錄表單用一些表單驗(yàn)證庫進(jìn)行表單驗(yàn)證，或者試試不同的選項(xiàng)看看如何安裝不同的版本。記得要看看語義版本控制
5、CSS預(yù)處理器
預(yù)處理器以CSS默認(rèn)不支持的功能豐富了后者。可選項(xiàng)有很多，包括Sass、Less、Stylus等等。要我選的話，我會選擇Sass。然而，PostCSS近的發(fā)展勢頭也不錯(cuò)，這屬于一個(gè)錦上添花的東西，有點(diǎn)類似于CSS的“Babel”。你可以拿來獨(dú)立使用或者在Sass的基礎(chǔ)上疊加。目前我建議你先學(xué)Sass，等后面有時(shí)間了再看看PostCSS。
6、CSS框架
你已經(jīng)不再需要學(xué)習(xí)CSS框架了，然而如果你想學(xué)一個(gè)的話。我會推薦在Bootstrap、Materialize和Bulma里面選。但如果你要考慮它們的市場需求的話，我會選擇Bootstrap。
7、CSS組織
隨著你的應(yīng)用不斷膨脹，CSS也開始變得混亂難以維系。有多種手段可以對你的CSS進(jìn)行組織，讓它更好地應(yīng)對伸縮性，比如OOCSS、SMACSS、SUITCSS、Atomic以及BEM。你應(yīng)該了解它們之間的不同，但是我更偏好BEM。
8、構(gòu)建工具
工具可以幫助你進(jìn)行JavaScript應(yīng)用的構(gòu)建/打包以及開發(fā)。這一類包括了linter（代碼檢查）、task runner（自動(dòng)構(gòu)建）以及bundler（打包工具）。
對于自動(dòng)構(gòu)建，這個(gè)本來是是很多選項(xiàng)的，包括npm腳本、gulp、grun等等。不過這一次，既然webpack能夠處理gulp能做的大部分東西，所以只有自動(dòng)構(gòu)建中的npm腳本可以用來對webpack能做的任務(wù)進(jìn)行自動(dòng)化。你不需要學(xué)習(xí)Gulp，然而到后面如果你有點(diǎn)時(shí)間的話，可以去看看它能否對你的應(yīng)用有所幫助。
至于linter，再次地也有很多選項(xiàng)，其中包括ESLint、JSLint、JSHint以及JSCS等。但是目前主要是ESLint用得多。
對于模塊打包工具，不同的選項(xiàng)包括Parcel、Webpack、Rollup、Browserify等。如果你必須選一個(gè)，目前你可以閉著眼睛選Webpack就是。Rollup也很常用但是主要建議用到庫上面，至于app，還是以webpack為主。所以現(xiàn)在你就先學(xué)習(xí)一下webpack吧，后面如果想的話再了解一下Rollup。
9、選一個(gè)框架
在舊的路線圖中，這個(gè)部分往往是緊挨著基礎(chǔ)部分的，但是這次我改到放在Sass、構(gòu)建工具和包管理器后面了，因?yàn)樵诳蚣苤心闳紩蒙夏切〇|西，如果不具備相應(yīng)知識的話會嚇到你的。
框架也有好些選項(xiàng)。不過目前比較常用的是React、Vue和Angular。近對React.js的需求越來越旺盛。然而，前面列的這幾個(gè)你隨便選一個(gè)都不會錯(cuò)。我個(gè)人會選React或者Angular。不過特別說明一下，作為初學(xué)者你也許會發(fā)現(xiàn)相對而言Angular會容易點(diǎn)，也許是因?yàn)樗С謳缀跻磺辛⒓纯捎玫臇|西，比如支持延遲加載的強(qiáng)大路由器，支持?jǐn)r截器的HTTP客戶端，依賴注入，組件CSS封裝等而不需要關(guān)心選擇外部庫的問題。不過React在社區(qū)方面無疑更有優(yōu)勢，而且Facebook一直都在努力改進(jìn)它。你需要確保的是不要因?yàn)槭裁礀|西火就選擇什么，要去google一下，對比一下，看看哪一個(gè)適合你。
需要注意的是，Redux、Mobx以及Rx.js都不是跟這些框架綁死到一起的，你也可以用到各種JavaScript應(yīng)用里面。此外，如果你選擇了Angular的話，確保你用的是Angular 2+而不是Angular 1+。
10、靜態(tài)類型檢查器
靜態(tài)類型檢查器幫助給JavaScript增加類型檢查。你不需要學(xué)習(xí)這些，不過這些東西可以賦予你超能力，而且學(xué)習(xí)起來也很快，幾個(gè)鐘頭就行了。這方面主要有TypeScript 和 Flow。我喜歡TypeScript ，不過你可以兩個(gè)都看看，再選你喜歡的。
11、服務(wù)器渲染
目前為止，你所學(xué)到的技能應(yīng)該足夠你找到一個(gè)“前端工程”的位置了。但且慢，你還可以更上一層樓
你還可以在選定的任何框架內(nèi)再學(xué)學(xué)服務(wù)器端渲染的知識。有不同的選項(xiàng)可選，這要取決于你用什么樣的框架。比方說如果你決定用React，值得關(guān)注的選項(xiàng)是Next.js和After.js。如果是Angular，你可以選Universal。對于Vue.js，我們有 Nuxt.js。
這份路線圖可能還會有遺漏的地方，但是足以應(yīng)付任何“前端工程師”角色之所需。還要記住的是，關(guān)鍵是盡可能多地練習(xí)。一開始你可能會覺得很嚇人，總感覺自己沒有掌握，但這是正常的，慢慢你就會覺得自己變得越來越好。還有，陷入困境時(shí)別忘了尋求幫助，你會驚喜地發(fā)現(xiàn)有多少人愿意幫助你的，或者至少我愿意。