近兩年來(lái)，前端開(kāi)發(fā)工程師越來(lái)越火了，薪資待遇也快接近后端開(kāi)發(fā)工程師了。

企業(yè)對(duì)于前端開(kāi)發(fā)的需求量也越來(lái)越高，PC 端、手機(jī)端、桌面端、智能手表端等等設(shè)備都離不開(kāi)前端的身影

今天來(lái)給大家講講，在2020年，我們學(xué)習(xí)前端開(kāi)發(fā)，應(yīng)該學(xué)什么？如何才能高效學(xué)會(huì)前端開(kāi)發(fā)？

零基礎(chǔ)入門(mén)

正所謂萬(wàn)丈高樓平地起，我們不管是學(xué)任何一個(gè)技術(shù)，都是要從零基礎(chǔ)開(kāi)始的，學(xué)習(xí)前端開(kāi)發(fā)也是同樣的。

做前端開(kāi)發(fā)，就是做軟件開(kāi)發(fā)工程師，也就是從事編程語(yǔ)言的開(kāi)發(fā)工作，必須先從編程語(yǔ)言的基礎(chǔ)開(kāi)始學(xué)期，通過(guò)編程語(yǔ)言編譯，渲染出產(chǎn)品效果。

在WEB前端開(kāi)發(fā)里，最基礎(chǔ)的語(yǔ)法，

是由前端開(kāi)發(fā)里最基本的3個(gè)語(yǔ)言，HTML+CSS+JavaScript組成

網(wǎng)頁(yè)布局基礎(chǔ)：HTML+CSS

HTML就是超文本標(biāo)記語(yǔ)言，組成網(wǎng)頁(yè)內(nèi)容的最基本語(yǔ)言。你可以直接說(shuō)他是網(wǎng)頁(yè)的骨架，在網(wǎng)頁(yè)中的圖片，文字，視頻，音頻，程序都需要由HTML引入到網(wǎng)頁(yè)中，才能呈現(xiàn)出效果。

做WEB網(wǎng)頁(yè)，光是靠HTML是遠(yuǎn)遠(yuǎn)不夠的，因?yàn)橹皇怯辛藘?nèi)容，但是沒(méi)有布局，就像是人只是有了骨架，但是沒(méi)有皮膚，看不下去啊。

因?yàn)橹皇荋TML的話，只能用Table做布局才能勉強(qiáng)做出個(gè)成型的網(wǎng)頁(yè)來(lái)。但是從Web2.0時(shí)代開(kāi)始，都是盒子模型布局法了，也就是用DIV+CSS來(lái)實(shí)現(xiàn)布局了。

什么是CSS？CSS就是層疊樣式表。通過(guò)層疊樣式表的樣式屬性值，來(lái)對(duì)HTML標(biāo)簽進(jìn)行樣式布局，讓網(wǎng)頁(yè)可以呈現(xiàn)更佳的布局效果。使用CSS樣式對(duì)網(wǎng)頁(yè)標(biāo)簽進(jìn)行對(duì)應(yīng)的布局實(shí)現(xiàn)是目前做前端開(kāi)發(fā)布局的正確方式。

零基礎(chǔ)在剛剛開(kāi)始的階段，大家學(xué)習(xí)的布局方法，基本都是以px為單位的靜態(tài)布局方法。

先熟悉好CSS的布局方法，理解好CSS的定位、浮動(dòng)、布局，先給自己一個(gè)小目標(biāo)，做一個(gè)簡(jiǎn)單的電商網(wǎng)頁(yè)的基本結(jié)構(gòu)出來(lái)，只是布局結(jié)構(gòu)，不需要特效，不需要交互。

瀏覽器腳本語(yǔ)言：JavaScript

JavaScript是我們零基礎(chǔ)學(xué)習(xí)前端開(kāi)發(fā)中最重要的一個(gè)學(xué)習(xí)內(nèi)容了，在前端開(kāi)發(fā)的技術(shù)里，框架、插件、類庫(kù)都和JavaScript息息相關(guān)，同時(shí)這個(gè)也是大家經(jīng)常會(huì)掉坑里的一個(gè)學(xué)習(xí)難題，很多同學(xué)因?yàn)镴avaScript學(xué)的不扎實(shí)，導(dǎo)致后面的知識(shí)點(diǎn)都處處是坑。

JavaScript現(xiàn)在可以說(shuō)是互聯(lián)網(wǎng)時(shí)代使用率最高的腳本語(yǔ)言了，在網(wǎng)頁(yè)中，所有的數(shù)據(jù)渲染，特效的交互都需要利用JavaScript，來(lái)影響瀏覽器的顯示。

JavaScript不只是開(kāi)發(fā)網(wǎng)頁(yè)特效和渲染數(shù)據(jù)的重要內(nèi)容，在學(xué)習(xí)前端開(kāi)發(fā)的后期，大量使用算法和框架的時(shí)候，對(duì)JavaScript基礎(chǔ)的考驗(yàn)也是很多的。

在零基礎(chǔ)學(xué)習(xí)JavaScript的這部分，我們主要還是把JavaScript的基礎(chǔ)邏輯學(xué)好，把最基本的交互原理理解到位。把原理分析清楚，真的理解語(yǔ)法，后面要寫(xiě)多炫酷的交互動(dòng)畫(huà)都是有如神助了！

JavaScript經(jīng)典類庫(kù)jQuery

jQuery類庫(kù)就是在類庫(kù)里面封裝好了很多JavaScript的事件方法。jQuery通過(guò)封裝，減輕了遍歷、對(duì)象選擇等等很多的問(wèn)題。把網(wǎng)頁(yè)特效的實(shí)現(xiàn)變得簡(jiǎn)單化，通過(guò)調(diào)用方法就可以達(dá)到快速的完成網(wǎng)頁(yè)的特效，比如說(shuō)輪播圖、手風(fēng)琴菜單、旋轉(zhuǎn)木馬、放大鏡等等這些特效。

我們學(xué)習(xí)jQuery，需要達(dá)到的目標(biāo)是，能熟悉JavaScript的開(kāi)發(fā)邏輯，利用jQuery提供的方法，快速的完成網(wǎng)頁(yè)特效開(kāi)發(fā)，比如說(shuō)輪播圖、手風(fēng)琴菜單、tab切換、放大鏡等等這些特效。能完成一個(gè)電商網(wǎng)站的布局+特效開(kāi)發(fā)是最基本的要求了。

講到這里，前面這些就是零基礎(chǔ)學(xué)習(xí)必備的一些基礎(chǔ)內(nèi)容，在入門(mén)前端開(kāi)發(fā)最基本需要掌握的東西，把基礎(chǔ)理解好，才能為后面的學(xué)習(xí)做更多的準(zhǔn)備。

多終端開(kāi)發(fā)學(xué)習(xí)

現(xiàn)在是移動(dòng)互聯(lián)網(wǎng)時(shí)代，互聯(lián)網(wǎng)產(chǎn)品都是偏向手機(jī)移動(dòng)端的居多，所以在開(kāi)發(fā)中，需要面向手機(jī)開(kāi)發(fā)的產(chǎn)品需求也非常重要了。我們需要學(xué)習(xí)掌握包括，手機(jī)移動(dòng)端網(wǎng)頁(yè)，微信端網(wǎng)頁(yè)，H5動(dòng)畫(huà)開(kāi)發(fā)，小程序開(kāi)發(fā)等等。

Web-App（WEB移動(dòng)端開(kāi)發(fā)）

WebApp也就是我們常見(jiàn)的手機(jī)瀏覽器（以及內(nèi)置瀏覽器，比如微信）打開(kāi)的大型移動(dòng)端網(wǎng)頁(yè)。比如電商網(wǎng)站，功能性網(wǎng)站，后臺(tái)管理系統(tǒng)，在布局和功能上都有APP的效果。

想做好Web-App開(kāi)發(fā)，很多人肯定會(huì)說(shuō)響應(yīng)式布局是必學(xué)的，但是前端開(kāi)發(fā)是有5種布局法的，除了出名的響應(yīng)式，還有在移動(dòng)端最重要的彈性布局法，也就是很多人頭疼的rem布局。

小程序

這個(gè)也不用多說(shuō)，現(xiàn)在可以說(shuō)是非?；鸬?，各大平臺(tái)都有在做自己的小程序，各種砍價(jià)，搶票，電商，游戲都有運(yùn)用。這個(gè)以微信小程序?yàn)槔?，主要是微信團(tuán)隊(duì)基于前端基礎(chǔ)來(lái)做的封裝語(yǔ)法，主要的還是ES語(yǔ)法。小程序目前很多公司都是招聘前端開(kāi)發(fā)，目前還沒(méi)有獨(dú)立的小程序開(kāi)發(fā)工程師，所以小程序可以說(shuō)是前端工程師高薪就業(yè)的加分技能，換句話說(shuō)就是成熟開(kāi)發(fā)必備了。

如果你需要前端開(kāi)發(fā)完整的學(xué)習(xí)路線，可以私聊我，回復(fù)【前端開(kāi)發(fā)學(xué)習(xí)路線】

前端主流框架

現(xiàn)在的前端開(kāi)發(fā)工程師工作，已經(jīng)走向了工程化開(kāi)發(fā)，開(kāi)發(fā)難度和項(xiàng)目復(fù)雜程度都比以前高了，現(xiàn)在企業(yè)中月薪過(guò)萬(wàn)的崗位，對(duì)框架技術(shù)基本都是剛需了，前端3大框架：VUE、Angular、React是成為專業(yè)開(kāi)發(fā)工程師的必備標(biāo)準(zhǔn)了。

基礎(chǔ)語(yǔ)法都可以寫(xiě)的前端，為什么還要框架？

很多小白朋友是不懂什么是框架的，只聽(tīng)過(guò)jQuery這些東西，以為就是框架。或者認(rèn)為框架就是加速開(kāi)發(fā)，覺(jué)得這些庫(kù)、插件就能完成框架的工作了。

其實(shí)框架的出現(xiàn)，是改變前端地位的重要標(biāo)志。最重要的表現(xiàn)，就是前后端分離，在前后端分離之前，很多后端開(kāi)發(fā)都是又當(dāng)?shù)之?dāng)媽的，效果不好效率也不高，我就是在后端出身，深知痛苦。

現(xiàn)在的前端項(xiàng)目，比以前是更加復(fù)雜化、多樣化了。項(xiàng)目復(fù)雜了，問(wèn)題也多了。

那框架到底解決了什么問(wèn)題？

解決重復(fù)引用外部js，以用jQuery開(kāi)發(fā)為例，很多時(shí)候都是不能單一完成一個(gè)項(xiàng)目的，還需要引用很多的第三方插件和庫(kù)，導(dǎo)致會(huì)一個(gè)項(xiàng)目引入很多外部JS文件。

這樣不僅讓代碼變得雜亂，而且很影響打開(kāi)速度。但是用框架呢，以VUE為例，一般會(huì)和構(gòu)建工具配合，然后就是一個(gè)入口文件就可以完成了，在運(yùn)行時(shí)候就在入口引入一次，一勞永逸。

使用組件化開(kāi)發(fā)，組件是前端框架里非常強(qiáng)大的功能之一，它可以擴(kuò)展你的HTML，封裝可以重用的代碼塊，比如你的輪播圖、tab切換、頁(yè)面頭部、頁(yè)面底部等等。

這種獨(dú)立的組件具有了結(jié)構(gòu)（html），表現(xiàn)（css）和行為（js）完整的功能，很大程度的節(jié)省了代碼量，提高了代碼的復(fù)用性。特別是團(tuán)隊(duì)合作的時(shí)候，可以很好的提高使用效率。

減少開(kāi)發(fā)周期，如果你覺(jué)得jQuery可以減少開(kāi)發(fā)周期了，那其實(shí)框架可以比庫(kù)更快。比如說(shuō)使用jQuery開(kāi)發(fā)的時(shí)候，很多時(shí)候是需要頻繁去操作DOM，每次效果都要去查找DOM，這樣就顯得很繁瑣了。使用框架的時(shí)候，很多功能都得到了封裝，比如說(shuō)很多指令都有數(shù)據(jù)綁定，數(shù)據(jù)格式化這些功能。這樣更多時(shí)候，我們開(kāi)發(fā)的時(shí)候只需要關(guān)注數(shù)據(jù)的邏輯就行了。

前端開(kāi)發(fā)學(xué)習(xí)不是單一的，內(nèi)容比較多，同樣應(yīng)用的場(chǎng)景也非常多。如果你想從事前端開(kāi)發(fā)工作，就要更急專心和努力，堅(jiān)持方向不動(dòng)搖！