真誠(chéng)分享，前端從初級(jí)到高級(jí)如何系統(tǒng)化學(xué)習(xí)
前端現(xiàn)在發(fā)展特別快，往前倒推 5 年那時(shí)候還是 jQuery 的天下，現(xiàn)在已經(jīng)變成 Vue / React 的天下，前端除了畫頁(yè)面寫后臺(tái)之外，能力范圍還拓展到了服務(wù)端 BFF（Backend for frontend 服務(wù)于前端的后端）、可視化、低代碼、端智能等多個(gè)技術(shù)方向，所使用的技術(shù)語言也從 CSS、HTML、JavaScript 拓展到了 Node.js、TypeScript 等。
從上面來看的話，前端需要學(xué)習(xí)的東西很多，不過也不用急，路要一步一步走，技術(shù)也是，需要有一個(gè)學(xué)習(xí)的過程。
初入初級(jí)
何為初級(jí)，就是剛剛接觸前端沒幾年，學(xué)會(huì)使用 CSS、HTML，知道怎么調(diào)用 API 完成基本的功能，會(huì)一些 ES6+ 語法，看過現(xiàn)在主流的 Vue / React 框架，但是深入一點(diǎn)問原理就懵懂不知。
這個(gè)階段推薦看《JavaScript Dom編程藝術(shù)》《CSS 世界》《JavaScript 語言精粹》《ES6 標(biāo)準(zhǔn)入門》這些書，網(wǎng)站推薦《MDN》、《阮一峰的網(wǎng)絡(luò)日志》，另外看書有個(gè)技巧，當(dāng)你看不下去的時(shí)候，說明后面還不適合你，看不下去就換本書看，或者過段時(shí)間再看，那時(shí)候會(huì)發(fā)現(xiàn)容易理解一些。
初級(jí)階段的話，可以完成分配下來的工作，但是這個(gè)過程還需要?jiǎng)e人的幫助。如果你是初學(xué)前端或者剛開始工作沒多久的小伙伴，那這段時(shí)間只能拼一拼。很多東西不是一上來就能變得很厲害的，需要時(shí)間去打磨，需要不斷的看書不斷的敲代碼。
前端我也是自學(xué)的，我當(dāng)初從初級(jí)往上走就是拼命的看書和學(xué)習(xí)，那段時(shí)間晚上回去比較晚，周末還會(huì)去公司或者圖書館去學(xué)習(xí)，那段時(shí)間也是堅(jiān)持了很久才找到點(diǎn)感覺。
漸入中級(jí)
想要達(dá)到中級(jí)需要掌握 JavaScript 高階用法，除了高階之外，網(wǎng)絡(luò)基礎(chǔ)、瀏覽器知識(shí)、安全知識(shí)和設(shè)計(jì)模式等都要學(xué)好，細(xì)化下來的話，知識(shí)點(diǎn)特別的多。
JavaScript 高階用法
作用域、this、原型、節(jié)流防抖、異步等 網(wǎng)絡(luò)基礎(chǔ)
UDP、TCP、HTTP1.0、HTTP1.1、HTTP2.0、HTTP3、HTTPS 瀏覽器知識(shí)
事件機(jī)制和事件循環(huán)、緩存機(jī)制、跨域、瀏覽器渲染原理 安全知識(shí)
XSS（Cross-Site Scripting 跨站腳本）、CSRF（Cross—Site Request Forgery 跨站點(diǎn)請(qǐng)求偽造）、JWT、加密加簽 設(shè)計(jì)模式
單例、工廠、觀察者、適配器等
另外你去面試的時(shí)候，有的公司會(huì)說有 Node.js 經(jīng)驗(yàn)更優(yōu)，其實(shí)現(xiàn)在 Node 已經(jīng)成為標(biāo)配了，平常還是要多學(xué)學(xué)這塊，很多地方都會(huì)用到。
推薦的書有《JavaScript 高級(jí)程序設(shè)計(jì)（第四版）》、《你不知道的 JavaScript（上中下三卷）》、《狼書-更了不起的 Node.js》、《JavaScript 設(shè)計(jì)模式與開發(fā)實(shí)踐》
一般中高級(jí)可以獨(dú)立完成項(xiàng)目，可以高效的排查問題，做到自主交付，會(huì)思考如何提升效率，考慮代碼的優(yōu)雅性復(fù)用性，方便之后的業(yè)務(wù)快速?gòu)?fù)用。
邁入高級(jí)
我理想中的高級(jí)前端擁有完整的基礎(chǔ)知識(shí)體系，熟悉工作上使用到的框架原理，懂得數(shù)據(jù)結(jié)構(gòu)和算法知識(shí)，除了這些知識(shí)的掌握之外還要有技術(shù)主動(dòng)性，在工作中主動(dòng)去做工程化開發(fā)以及性能優(yōu)化。
Vue/React 框架原理 Webpack 數(shù)據(jù)結(jié)構(gòu)和算法 性能優(yōu)化
推薦的書有《重構(gòu)-改善既有代碼的設(shè)計(jì)》、《深入淺出 Vue.js》、《深入 React 技術(shù)?！?、《學(xué)習(xí) JavaScript 數(shù)據(jù)結(jié)構(gòu)和算法（第3 版）》、《JavaScript 框架設(shè)計(jì)（第 2 版）》
工作中肯定會(huì)用到框架，那框架真的掌握了嗎？最新的特性、設(shè)計(jì)理念這些是否了解。要知道任何事物的出現(xiàn)必有其緣由，作為程序員要保持一顆好奇心，多問問自己 WHAT/HOW/WHY。
高級(jí)更多的不是學(xué)會(huì)了什么，而是思維上的不同，轉(zhuǎn)變思維后持續(xù)精進(jìn)后能帶來質(zhì)的飛躍。懂原理、知體系、明優(yōu)劣、愛探索是高級(jí)的一些特征。
前端市場(chǎng)行情
前端前景是很不錯(cuò)的，但是前端的入門門檻很低，有很多人自學(xué)轉(zhuǎn)前端，還有很多培訓(xùn)機(jī)構(gòu)也是各種主推前端培訓(xùn)，然后前端技術(shù)更新迭代又比較快，所以前端這個(gè)行業(yè)的程序員比較多，而且大部分還是初中級(jí)階段。就市場(chǎng)而言初級(jí)前端供大于求，可以說越來越卷，但是高級(jí)前端依舊供不應(yīng)求，本質(zhì)是因?yàn)槠髽I(yè)的發(fā)展速度大于前端工程師的平均成長(zhǎng)速度。
前端目前主要的業(yè)務(wù)方向是做 H5、小程序、中后臺(tái)管理系統(tǒng)等，同時(shí)有的公司還會(huì)用到 BFF。如果只是完成工作的話，中高級(jí)水平就差不多了，但是去面試的話，好公司還會(huì)考察候選人的潛力、溝通能力、對(duì)高級(jí)知識(shí)的理解和掌握等等。
最近也一直在招聘，整體來說高級(jí)的前端很難招，主要還是市場(chǎng)上大部分都是初學(xué)者，但是滿足條件的人并不多。其中最重要的還是能力要對(duì)標(biāo)，當(dāng)你能達(dá)到高級(jí)的水平，找個(gè)好公司好工作還是問題不大。所以優(yōu)秀的前端工程師一直都會(huì)成為市場(chǎng)爭(zhēng)搶的資源。