特別聲明：此篇文章內(nèi)容來源于@Kamran Ahmed的《Modern Frontend Developer in 2018》一文确徙。著作權(quán)歸作者所有醒串。
首先，你必須要學習一些基礎(chǔ)知識米愿，包括HTML厦凤、CSS和JavaScript的語法知識。
- HTML
HTML是網(wǎng)頁的結(jié)構(gòu)育苟，就好像人類的骨骼系統(tǒng)较鼓，有了它你才能站起來。你必須學習HTML的語法和有關(guān)的所有知識违柏，你最好將目光聚焦在以下幾點:
- 基礎(chǔ)知識和如何寫出語義化的HTML
- 清楚如何將頁面分成多個部分以及組織恰當?shù)腄OM結(jié)構(gòu)
任務(wù)：當你在學習HTML基礎(chǔ)時博烂，至少要做5個頁面。建議你模仿一些網(wǎng)站漱竖。比如github的主頁或者推特的登陸頁面禽篱。你必須要設(shè)計良好的頁面結(jié)構(gòu)，這或許是非常丑陋的馍惹，但是你必須將你主要的注意力放在這里躺率。
- CSS
在掌握了基礎(chǔ)的HTML之后，是時候向網(wǎng)頁添加一些樣式讓它看上去更漂亮了万矾。CSS就是用于美化你的網(wǎng)頁的絕佳利器悼吱。
- 第一件事就是學習CSS的語法并熟練掌握一些常用的屬性
- 學習盒子模型和如何通過Flexbox和Grid進行布局
- 做完上述兩件事情后，嘗試用媒體查詢把頁面做成響應(yīng)式的
任務(wù)：在你掌握CSS的基礎(chǔ)后良狈，你需要做的下一件事情就是用CSS裝飾你學習HTML時做的頁面后添。比如你寫了推特的登陸頁面，你可以用CSS還原成推特的真實頁面薪丁，把你寫的5個HTML都利用上吧遇西。
- JavaScript
JavaScript可以讓你的網(wǎng)頁具有交互性，比如你瀏覽網(wǎng)頁經(jīng)逞鲜龋看到的那些滑塊粱檀、彈出框還有通知欄，它們不需要刷新網(wǎng)頁就能跳出來漫玄，它們?nèi)际怯蒍avaScript弄出來的茄蚯。
- 學習基礎(chǔ)語法和JavaScript的基本結(jié)構(gòu)
- 學習如何操作DOM，比如如何清除頁面的元素、往頁面添加元素和應(yīng)用CSS樣式等等
- 理解一些概念第队，比如閉包、聲明提升和事件冒泡等等
- 學習如何利用XHR或者Ajax發(fā)起HTTP請求刨秆，Ajax就是讓你無需刷新網(wǎng)頁就可以進行交互的工具
- 學完上面的知識凳谦，你下一步應(yīng)該要去學習ES6+的一些新特性，ES6是JavaScript的一個版本衡未，里面包含了很多令人興奮的新特性尸执，比如類、不同的聲明變量方式缓醋、操作數(shù)組的新方法如失、字符級聯(lián)等等。你可以在網(wǎng)上找到很多關(guān)于ES6的文章送粱，他們會使用Babel將新版本的JavaScript代碼轉(zhuǎn)化為舊版本以適應(yīng)一些老版的瀏覽器褪贵。我們在后面還會提到ES6。
現(xiàn)在你應(yīng)該感覺到一點緊張了吧抗俄？不妨回顧一下脆丁，以上這些都是你學到的最重要的知識。
應(yīng)該繼續(xù)使用JQuery嗎动雹？
過去有一段時間槽卫，每一個網(wǎng)頁開發(fā)者都為JQuery而狂熱。因為JQuery是一個功能十分強大的庫胰蝠，它封裝了一系列Javascript操作歼培，使用起來十分方便而且兼容性極強。但是茸塞，到了今天躲庄，雖然仍然還有很多人在使用JQuery，但很多的新項目都放棄使用JQuery了翔横。事實上读跷，JQuery十分簡單，你不用特意去學習它禾唁，但了解一些JQuery的知識會對你幫助很大效览。
實踐
我說過很多次了，但我必須再強調(diào)一次荡短，知識來源于實踐丐枉。只是看書或者看一些視頻你可能覺得理解了，但這些都很快會從你的腦袋中消失如果你沒有用之于實踐掘托，所以瘦锹，你要盡可能的多嘗試，將你腦袋中的東西變成代碼。
做一些響應(yīng)式的網(wǎng)頁并利用JavaScript增加交互性弯院，你可以復(fù)制現(xiàn)有的你覺得很有趣的網(wǎng)站辱士。
完成上面的工作后，你已經(jīng)可以去了解真實的企業(yè)開發(fā)過程了听绳。你可以去github上面找一些項目颂碘，然后自己開源幾個項目，下面是一些建議：
- 把UI做好椅挣，提高設(shè)計水平并且全部做成響應(yīng)式
- 認真回答每個你力所能及的issue
- 重構(gòu)你認為可以改進的項目
要使用Github头岔，我推薦你先去學習一下git，git對你幫助將會非常大鼠证。
包管理器
在此之前峡竣，如果你有用過一些外部的庫，比如一些插件或者外部小組件量九，你可能都是手動下載這些JavaScript和CSS文件然后把它們放進你的項目目錄中适掰。當這些庫更新的時候，你不得不去下載新的版本然后再次放進你的項目替換掉原來的娩鹉，這非常的麻煩攻谁。包管理器可以幫助我們解決這個問題，它可以將外部的文件引進你的項目弯予，所以你不需要擔心上述的問題戚宦。目前比較受歡迎的兩個包管理器是yarn和npm，它們兩個非常相似锈嫩，只需要安裝啟動受楼，你可以任意選擇一個去學習。
當你對包管理器有一些初步的了解后呼寸，你可以嘗試去安裝一些外部庫到你前面制作的網(wǎng)頁上艳汽，這些實踐會對你的學習有很大的幫助。
CSS預(yù)處理器
預(yù)處理器提供了CSS本身并不具備的功能对雪，比如變量河狐、宏和mixin等等。現(xiàn)在有很多種CSS預(yù)處理器瑟捣，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以提高其擴展和可復(fù)用的能力了。目前能夠幫助你完成這個目標的有 OOCSS磷蜀、SMACSS召耘、 SUITCSS、 Atomic 和
BEM,我個人比較鐘意BEM褐隆。
構(gòu)建工具
工具可以幫助你構(gòu)建污它、打包和生成JavaScript應(yīng)用 。目前主要有代碼檢測庶弃，自動化和打包的工具衫贬。
關(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)代前端工程師了》嫱希現(xiàn)在你要做的就是繼續(xù)前進，你有必要去做一些項目祸轮，依靠目前為止你學習到的東西兽埃。你可以用JavaScript和Sass創(chuàng)造幾個庫，然后利用babel編譯Sass和es6代碼适袜。完成上述這些工作后柄错，別忘了把你的成果發(fā)到github和npm上。
選擇一門框架
按照以前規(guī)律苦酱，我會把這個放到學完基礎(chǔ)知識之后售貌，但我選擇放到當你學完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塔次。最重要的方篮，不要因為名氣而選擇一門框架，你應(yīng)該綜合比較励负，選擇目前最匹配你的需求的一款藕溅。
當你確定要選擇哪一門框架后，你就去學習對應(yīng)的知識了继榆。如果你選擇的是React,你需要去學習Redux或者Mobx用于狀態(tài)管理巾表，具體選擇那一個根據(jù)你的應(yīng)用的大小汁掠。Mobx適用于小型或中等的應(yīng)用，Redux就比較多用于大型的可伸縮的應(yīng)用集币。你甚至不需要學習這些考阱，根據(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應(yīng)用的知識了，是時候展示真正的技術(shù)了科吭。你需要做一款應(yīng)用昏滴，相信你可以找到很多創(chuàng)意。做完之后对人，先別急著高興谣殊，再回頭看一下代碼，有哪一些是可以改進的牺弄？比如交互時間姻几、頁面相應(yīng)速度等等...
測試
有很多工具可以幫你完成特定的測試任務(wù)，我通常會結(jié)合使用Jest势告、Karma蛇捌、Mocha和Enzyme。在你使用這些工具之前咱台，你最好先了解它們其中的差異络拌，弄清楚可以選擇的選項然后選擇最適合你的。An Overview of JavaScript Testing in 2018
靜態(tài)類型檢查器
靜態(tài)類型檢查器可以幫助你對Javascript進行類型檢查回溺，你只需要很短的時間就能掌握這方面的知識春贸，它會對你的工作幫助非常大混萝。在這方面，TypeScript和Flow是比較好的選擇祥诽，我個人比較喜歡TypeScript譬圣，但Flow也不錯。
服務(wù)端渲染
到現(xiàn)在雄坪，你掌握的知識已經(jīng)讓你能夠勝任任何一份前端工程師的工作了厘熟，但不要停止你的腳步。
你需要去了解你選擇的框架是如何進行服務(wù)端渲染的维哈，它們有很大的不同绳姨。比如你選擇的是React，對應(yīng)的就是Next.js和After.js,Angular 對應(yīng)的是Universal阔挠，Vue對應(yīng)的是Nuxt.js飘庄。
結(jié)尾
或許還有什么是我忘了寫的，但我想說最重要的是盡可能多的敲代碼购撼，你需要不斷地實踐跪削。一開始這可能會很辛苦，你可能會覺得很難掌握迂求，但這是正常的碾盐，你會變得越來越好。最后是別忘了揩局，當你陷入困境時毫玖，積極地去尋求幫助，你會發(fā)現(xiàn)很多人都樂意幫助你解決難題凌盯，至少我是其中的一個付枫，加油！
