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

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

今天來給大家講講，在2020年，我們學習前端開發(fā)，應該學什么？如何才能高效學會前端開發(fā)？

零基礎入門

正所謂萬丈高樓平地起，我們不管是學任何一個技術，都是要從零基礎開始的，學習前端開發(fā)也是同樣的。

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

在WEB前端開發(fā)里，最基礎的語法，

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

網頁布局基礎：HTML+CSS

HTML就是超文本標記語言，組成網頁內容的最基本語言。你可以直接說他是網頁的骨架，在網頁中的圖片，文字，視頻，音頻，程序都需要由HTML引入到網頁中，才能呈現出效果。

做WEB網頁，光是靠HTML是遠遠不夠的，因為只是有了內容，但是沒有布局，就像是人只是有了骨架，但是沒有皮膚，看不下去啊。

因為只是HTML的話，只能用Table做布局才能勉強做出個成型的網頁來。但是從Web2.0時代開始，都是盒子模型布局法了，也就是用DIV+CSS來實現布局了。

什么是CSS？CSS就是層疊樣式表。通過層疊樣式表的樣式屬性值，來對HTML標簽進行樣式布局，讓網頁可以呈現更佳的布局效果。使用CSS樣式對網頁標簽進行對應的布局實現是目前做前端開發(fā)布局的正確方式。

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

先熟悉好CSS的布局方法，理解好CSS的定位、浮動、布局，先給自己一個小目標，做一個簡單的電商網頁的基本結構出來，只是布局結構，不需要特效，不需要交互。

瀏覽器腳本語言：JavaScript

JavaScript是我們零基礎學習前端開發(fā)中最重要的一個學習內容了，在前端開發(fā)的技術里，框架、插件、類庫都和JavaScript息息相關，同時這個也是大家經常會掉坑里的一個學習難題，很多同學因為JavaScript學的不扎實，導致后面的知識點都處處是坑。

JavaScript現在可以說是互聯(lián)網時代使用率最高的腳本語言了，在網頁中，所有的數據渲染，特效的交互都需要利用JavaScript，來影響瀏覽器的顯示。

JavaScript不只是開發(fā)網頁特效和渲染數據的重要內容，在學習前端開發(fā)的后期，大量使用算法和框架的時候，對JavaScript基礎的考驗也是很多的。

在零基礎學習JavaScript的這部分，我們主要還是把JavaScript的基礎邏輯學好，把最基本的交互原理理解到位。把原理分析清楚，真的理解語法，后面要寫多炫酷的交互動畫都是有如神助了！

JavaScript經典類庫jQuery

jQuery類庫就是在類庫里面封裝好了很多JavaScript的事件方法。jQuery通過封裝，減輕了遍歷、對象選擇等等很多的問題。把網頁特效的實現變得簡單化，通過調用方法就可以達到快速的完成網頁的特效，比如說輪播圖、手風琴菜單、旋轉木馬、放大鏡等等這些特效。

我們學習jQuery，需要達到的目標是，能熟悉JavaScript的開發(fā)邏輯，利用jQuery提供的方法，快速的完成網頁特效開發(fā)，比如說輪播圖、手風琴菜單、tab切換、放大鏡等等這些特效。能完成一個電商網站的布局+特效開發(fā)是最基本的要求了。

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

多終端開發(fā)學習

現在是移動互聯(lián)網時代，互聯(lián)網產品都是偏向手機移動端的居多，所以在開發(fā)中，需要面向手機開發(fā)的產品需求也非常重要了。我們需要學習掌握包括，手機移動端網頁，微信端網頁，H5動畫開發(fā)，小程序開發(fā)等等。

Web-App（WEB移動端開發(fā)）

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

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

小程序

這個也不用多說，現在可以說是非?；鸬模鞔笃脚_都有在做自己的小程序，各種砍價，搶票，電商，游戲都有運用。這個以微信小程序為例，主要是微信團隊基于前端基礎來做的封裝語法，主要的還是ES語法。小程序目前很多公司都是招聘前端開發(fā)，目前還沒有獨立的小程序開發(fā)工程師，所以小程序可以說是前端工程師高薪就業(yè)的加分技能，換句話說就是成熟開發(fā)必備了。

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

前端主流框架

現在的前端開發(fā)工程師工作，已經走向了工程化開發(fā)，開發(fā)難度和項目復雜程度都比以前高了，現在企業(yè)中月薪過萬的崗位，對框架技術基本都是剛需了，前端3大框架：VUE、Angular、React是成為專業(yè)開發(fā)工程師的必備標準了。

基礎語法都可以寫的前端，為什么還要框架？

很多小白朋友是不懂什么是框架的，只聽過jQuery這些東西，以為就是框架?；蛘哒J為框架就是加速開發(fā)，覺得這些庫、插件就能完成框架的工作了。

其實框架的出現，是改變前端地位的重要標志。最重要的表現，就是前后端分離，在前后端分離之前，很多后端開發(fā)都是又當爹又當媽的，效果不好效率也不高，我就是在后端出身，深知痛苦。

現在的前端項目，比以前是更加復雜化、多樣化了。項目復雜了，問題也多了。

那框架到底解決了什么問題？

解決重復引用外部js，以用jQuery開發(fā)為例，很多時候都是不能單一完成一個項目的，還需要引用很多的第三方插件和庫，導致會一個項目引入很多外部JS文件。

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

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

這種獨立的組件具有了結構（html），表現（css）和行為（js）完整的功能，很大程度的節(jié)省了代碼量，提高了代碼的復用性。特別是團隊合作的時候，可以很好的提高使用效率。

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

前端開發(fā)學習不是單一的，內容比較多，同樣應用的場景也非常多。如果你想從事前端開發(fā)工作，就要更急專心和努力，堅持方向不動搖！