在初學(xué)者心目中web前端開發(fā)就是學(xué)習(xí)html、css、JavaScript;如果是在2016、2017年是的前端的小伙伴只需要掌握這些就夠了，但是隨著行業(yè)的不斷發(fā)展，前端技術(shù)得到廣泛的應(yīng)用，前端崗位從web前端開發(fā)到前端全棧開發(fā)，對(duì)技術(shù)知識(shí)點(diǎn)的要求也在不斷的變化，那么web前端開發(fā)需要掌握哪些技術(shù)呢?華清遠(yuǎn)見的小編姐姐為你詳細(xì)描述：

具體來說前端可以分為以下四個(gè)大的學(xué)習(xí)模塊，循序漸進(jìn)的開始學(xué)習(xí)：

1、HTML+CSS(基礎(chǔ))

目標(biāo)與能力界定：與UI對(duì)接，能100%重構(gòu)網(wǎng)站靜態(tài)頁面的開發(fā)，為后期編寫頁面邏輯、動(dòng)態(tài)效果打基礎(chǔ)

html、css這部分是屬于公共基礎(chǔ)部分，不僅學(xué)習(xí)前端必須學(xué)習(xí)，就算從事Java開發(fā)、web安全等崗位這都是必須要掌握的基礎(chǔ)技術(shù)。而這部分的學(xué)習(xí)內(nèi)容相對(duì)來說比較容易入門，比較簡單，能快速的掌握，對(duì)于除學(xué)者來說能提升大家的學(xué)習(xí)興趣。建議學(xué)習(xí)完這部分后可以嘗試模仿一些網(wǎng)站進(jìn)行還原，記住學(xué)一萬遍不如練一遍。

重難點(diǎn)提醒：css3進(jìn)階屬性，動(dòng)效，高級(jí)布局，響應(yīng)式布局，移動(dòng)端適配，移動(dòng)端彈性布局。

2、JavaScript基礎(chǔ)

目標(biāo)與能力界定：編程基礎(chǔ)概念，培養(yǎng)邏輯思維能力。能夠獨(dú)立完成網(wǎng)站的頁面開發(fā)(包括合理布局，JavaScript操作DOM)

JS是整個(gè)前端的核心技術(shù)語言，在網(wǎng)站想想要實(shí)現(xiàn)一些炫酷的功能就必須要涉及到JS。JavaScript,IS是很強(qiáng)大的一門語言，但是他的內(nèi)容實(shí)在大多了，而且有很多內(nèi)容是糟粕， 新手是無法區(qū)分精華與糟粕的，這就造成了新手無從下手學(xué)習(xí)。JS也是一門復(fù)雜的語言，需要很明白的人給你講才不會(huì)亂，否則你很難理解其中的要點(diǎn)。還是建議有人帶著你系統(tǒng)學(xué)習(xí)。網(wǎng)絡(luò)上看似有很多免費(fèi)的體系，但是核實(shí)的絕不會(huì)給你講解。

JavaScript基礎(chǔ)需要學(xué)習(xí)的知識(shí)要點(diǎn)：

ECMA 基礎(chǔ)語法

邏輯分支選擇

邏輯分支選擇

ECMA 函數(shù)

ECMA 內(nèi)置對(duì)象(Array)

ECMA 內(nèi)置對(duì)象(Math、Date)

ECMA 內(nèi)置對(duì)象 (string)

DOM 基礎(chǔ)

DOM 樣式

BOM對(duì)象

事件

事件對(duì)象(Event)

表單和正則表達(dá)式RegExp

jQuery 基礎(chǔ)

重難點(diǎn)提醒：ECMA 函數(shù)

建議綜合拉練1-2個(gè)：jQuery 項(xiàng)目

3、JavaScript進(jìn)階+Node+H5 API

目標(biāo)與能力界定：深入面向?qū)ο缶幊蹋�具備移�?dòng)端開發(fā)能力，處理瀏覽兼容問題，深入學(xué)習(xí)ES6/ES7語法規(guī)范，前后端分離開發(fā)思想

建議學(xué)習(xí)模塊：

JS 面向?qū)ο?

H5 API Canvas

jQuery 及插件封裝 移動(dòng)端插件開發(fā)

Node服務(wù)器與數(shù)據(jù)庫 H5 API

ES6/ES7

本階段的知識(shí)點(diǎn)相對(duì)來說有難度的比較多了，比如：JS 面向?qū)ο罄锩娴倪f歸;Node服務(wù)器里面的知識(shí)點(diǎn)：HTTP/S協(xié)議(請(qǐng)求頭，響應(yīng)頭，get，post，瀏覽器緩存);ES6/ES7里面的：Promise(asycn,await)、typescript。

到了這個(gè)階段就不是像學(xué)習(xí)HTML里面標(biāo)簽?zāi)敲摧p松啦!

4、web全棧+框架

目標(biāo)與能力界定：深入了解Node，數(shù)據(jù)庫操作，前后端分離技術(shù)，前后臺(tái)協(xié)作開發(fā)。深入學(xué)習(xí)組件化開發(fā)思想，技術(shù)復(fù)習(xí)，實(shí)戰(zhàn)項(xiàng)目。

框架在2018年以前可能你會(huì)VUE、React、微信小程序三大框架里面的其中一個(gè)就OK，那么到了2020年哪怕是應(yīng)屆畢業(yè)生你找實(shí)習(xí)工作也不行啦，這些都是必須要學(xué)習(xí)的。而且前端的框架技術(shù)更新是非�？斓�3-6個(gè)月就會(huì)更新一次，所以最好是有人帶著你學(xué)習(xí)，要不然學(xué)習(xí)了半年后等你找工作的時(shí)候發(fā)現(xiàn)為什么企業(yè)都不用這些技術(shù)了而浪費(fèi)了大把的時(shí)間。

最后友情提示：除了以上的四大點(diǎn)內(nèi)容，你還需要了解以下知識(shí)體系：

函數(shù)式編程，LBS(高德地圖)

數(shù)據(jù)解構(gòu)與算法簡介(O時(shí)間復(fù)雜度)

PWA，ServiceWorker，Taro

SSR(nuxt)

混合開發(fā)(uni-app，ReactNative)