? ? ? 從我自學(xué)前端以來(lái)，并從事web前端工作。很大一部分來(lái)源于“興趣”+“堅(jiān)持”。相信現(xiàn)在還有很多小伙伴在自學(xué)前端的路上摸索著，接下來(lái)我分享下我的學(xué)習(xí)路線、學(xué)習(xí)方法與推薦的書(shū)籍，希望對(duì)自學(xué)的你們有幫助~
前端必備基礎(chǔ)
HTML5
? ? ? 主要學(xué)會(huì)基本的HTML標(biāo)簽骨架、HTML書(shū)寫(xiě)規(guī)范、理解行內(nèi)元素塊級(jí)元素以及語(yǔ)義化的正確使用。另外就是學(xué)習(xí)一些新特性，例如：
用于繪畫(huà)的 canvas 元素
用于媒介播放的Video和Audio元素
改良后的input表單控件等
CSS3
? ? ? ?這個(gè)主要用于網(wǎng)頁(yè)的樣式，也是前端中重要的一部分，雖說(shuō)簡(jiǎn)單，其實(shí)很重要，個(gè)人覺(jué)得比較重要的幾個(gè)模塊：
選擇器，掌握并學(xué)會(huì)適當(dāng)運(yùn)用
盒模型、理解彈性盒子模型&普通盒子模型
文字特效、漸變顏色、陰影的使用
2D/3D的動(dòng)畫(huà)轉(zhuǎn)換
flex布局，自適應(yīng)布局，多列布局等
重點(diǎn)，是處理瀏覽器之間的樣式兼容
Javascript
? ? ? ? 重點(diǎn)學(xué)習(xí)javascript，因?yàn)榍懊嬲莆説tml+css基本就是制作靜態(tài)網(wǎng)頁(yè)，這時(shí)候就需要讓頁(yè)面動(dòng)起來(lái)。最好是學(xué)習(xí)原生js，初學(xué)者不建議直接學(xué)習(xí)框架。我認(rèn)為js中比較重要的幾個(gè)知識(shí)點(diǎn)：
掌握基本的語(yǔ)法，類型，表達(dá)式，DOM高級(jí)操作等
深入理解對(duì)象，函數(shù)，作用域，閉包，函數(shù)構(gòu)造，this指向等相關(guān)知識(shí)
接著學(xué)習(xí)jquery，利用jquery插件，特效，可以方便快速開(kāi)發(fā)
深入理解js事件的異步處理，阻塞概念，設(shè)計(jì)模式、正則表達(dá)式
學(xué)習(xí)ajax數(shù)據(jù)交互，與JSON數(shù)據(jù)處理，http協(xié)議等
推薦書(shū)籍:《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》《Javascript權(quán)威指南》《鋒利的jquery》
★★重點(diǎn)★★
? ? ? ?學(xué)完原生js，就可以學(xué)習(xí)ES6語(yǔ)法了，??由于目前許多框架都用了ES6語(yǔ)法，所以掌握ES6是必須的。ES6的新特性挺多的，努力掌握其實(shí)常用的有幾個(gè)：
let、const的變量聲明，并理解與var的區(qū)別
模板字符串
箭頭函數(shù)
class的基本語(yǔ)法
Promise對(duì)象、處理異步操作
其他的ES6知識(shí)點(diǎn)拓展可以上網(wǎng)查
工具
? ? ? 初學(xué)者，一般用Sublime Text 3，工作以后用webStorm，甚至是用VS code，工欲善其事，必先利其器！所以有必要將多種工具使用熟悉。
ps切圖技能也是必備的
學(xué)習(xí)方法：
? ? ? ?學(xué)習(xí)以上三部分，除了做些小例子掌握與使用，剛開(kāi)始都是模仿網(wǎng)站，看看別人的語(yǔ)法規(guī)范等，嘗試做一些比較完整的網(wǎng)頁(yè)，有利于對(duì)自己掌握的技能查漏補(bǔ)缺，及時(shí)補(bǔ)充！后來(lái)，覺(jué)得更重要的是理解概念，深入挖掘其中的奧妙。初學(xué)者可以看看網(wǎng)絡(luò)上的視頻教程入門，而知識(shí)精華是需要從書(shū)去汲取的。
進(jìn)階技能
Node.js
? ? ? ? 當(dāng)我掌握基本的必備知識(shí)，就可以學(xué)node，Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。 目前許多框架也是配合著node.js來(lái)應(yīng)用，所以這個(gè)也是必須會(huì)的。
推薦書(shū)籍:《深入淺出node.js》
前端工業(yè)化
????基本技能：學(xué)會(huì)使用gulp，grunt等對(duì)js、css、html壓縮，less、sass處理css
????深入掌握：webpack打包工具的使用
web安全與性能
學(xué)習(xí)“雅虎軍規(guī)”
這個(gè)主要可以學(xué)習(xí)XSS和csrf的原理和防范，SQL防注入等。
目前流行框架
? ? ? ?學(xué)習(xí)Vue、React、Angular框架是相當(dāng)有必要的，掌握理解模塊化和組件化。三者之間也是有明顯區(qū)別，可以在網(wǎng)上找資料對(duì)比總結(jié)。
微信小程序
? ? ? ?有了以上的基礎(chǔ)，結(jié)合目前的就業(yè)形勢(shì)，掌握微信小程序，對(duì)自己是非常有幫助的。這方面的學(xué)習(xí)，看看微信官方的小程序開(kāi)發(fā)文檔，即可很好的入門，并可以嘗試做些小案例~
找工作，積累經(jīng)驗(yàn)
? ? ? 之后我找到前端開(kāi)發(fā)的工作，開(kāi)始了我前端生涯。我的前端學(xué)習(xí)路線差不多就這些，前端博大精深，隨著技術(shù)的不斷更新，我們也需要跟隨技術(shù)的腳步，當(dāng)然有些時(shí)候不是越新越新，最基本的東西掌握了，其他的就可以很好理解了。
