摘要：具體來(lái)說(shuō)，包管理器就是可以通過(guò)命令行，幫助你把外部庫(kù)和插件放到你的項(xiàng)目里面并在之后進(jìn)行版本升級(jí)，這樣就不用手工復(fù)制和更新庫(kù)?，F(xiàn)在有的包管理器主要是和。

HTML給你的網(wǎng)頁(yè)賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語(yǔ)法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上：

學(xué)習(xí)HTML基礎(chǔ)，了解如何編寫(xiě)語(yǔ)義HTML

理解如何把網(wǎng)頁(yè)分成section（段落），以及如何正確組織DOM（文檔對(duì)象模型）

現(xiàn)在很多html5的新標(biāo)簽也很有用，需要進(jìn)行了解

實(shí)踐建議：
一旦你學(xué)習(xí)了HTML基礎(chǔ)，至少要制作5個(gè)HTML網(wǎng)頁(yè)。我建議你隨便找一個(gè)網(wǎng)站，比如看看Github的檔案頁(yè)或者Twitter的登錄頁(yè)。然后把焦點(diǎn)放在恰當(dāng)?shù)亟M織內(nèi)容上。出來(lái)的東西可能會(huì)很難看，但是暫時(shí)別擔(dān)心，把你的關(guān)注點(diǎn)放在恰當(dāng)?shù)慕Y(jié)構(gòu)上。

現(xiàn)在我們已經(jīng)學(xué)會(huì)了如何給網(wǎng)頁(yè)準(zhǔn)備好骨架，接下來(lái)就是在此基礎(chǔ)上添加一些皮膚讓它好看一點(diǎn)了。CSS——級(jí)聯(lián)樣式表就是用來(lái)美化你的HTML頁(yè)面的。

首先要做的是學(xué)習(xí)語(yǔ)法，熟悉常見(jiàn)的CSS屬性。

了解盒模型（box model），掌握如何利用Grid和Flexbox準(zhǔn)備布局

一旦學(xué)習(xí)完上面的，再學(xué)習(xí)以下通過(guò)媒體查詢(xún)把網(wǎng)站做成響應(yīng)式的。

實(shí)踐建議：
一旦你掌握了基礎(chǔ)，接下來(lái)就應(yīng)該設(shè)計(jì)上一步制作的HTML網(wǎng)頁(yè)。比方說(shuō)如果你給Github檔案編寫(xiě)了HTML頁(yè)面的話(huà)，現(xiàn)在是時(shí)候應(yīng)用CSS來(lái)讓它的樣子看起來(lái)像實(shí)際的Github資料頁(yè)面一樣了。前面的那5個(gè)頁(yè)面都要拿來(lái)試一下。

JavaScript能讓你的HTML頁(yè)面互動(dòng)性更強(qiáng)。比方說(shuō)你在網(wǎng)站上看過(guò)的所有那些幻燈片、彈出窗口以及廣播通知，以及在沒(méi)有重載頁(yè)面的情況下重載頁(yè)面的特定部分，這些都是用JavaScript做的。在這一步中，你將會(huì)學(xué)習(xí)JavaScript的基礎(chǔ)來(lái)為后面的旅程做好準(zhǔn)備——

學(xué)習(xí)這門(mén)語(yǔ)言的語(yǔ)法和基本機(jī)構(gòu)。

學(xué)習(xí)如何用JavaScript來(lái)操縱DOM，比方說(shuō)如何從頁(yè)面移除一些元素，如何增加一些元素，增加和移除類(lèi)，通過(guò)JavaScript應(yīng)用CSS樣式等。

完成之后再學(xué)習(xí)和理解諸如范圍、閉包、變量提升以及事件冒泡這樣的主題。

學(xué)習(xí)如何用XHR或者Ajax生成HTTP調(diào)用。Ajax可以讓你在不需要重載網(wǎng)頁(yè)的情況下執(zhí)行特定動(dòng)作。

學(xué)完之后接下來(lái)就要了解ES6+的所有新特性。ES6只是JavaScript的一個(gè)版本，里面給這門(mén)語(yǔ)言引入了大量有趣的更新，比如類(lèi)、定義變量的多種方式，給數(shù)組增加了新的方法，字符串連接等。你們?cè)诰W(wǎng)上找到的大部分文章都會(huì)用Babel來(lái)解析ES6，這其實(shí)是個(gè)轉(zhuǎn)譯器，可以將這門(mén)新的JavaScript轉(zhuǎn)換為舊的JavaScript，因?yàn)橛幸恍┡f版的瀏覽器不支持新版的JS。不過(guò)現(xiàn)在先不用擔(dān)心Babel，只需要了解相關(guān)概念，然后用到任何一種支持ES6的最新版瀏覽器上來(lái)練習(xí)一下就行。

現(xiàn)在你應(yīng)該已經(jīng)感覺(jué)到東西像是那么一回事了。如果你按照上面的步驟做下來(lái)的話(huà)應(yīng)該鼓勵(lì)一下。這些是你剛剛學(xué)到的一些最重要的東西。

我應(yīng)該學(xué)jQuery嗎？

曾經(jīng)有一段時(shí)間每個(gè)人都對(duì)jQuery瘋狂，也有充分的理由；這是一個(gè)強(qiáng)大的庫(kù)，在JavaScript基礎(chǔ)上提供了一個(gè)封裝，讓你可以用兼容瀏覽器的方式執(zhí)行任何東西。不過(guò)那些日子已經(jīng)一去不復(fù)返，現(xiàn)在新項(xiàng)目用它已經(jīng)不是很多了，但是仍然還有人在用。所以其實(shí)jQuery對(duì)我們最大的用處其實(shí)看源碼，它對(duì)與dom的操作和交互的源碼其實(shí)對(duì)我們寫(xiě)js代碼是有很大的啟示作用的。

實(shí)踐建議：
你可能隨時(shí)都會(huì)感覺(jué)自己已經(jīng)理解了但是如果不練習(xí)的話(huà)很快就會(huì)忘掉。在按照這份路線(xiàn)圖去學(xué)習(xí)的時(shí)候，要確保盡可能多地去上手實(shí)踐。

繼續(xù)做些響應(yīng)式網(wǎng)站，用JavaScript增加交互性。你可以添加任何感興趣的現(xiàn)有的網(wǎng)頁(yè)上去，但記住要利用上目前學(xué)到的一切。

一旦你制作出了一些網(wǎng)站，接下來(lái)就是開(kāi)始做真正的東西了。你可以到github上面找一些項(xiàng)目打開(kāi)某些開(kāi)源項(xiàng)目的pull請(qǐng)求。以下就是一些可以去嘗試的pull請(qǐng)求：

增強(qiáng)UI，把任何演示頁(yè)做成響應(yīng)式或者改進(jìn)設(shè)計(jì)

看看有什么開(kāi)放的issue是你能夠解決的

重構(gòu)任何你認(rèn)為自己可以改進(jìn)的代碼

相關(guān)筆記：git筆記

在學(xué)習(xí)基礎(chǔ)內(nèi)容之后，還需要了解一些技能，主要如下：

chrome瀏覽器的控制臺(tái)調(diào)試，這個(gè)將會(huì)大大方便修改代碼觀察前后臺(tái)交互

選擇適合的ide,一般來(lái)說(shuō)使用的有sublime,vs,webstorm,vscode等，還有各種配合編程的插件

學(xué)會(huì)git的基本操作，如果想簡(jiǎn)單也可以用git的GUI版本，但其實(shí)學(xué)會(huì)git的基本命令行很有用

相關(guān)筆記：npm&yarn筆記

在此之前，如果你要用到一些外部庫(kù),如插件或外部的桌面小部件的話(huà)，你得手工下載JavaScript和CSS文件并且將它們放到項(xiàng)目里面，然后那些庫(kù)或者插件發(fā)布新版本的時(shí)候，你又得下載更新的文件再放到你的項(xiàng)目里面，這是極其麻煩的事情。

具體來(lái)說(shuō)，包管理器就是可以通過(guò)命令行，幫助你把外部庫(kù)和插件放到你的項(xiàng)目里面并在之后進(jìn)行版本升級(jí)，這樣就不用手工復(fù)制和更新庫(kù)?，F(xiàn)在有的包管理器主要是yarn和npm。這兩個(gè)中npm先于yarn出現(xiàn)但yarn在包的版本管理強(qiáng)于npm,其具體使用幾乎是一樣的，一旦學(xué)會(huì)了使用其中一個(gè)，另一個(gè)自然也不成問(wèn)題。

實(shí)踐建議：
在對(duì)包管理器有了基本了解之后，你就可以去安裝一些外部庫(kù)到你前面制作的一些網(wǎng)頁(yè)上了，比如安裝一些提示插件，當(dāng)用戶(hù)點(diǎn)擊某個(gè)按鈕時(shí)顯示提示信息，或者創(chuàng)建一個(gè)登錄表單用一些表單驗(yàn)證庫(kù)進(jìn)行表單驗(yàn)證，或者試試不同的選項(xiàng)看看如何安裝不同的版本。

注：記得要看看語(yǔ)義版本控制

預(yù)處理器以CSS默認(rèn)不支持的功能豐富了后者?？蛇x的css預(yù)處理語(yǔ)言包括Sass、Less、Stylus等等。我更樂(lè)意選擇Sass。但是PostCSS最近的發(fā)展勢(shì)頭也不錯(cuò)，這屬于一個(gè)錦上添花的東西，有點(diǎn)類(lèi)似于CSS的“Babel”。你可以拿來(lái)獨(dú)立使用或者在Sass的基礎(chǔ)上疊加。

總之，我的建議是先學(xué)Sass，了解less,stylus,等后面有時(shí)間了再看看PostCSS。

CSS框架其實(shí)并不是什么困難的事，邊用邊學(xué)就行了，推薦在Bootstrap、Materialize和Bulma里面選。如果考慮市場(chǎng)需求的話(huà)則是Bootstrap。

隨著你的應(yīng)用不斷膨脹，CSS也開(kāi)始變得混亂難以維系。有多種手段可以對(duì)你的CSS進(jìn)行組織，讓它更好地應(yīng)對(duì)伸縮性，比如OOCSS、SMACSS、SUITCSS、Atomic以及BEM，都是很好的css代碼組織管理的指導(dǎo)實(shí)踐。CSS組織是對(duì)于復(fù)雜龐大的css開(kāi)發(fā)的一個(gè)統(tǒng)一固定的 CSS 代碼組織和管理規(guī)范。包括 CSS 樣式的命名規(guī)則，你應(yīng)該了解它們之間的不同，但是我更偏好BEM。

相關(guān)筆記：ESlint筆記

工具可以幫助你進(jìn)行JavaScript應(yīng)用的構(gòu)建/打包以及開(kāi)發(fā)。這一類(lèi)工具功能主要包括以下三個(gè)方面：

linter（代碼檢查） ， 是指對(duì)代碼進(jìn)行靜態(tài)檢查，如定義變量是否使用，變量命名，方法回調(diào)次數(shù)，注釋是否規(guī)范等，主要對(duì)代碼書(shū)寫(xiě)是否規(guī)范進(jìn)行檢查。linter有很多選項(xiàng)，其中包括ESLint、JSLint、JSHint以及JSCS等。但是目前主要是ESLint用得多。

task runner（自動(dòng)構(gòu)建） ， 即是對(duì)項(xiàng)目代碼進(jìn)行自動(dòng)構(gòu)建編譯為瀏覽器能夠執(zhí)行的東西，如對(duì)typescript和Sass進(jìn)行編譯，使用自動(dòng)化構(gòu)建工具則不需要程序員手動(dòng)進(jìn)行操作。這個(gè)本來(lái)是是很多選項(xiàng)的，包括npm腳本、gulp、grun等等。不過(guò)既然webpack能夠處理gulp能做的大部分東西，所以只有自動(dòng)構(gòu)建中的npm腳本可以用來(lái)對(duì)webpack能做的任務(wù)進(jìn)行自動(dòng)化。不需要學(xué)習(xí)Gulp，如果到后面如果你有點(diǎn)時(shí)間的話(huà)，可以去看看它能否對(duì)你的應(yīng)用有所幫助。

bundler（打包工具） ， 不同的選項(xiàng)包括Parcel、Webpack、Rollup、Browserify等。如果你必須選一個(gè)，目前你可以閉著眼睛選Webpack就是。Rollup也很常用但是主要建議用到庫(kù)上面，至于app，還是以webpack為主。所以可以先學(xué)習(xí)一下webpack，后面如果想的話(huà)再了解一下Rollup。

實(shí)踐建議：
恭喜你！你現(xiàn)在可以稱(chēng)自己為75%的現(xiàn)代JavaScript開(kāi)發(fā)者了。現(xiàn)在繼續(xù)用你學(xué)到的東西做點(diǎn)什么出來(lái)。也許可以做個(gè)庫(kù)將來(lái)用到Sass和JavaScript上。然后用Webpack將Sass轉(zhuǎn)換成CSS，用babel轉(zhuǎn)換成ES6代碼。一旦你做完了再把它發(fā)布到Github和npm上。

其實(shí)在一般開(kāi)發(fā)中，這個(gè)部分往往是緊挨著基礎(chǔ)部分的，之所以放在Sass、構(gòu)建工具和包管理器后面，是因?yàn)樵诳蚣苤心闳紩?huì)用上那些東西。

框架也有好些選項(xiàng)。不過(guò)目前比較常用的是React、Vue和Angular。最近對(duì)React.js的需求越來(lái)越旺盛。然而，前面列的這幾個(gè)你隨便選一個(gè)都不會(huì)錯(cuò)。個(gè)人會(huì)選React或者Angular。不過(guò)特別說(shuō)明一下，作為初學(xué)者也許會(huì)發(fā)現(xiàn)相對(duì)而言Angular會(huì)容易點(diǎn)，因?yàn)樗С謳缀跻磺辛⒓纯捎玫臇|西，比如支持延遲加載的強(qiáng)大路由器，支持?jǐn)r截器的HTTP客戶(hù)端，依賴(lài)注入，組件CSS封裝等而不需要關(guān)心選擇外部庫(kù)的問(wèn)題。不過(guò)React在社區(qū)方面無(wú)疑更有優(yōu)勢(shì)，而且Facebook一直都在努力改進(jìn)它。

一旦選擇框架，當(dāng)然還有其他一些東西需要你學(xué)的。

如學(xué)React的話(huà)，還得學(xué)Redux或者M(jìn)obx去了解狀態(tài)管理，具體選學(xué)什么要取決于應(yīng)用的規(guī)模。Mobx適合中小規(guī)模應(yīng)用，Redux更適合大規(guī)模應(yīng)用。甚至如app允許的話(huà)可能都不需要學(xué)，靠React的原生狀態(tài)管理就行了。

如果選擇Angular，就得用TypeScript（沒(méi)有它你也能開(kāi)發(fā)出Angular應(yīng)用，但是我們還是推薦你使用）和Rx.js，這些除了Angular應(yīng)用以外在其他地方也能用得上。這都是非常強(qiáng)大的庫(kù)，也適合于函數(shù)編程開(kāi)發(fā)。

如果選Vue.js的話(huà)，也許還得學(xué)習(xí)Vuex，這東西有點(diǎn)類(lèi)似于Redux但是是給Vue用的。

需要注意的是，Redux、Mobx以及Rx.js都不是跟這些框架綁死到一起的，你也可以用到各種JavaScript應(yīng)用里面。此外，如果選擇了Angular的話(huà)，確保你用的是Angular 2+而不是Angular 1+,這里對(duì)vue也是一樣的，vue2.0與vue1.0也有細(xì)微的區(qū)別。

實(shí)踐建議：
現(xiàn)在已經(jīng)知道了開(kāi)發(fā)現(xiàn)代JavaScript應(yīng)用所需的一切?？梢赃x擇學(xué)習(xí)的框架做一個(gè)項(xiàng)目出來(lái)以便練習(xí)。

做完之后，再去看看如何衡量和改進(jìn)性能。比方說(shuō)可以看看Interactivity Time、Page Speed Index以及Lighthouse Score等。

一旦完成了上述所有步驟，再來(lái)學(xué)習(xí)一下service worker以及如何制作漸進(jìn)式web應(yīng)用。

漸進(jìn)式web應(yīng)用（PWA）是指可以在任何瀏覽器上執(zhí)行的支持互聯(lián)網(wǎng)的應(yīng)用程序，它是由服務(wù)器端腳本(PHP和ASP)和客戶(hù)端腳本(JavaScript和HTML)組成的。Service Worker則是位于客戶(hù)端（瀏覽器）和服務(wù)器之間的代理。PWA 有以下優(yōu)點(diǎn)：

漸進(jìn)式 - 每個(gè)用戶(hù)都可用而不管選擇什么樣的瀏覽器，因?yàn)樗鼈兪且詽u進(jìn)式增強(qiáng)為核心原則構(gòu)建的。

自適應(yīng) - 適應(yīng)任何形態(tài)：桌面，移動(dòng)設(shè)備，平板電腦或尚未出現(xiàn)的形式。

不依賴(lài)網(wǎng)絡(luò)連接 - Service Workers允許離線(xiàn)工作，或在低質(zhì)量網(wǎng)絡(luò)上工作。

類(lèi)似于應(yīng)用程序 - 使用應(yīng)用程序風(fēng)格的交互和導(dǎo)航，感覺(jué)像一個(gè)應(yīng)用程序。

保持最新 - 得益于service Woker的更新進(jìn)程，應(yīng)用能始終保持最新?tīng)顟B(tài)。

安全 - 借助于HTTPS，防止窺探，并確保內(nèi)容沒(méi)有被篡改

可發(fā)現(xiàn) - 受益于W3C清單和service Worker注冊(cè)作用域，搜索引擎可找到它們，可以識(shí)別為“應(yīng)用程序”。

用戶(hù)粘性 - 通過(guò)推送通知等功能讓用戶(hù)重返應(yīng)用。

可安裝 - 允許用戶(hù)在主屏幕上“保留”他們認(rèn)為最有用的應(yīng)用程序，而無(wú)需經(jīng)過(guò)應(yīng)用程序商店。

可鏈接 - 通過(guò)URL輕松共享，不需要復(fù)雜的安裝。

相關(guān)筆記：QUnit筆記

應(yīng)用測(cè)試有很多工具，各自的用途也不一樣。我本人經(jīng)常是組合使用Jest、Mocha、 Karma及Enzyme。然而，在開(kāi)始選擇工具之前，最好是首先理解有哪些不同的測(cè)試類(lèi)型，看看所有的選項(xiàng)情況，然后從中再選擇最適合需求的一個(gè)。

單元測(cè)試：
JS里面有許多可以供我們選擇進(jìn)行單元測(cè)試的框架。比如，Mocha, Selenium, jasmine 和 QUnit。本文將重點(diǎn)講述Qunit，Qunit 由開(kāi)發(fā)了許多大名鼎鼎的js庫(kù)，包括了的jQuery 、jQuery UI等的Jquery團(tuán)隊(duì)（jQuery team）開(kāi)發(fā)。

靜態(tài)類(lèi)型檢查器幫助給JavaScript增加類(lèi)型檢查。你不需要學(xué)習(xí)這些，不過(guò)這些東西可以賦予你超能力，而且學(xué)習(xí)起來(lái)也很快，幾個(gè)鐘頭就行了。這方面主要有TypeScript 和 Flow。我喜歡TypeScript ，不過(guò)可以?xún)蓚€(gè)都看看再選喜歡的。

目前為止，你所學(xué)到的技能應(yīng)該足夠你找到一個(gè)“前端工程”的位置了。但還可以在選定的任何框架內(nèi)再學(xué)學(xué)服務(wù)器端渲染的知識(shí)。有不同的選項(xiàng)可選，這要取決于你用什么樣的框架。

如果你決定用React，最值得關(guān)注的選項(xiàng)是Next.js 和 After.js。

如果是Angular，可以選Universal。

對(duì)于Vue.js，有 Nuxt.js。

學(xué)習(xí)前端的過(guò)程如果能了解后端是如何運(yùn)作的將會(huì)有利于理清思路，況且現(xiàn)在nodejs發(fā)展日益強(qiáng)大，前端的MVC框架也更偏向邏輯化而不是簡(jiǎn)單的html頁(yè)面，所以做一個(gè)小的全棧項(xiàng)目會(huì)很有意義，可以從nodejs入手，mysql數(shù)據(jù)庫(kù)也比較簡(jiǎn)單輕量，然后可以嘗試了解一下javaweb，或者pyhton的django框架。

小結(jié)

這份路線(xiàn)可能還會(huì)有遺漏的地方，但是足以應(yīng)付任何“前端工程”角色之所需。還要記住的是，關(guān)鍵是盡可能多地練習(xí)。一開(kāi)始你可能會(huì)覺(jué)得很?chē)樔?，總感覺(jué)自己沒(méi)有掌握，但這是正常的，慢慢你就會(huì)覺(jué)得自己變得越來(lái)越好。還有，陷入困境時(shí)別忘了尋求幫助，你會(huì)驚喜地發(fā)現(xiàn)有多少人愿意幫助你的。

英文：Kamran Ahmed 譯文：36氪，轉(zhuǎn)自微信公眾號(hào)，在博主自身理解上有所改動(dòng)，侵刪