特別聲明：此篇文章內(nèi)容來源于@Kamran Ahmed的《Modern Frontend Developer in 2018》一文。著作權(quán)歸作者所有。
首先，你必須要學習一些基礎知識，包括HTML、CSS和JavaScript的語法知識。
- HTML
HTML是網(wǎng)頁的結(jié)構(gòu)，就好像人類的骨骼系統(tǒng)，有了它你才能站起來。你必須學習HTML的語法和有關(guān)的所有知識，你最好將目光聚焦在以下幾點:
- 基礎知識和如何寫出語義化的HTML
- 清楚如何將頁面分成多個部分以及組織恰當?shù)腄OM結(jié)構(gòu)
任務：當你在學習HTML基礎時，至少要做5個頁面。建議你模仿一些網(wǎng)站。比如github的主頁或者推特的登陸頁面。你必須要設計良好的頁面結(jié)構(gòu)，這或許是非常丑陋的，但是你必須將你主要的注意力放在這里。
- CSS
在掌握了基礎的HTML之后，是時候向網(wǎng)頁添加一些樣式讓它看上去更漂亮了。CSS就是用于美化你的網(wǎng)頁的絕佳利器。
- 第一件事就是學習CSS的語法并熟練掌握一些常用的屬性
- 學習盒子模型和如何通過Flexbox和Grid進行布局
- 做完上述兩件事情后，嘗試用媒體查詢把頁面做成響應式的
任務：在你掌握CSS的基礎后，你需要做的下一件事情就是用CSS裝飾你學習HTML時做的頁面。比如你寫了推特的登陸頁面，你可以用CSS還原成推特的真實頁面，把你寫的5個HTML都利用上吧。
- JavaScript
JavaScript可以讓你的網(wǎng)頁具有交互性，比如你瀏覽網(wǎng)頁經(jīng)?？吹降哪切┗瑝K、彈出框還有通知欄，它們不需要刷新網(wǎng)頁就能跳出來，它們?nèi)际怯蒍avaScript弄出來的。
- 學習基礎語法和JavaScript的基本結(jié)構(gòu)
- 學習如何操作DOM，比如如何清除頁面的元素、往頁面添加元素和應用CSS樣式等等
- 理解一些概念，比如閉包、聲明提升和事件冒泡等等
- 學習如何利用XHR或者Ajax發(fā)起HTTP請求，Ajax就是讓你無需刷新網(wǎng)頁就可以進行交互的工具
- 學完上面的知識，你下一步應該要去學習ES6+的一些新特性，ES6是JavaScript的一個版本，里面包含了很多令人興奮的新特性，比如類、不同的聲明變量方式、操作數(shù)組的新方法、字符級聯(lián)等等。你可以在網(wǎng)上找到很多關(guān)于ES6的文章，他們會使用Babel將新版本的JavaScript代碼轉(zhuǎn)化為舊版本以適應一些老版的瀏覽器。我們在后面還會提到ES6。
現(xiàn)在你應該感覺到一點緊張了吧？不妨回顧一下，以上這些都是你學到的最重要的知識。
應該繼續(xù)使用JQuery嗎？
過去有一段時間，每一個網(wǎng)頁開發(fā)者都為JQuery而狂熱。因為JQuery是一個功能十分強大的庫，它封裝了一系列Javascript操作，使用起來十分方便而且兼容性極強。但是，到了今天，雖然仍然還有很多人在使用JQuery，但很多的新項目都放棄使用JQuery了。事實上，JQuery十分簡單，你不用特意去學習它，但了解一些JQuery的知識會對你幫助很大。
實踐
我說過很多次了，但我必須再強調(diào)一次，知識來源于實踐。只是看書或者看一些視頻你可能覺得理解了，但這些都很快會從你的腦袋中消失如果你沒有用之于實踐，所以，你要盡可能的多嘗試，將你腦袋中的東西變成代碼。
做一些響應式的網(wǎng)頁并利用JavaScript增加交互性，你可以復制現(xiàn)有的你覺得很有趣的網(wǎng)站。
完成上面的工作后，你已經(jīng)可以去了解真實的企業(yè)開發(fā)過程了。你可以去github上面找一些項目，然后自己開源幾個項目，下面是一些建議：
- 把UI做好，提高設計水平并且全部做成響應式
- 認真回答每個你力所能及的issue
- 重構(gòu)你認為可以改進的項目
要使用Github，我推薦你先去學習一下git，git對你幫助將會非常大。
包管理器
在此之前，如果你有用過一些外部的庫，比如一些插件或者外部小組件，你可能都是手動下載這些JavaScript和CSS文件然后把它們放進你的項目目錄中。當這些庫更新的時候，你不得不去下載新的版本然后再次放進你的項目替換掉原來的，這非常的麻煩。包管理器可以幫助我們解決這個問題，它可以將外部的文件引進你的項目，所以你不需要擔心上述的問題。目前比較受歡迎的兩個包管理器是yarn和npm，它們兩個非常相似，只需要安裝啟動，你可以任意選擇一個去學習。
當你對包管理器有一些初步的了解后，你可以嘗試去安裝一些外部庫到你前面制作的網(wǎng)頁上，這些實踐會對你的學習有很大的幫助。
CSS預處理器
預處理器提供了CSS本身并不具備的功能，比如變量、宏和mixin等等。現(xiàn)在有很多種CSS預處理器，Sass、Less...,如果讓我選擇，我會優(yōu)先考慮Sass,但最近PostCSS風頭正盛，它是作用于CSS的“Babel”，值得我們關(guān)注。不過我會建議你先學習Sass，如果你還有更多時間，可以嘗試去了解一下PostCSS。
CSS框架
你不用特意去學習一門CSS框架，但如果你有需要的話，現(xiàn)在比較好用的CSS框架有Bootstrap、Materialize和Bulma，我會推薦優(yōu)先Bootstrap。
CSS架構(gòu)
隨著你的項目越來越大，你的CSS文件也將會變得越來越混亂、臃腫。是時候去學習如何組織你的CSS以提高其擴展和可復用的能力了。目前能夠幫助你完成這個目標的有 OOCSS、SMACSS、 SUITCSS、 Atomic 和
BEM,我個人比較鐘意BEM。
構(gòu)建工具
工具可以幫助你構(gòu)建、打包和生成JavaScript應用 。目前主要有代碼檢測，自動化和打包的工具。
關(guān)于自動化來說，有很多種選擇，包括npm scripts、gulp、grunt 》...,但是在現(xiàn)在，webpack毫無疑問是你的首選。webpack具有g(shù)ulp絕大部分的功能，利用webpack就可以完成你的自動構(gòu)建環(huán)境。
有很多工具可以幫助你完成代碼檢測的工具，有ESLint、JSLint、 JSHint 和JSCS，目前ESLing是最受歡迎的。
關(guān)于代碼打包工具，你的選擇也很多，包括 Parcel、Webpack、 Rollup、Browserify等。毫無疑問我會推薦webpack。
實踐時間—創(chuàng)造
恭喜你，你已經(jīng)可以成為75%的現(xiàn)代前端工程師了?，F(xiàn)在你要做的就是繼續(xù)前進，你有必要去做一些項目，依靠目前為止你學習到的東西。你可以用JavaScript和Sass創(chuàng)造幾個庫，然后利用babel編譯Sass和es6代碼。完成上述這些工作后，別忘了把你的成果發(fā)到github和npm上。
選擇一門框架
按照以前規(guī)律，我會把這個放到學完基礎知識之后，但我選擇放到當你學完Sass和構(gòu)建工具的后面，因為缺少了上面的知識先學框架，可能會把你逼瘋。
關(guān)于javascript框架，目前比較流行的有React、Vue和Angular。最近React的呼聲很高，但是不需要緊張，選擇上面三者之一都沒問題。但就我個人而言，我會推薦React和Angular多一點。簡要說明一下，作為一個新手，你可能會覺得Angular相對來說比較容易一點，因為它包含了大部分你需要的功能，路由、懶加載、HTTP攔截、依賴注入、CSS組件構(gòu)建等等，你不需要引入任何外部的庫就可以使用這些功能。但是React有的優(yōu)勢是，F(xiàn)acebook一直致力于改進發(fā)展React。最重要的，不要因為名氣而選擇一門框架，你應該綜合比較，選擇目前最匹配你的需求的一款。
當你確定要選擇哪一門框架后，你就去學習對應的知識了。如果你選擇的是React,你需要去學習Redux或者Mobx用于狀態(tài)管理，具體選擇那一個根據(jù)你的應用的大小。Mobx適用于小型或中等的應用，Redux就比較多用于大型的可伸縮的應用。你甚至不需要學習這些，根據(jù)React原生的狀態(tài)管理就可以完成你的工作。
如果你決定要使用Angular，你需要去學習TypeScript（原生也可以，但Angular首推TypeScript），你還需要學習RX.js，它非常強大，甚至支持函數(shù)式編程。
如果你的選擇是Vue.js，你可能需要學習Vuex，它和Redux非常像。
需要關(guān)注的是，Redux，Mobx和Rx.js的使用并不局限于這些框架，你可以在你的原生js中使用。最后，如果你選擇的是Angular的，必須確保是Angular 2+而不是Angular 1+。
實踐時間
現(xiàn)在你已經(jīng)知道所有有關(guān)構(gòu)建JavaScript應用的知識了，是時候展示真正的技術(shù)了。你需要做一款應用，相信你可以找到很多創(chuàng)意。做完之后，先別急著高興，再回頭看一下代碼，有哪一些是可以改進的？比如交互時間、頁面相應速度等等...
測試
有很多工具可以幫你完成特定的測試任務，我通常會結(jié)合使用Jest、Karma、Mocha和Enzyme。在你使用這些工具之前，你最好先了解它們其中的差異，弄清楚可以選擇的選項然后選擇最適合你的。An Overview of JavaScript Testing in 2018
靜態(tài)類型檢查器
靜態(tài)類型檢查器可以幫助你對Javascript進行類型檢查，你只需要很短的時間就能掌握這方面的知識，它會對你的工作幫助非常大。在這方面，TypeScript和Flow是比較好的選擇，我個人比較喜歡TypeScript，但Flow也不錯。
服務端渲染
到現(xiàn)在，你掌握的知識已經(jīng)讓你能夠勝任任何一份前端工程師的工作了，但不要停止你的腳步。
你需要去了解你選擇的框架是如何進行服務端渲染的，它們有很大的不同。比如你選擇的是React，對應的就是Next.js和After.js,Angular 對應的是Universal，Vue對應的是Nuxt.js。
結(jié)尾
或許還有什么是我忘了寫的，但我想說最重要的是盡可能多的敲代碼，你需要不斷地實踐。一開始這可能會很辛苦，你可能會覺得很難掌握，但這是正常的，你會變得越來越好。最后是別忘了，當你陷入困境時，積極地去尋求幫助，你會發(fā)現(xiàn)很多人都樂意幫助你解決難題，至少我是其中的一個，加油！
