前言
與其說是寫初中級前端的進階指南, 不如說是對個人經歷的一些總結.並希望能給前行路上的你帶來一些啓發,或者思考。
首先簡單的介紹下我自己,非科班出身,16 年畢業,大學的時候自己只是簡單的寫過一些網頁,也都是自己寫着玩兒練手的,水平可想而知.可以說找到一份工作都很艱難。
辦法總比困難多,這時可以說我做了一個對我來說最正確的決定,辭掉銷售的工作之後,回到家後大門不出二門不邁,專心學習,半年之後,憑藉自己的努力,南下深圳找到了一份滿意的工作,就此踏入前端開發這個行業。
前期面對工作任務還是有很大壓力的,因爲畢竟只有理論基礎,缺乏實踐經驗,可想而知,等待我的是加不完的班,有的時候甚至加班到凌晨 4 點,第二天照常工作.很感謝那段經歷帶給我的成長,不光是技術,還有思想層面上的進步,真正體會到自律給我帶來的蛻變。
經過兩年持續的努力.有幸被任命爲前端開發負責人.隨之而來的是更大的責任,對當時的我來說確實是不小的挑戰,單純的做開發和帶團隊還是有區別的,包括但不限於,掌握一些簡單的溝通技巧以及如何招聘,如何帶領團隊按時交付需求,並讓身邊的小夥伴都能有所成長.當然還要保持深刻的自我認知.可以說這段工作經歷帶給了我的成長的還是很大的.
之後便進入了現在的公司,也就是傳說中的大廠,擔任高級前端工程師.可以說這個世界一切都是有可能的,只要對自己有足夠的信心,並保持足夠自律就沒什麼問題.當然這些經歷和大多數人基本相似,並沒什麼特別的地方.同樣我也迷茫過主要的問題是前端體系的知識比較瑣碎,不知如何下手缺乏整體的規劃.
在職場中也遇到過一些人和一些事,有頻繁跳槽的.也有拼命努力的.世界本就如此,每個人的家庭及成長環境不同,也就存在了這些差異.只是個人不是很建議頻繁跳槽.而是更應該關注自身的成長,充分知道自己的短板和優勢,接下來分享一些個人的心得和體會.希望能對大家有所幫助,思考,或者啓發.或者有不當的地方也歡迎大家吐槽.
本篇文面對1到3年的初中級前端工程師。
我的 blog 地址， 將在這裏更新最新動態 ，歡迎收藏，保持聯繫✨
技能圖
進階指南
這張全景圖每塊都是比較重要的知識點，且都必不可少，那麼作爲初中級的前端工程師究竟該如何上手呢？學習是該有個順序的，網上的資料大多是像上圖這樣，給出了全景圖，但卻沒有完整的學習路線知道，就好像一個景區裏面只有圖紙，但卻找不到入口，或者說從這個入口進去。但卻找不到出口，於是迷失在了其中的一個景點裏走不出來了。基於這個現狀分享一下個人的經歷，希望可以幫助到前行路上的你。
如何學？
首先這個話題相信不同的人眼裏有不同的看法，在此我分享下我的一些觀點。
(前三年建議踏踏實實學技術漲知識)
前端整個知識體系是比較瑣碎的，拿一個簡單的後臺管理系統來說，可以實現的技術棧有很多，比如 react ， ng ，vue。這其中可能還需要做一些可視化的展示，這就需要了解 Echarts，antv之類的圖形化框架。涉及到前後端數據交互的話，那就需要了解axios 之類的第三方工具或則庫。所以我是這麼走的，首先具備基本的業務開發能力，前期不去過多瞭解原理，當發現基本可以搞定所有的業務的時候（努力的情況下大概半年時間）來時按步就班的升級打怪。
基礎篇
基礎是重中之中，萬丈高樓平地起，良好的根基基本能決定你後期能走多遠，這裏必不可少的兩本書。一定要搞明白《javascript高級程序設計》《ES6標準入門》
框架篇
入門：
選一個即可，react和vue 目前在國內的整體行情不錯ng市場佔有率很低。基本可以忽略，不要談什麼技術情懷，解決實際問題的同時又能填飽肚子纔是關鍵
狀態管理：
首選 react-redux 或者 vuex，reactjs小書,不可多得學習資料。學習完之後找個demo自己實現一遍，縷清楚整體的實現流程，不要偷懶，這是一個刻意練習的過程，redux版todomvc仔細研究其。帶註釋版本
到此react框架基本可以說使用起來沒什麼太大問題了，如果要繼續深入的話可以搜一下jsx的實現原理，以及redux-thunk的源碼可以翻一番。只有僅僅十幾行代碼。
yck大佬的原理解析也很不錯。
構建工具
首選webpack，首先把他的官方文檔整個通讀一遍，搞清楚什麼是loader，plugin，以及常用的插件，可以從零到一的配置一個完整的項目，這點很重要。個人親身經歷，發現還是有很多小夥伴只是停留在業務開發階段，沒有深入理解過其原理。這點一定要平時多加註意提升自身的技術水平。
學完這些，你基本上可以從技術角度整體把控住一個完整的小型項目了。
設計模式
爲什麼到這開始學習設計模式？因爲這個東西跟數據結構算法似的，你會了就是會了，而且它可以說是一塵不變的，關鍵還不會貶值，而且對於你學習其他知識也很有幫助。這裏推薦《JavaScript設計模式與開發實踐》一遍看不懂就看兩遍，自認爲沒那麼聰明，所以我是老老實實的看了兩遍，代碼也都敲了。
數據結構算法
談到這個話題，可能很多小夥伴就要問了。對一個前端來說，學這玩意兒有啥亂用，平時也基本用不到，剛開始其實我也有同樣的疑惑，這就得看給自己的定位了。如果想在開發這條路上走，首先你不能僅僅把自己定位成一個前端，這樣你會發現，你的路會越走越窄。數據結構算法可以說是高級前端的必修課程。這裏送你一本 《學習JavaScript數據結構與算法》，啃完這本書應對一般工作或者面試基本沒有任何問題了。
網絡協議
網絡協議可以說也是一個實力保本的技能，常見的協議基本也就那些，不會三天兩頭的更新。而且很多人還不會，這就體現出你的價值了。這裏推薦極客時間的課程趣談網絡協議
性能優化篇
性能優化是個老生長談的話題。可以說無論平時業務開發，還是面試都是必不可少的技能，這部分我沒有可以練習。都是平時工作中積累的一些技能。
瀏覽器原理
作爲一個前端工程師，只知其然而不知其所以然是很定不行的，一定要有打破砂鍋問到底的精神。當然這也不是說一定要讓你老老實實的去翻瀏覽器的源碼。如果是這樣的話，那得學到猴年馬月去了。這裏推薦《webkit技術內幕》老規矩。老老實實啃兩邊。這些基本都是性價比最高的知識。
工程化能力
這裏可以去讀一讀create-react-app的源碼。撿重點邏輯理解即可
全棧能力
到這你就要來時學習一些後端的技術了。建議Node.js入門。降低學習成本，和時間成本。一本《深入淺出Node.js》送給你，作爲入門的不二之選。
結語
到此，如果你基本可以融會貫通的話，那麼恭喜你，基本可以進階到高級工程師段位了，年薪30左右，相信你的努力一定也是希望過上好的生活。再者一定要一步一個腳印踏踏實實的學習。最後附我的博客