我的自學前端之路

      從我自學前端以來，并從事web前端工作。很大一部分來源于“

興趣

”+“

堅持

”。相信現在還有很多小夥伴在自學前端的路上摸索着，接下來我分享下我的學習路線、學習方法與推薦的書籍，希望對自學的你們有幫助~

前端必備基礎

HTML5

      主要學會基本的HTML标簽骨架、HTML書寫規範、了解行内元素塊級元素以及語義化的正确使用。另外就是學習一些新特性，例如：

• 用于繪畫的 canvas 元素
• 用于媒介播放的Video和Audio元素
• 改良後的input表單控件等

CSS3

      這個主要用于網頁的樣式，也是前端中重要的一部分，雖說簡單，其實很重要，個人覺得比較重要的幾個子產品：

• 選擇器，掌握并學會适當運用
• 盒模型、了解彈性盒子模型&普通盒子模型
• 文字特效、漸變顔色、陰影的使用
• 2D/3D的動畫轉換
• flex布局，自适應布局，多列布局等
• 重點，是處理浏覽器之間的樣式相容

Javascript

      重點學習javascript，因為前面掌握html+css基本就是制作靜态網頁，這時候就需要讓頁面動起來。最好是學習原生js，初學者不建議直接學習架構。我認為js中比較重要的幾個知識點：

• 掌握基本的文法，類型，表達式，DOM進階操作等
• 深入了解對象，函數，作用域，閉包，函數構造，this指向等相關知識
• 接着學習jquery，利用jquery插件，特效，可以友善快速開發
• 深入了解js事件的異步處理，阻塞概念，設計模式、正規表達式
• 學習ajax資料互動，與JSON資料處理，http協定等

  推薦書籍:《

JavaScript進階程式設計(第3版)

》《

Javascript權威指南

》《

鋒利的jquery

》 ★★ 重點 ★★

     學完原生js，就可以學習ES6文法了，

由于目前許多架構都用了ES6文法，是以掌握ES6是必須的。ES6的新特性挺多的，努力掌握其實常用的有幾個：

• let、const的變量聲明，并了解與var的差別
• 模闆字元串
• 箭頭函數
• class的基本文法
• Promise對象、處理異步操作
• 其他的ES6知識點拓展可以上網查

工具

• 初學者，一般用Sublime Text 3，工作以後用webStorm，甚至是用VS code，工欲善其事，必先利其器！是以有必要将多種工具使用熟悉。
• ps切圖技能也是必備的

學習方法：

      學習以上三部分，除了做些小例子掌握與使用，剛開始都是模仿網站，看看别人的文法規範等，嘗試做一些比較完整的網頁，有利于對自己掌握的技能查漏補缺，及時補充！後來，覺得更重要的是了解概念，深入挖掘其中的奧妙。初學者可以看看網絡上的視訊教程入門，而知識精華是需要從書去汲取的

。

進階技能

Node.js

      當我掌握基本的必備知識，就可以學node，Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運作環境。 目前許多架構也是配合着node.js來應用，是以這個也是必須會的。

推薦書籍:《

深入淺出node.js

》 前端工業化

      基本技能：學會使用gulp，grunt等對js、css、html壓縮，less、sass處理css

      深入掌握：webpack打包工具的使用

web安全與性能

• 學習“雅虎軍規”
• 這個主要可以學習XSS和csrf的原理和防範，SQL防注入等。

目前流行架構

      學習Vue、React、Angular架構是相當有必要的，掌握了解子產品化群組件化。三者之間也是有明顯差別，可以在網上找資料對比總結。

微信小程式

      有了以上的基礎，結合目前的就業形勢，掌握微信小程式，對自己是非常有幫助的。這方面的學習，看看微信官方的小程式開發文檔，即可很好的入門，并可以嘗試做些小案例~

找工作，積累經驗

     之後我成功找到web前端開發的工作，開始了我前端生涯。我的前端學習路線差不多就這些，前端博大精深，随着技術的不斷更新，我們也需要跟随技術的腳步，當然有些時候不是越新越新，最基本的東西掌握了，其他的就可以很好了解了。

覺得本文對你有幫助，可以分享給更多人

關注 【前端體系】，一起提升技能

轉載于:https://juejin.im/post/5abcb5546fb9a028e52deac2