高級前端進階指南

前言

    與其說是寫初中級前端的進階指南, 不如說是對個人經歷的一些總結.並希望能給前行路上的你帶來一些啓發,或者思考。

    首先簡單的介紹下我自己,非科班出身,16 年畢業,大學的時候自己只是簡單的寫過一些網頁,也都是自己寫着玩兒練手的,水平可想而知.可以說找到一份工作都很艱難。

    辦法總比困難多,這時可以說我做了一個對我來說最正確的決定,辭掉銷售的工作之後,回到家後大門不出二門不邁,專心學習,半年之後,憑藉自己的努力,南下深圳找到了一份滿意的工作,就此踏入前端開發這個行業。

前期面對工作任務還是有很大壓力的,因爲畢竟只有理論基礎,缺乏實踐經驗,可想而知,等待我的是加不完的班,有的時候甚至加班到凌晨 4 點,第二天照常工作.很感謝那段經歷帶給我的成長,不光是技術,還有思想層面上的進步,真正體會到自律給我帶來的蛻變。

    經過兩年持續的努力.有幸被任命爲前端開發負責人.隨之而來的是更大的責任,對當時的我來說確實是不小的挑戰,單純的做開發和帶團隊還是有區別的,包括但不限於,掌握一些簡單的溝通技巧以及如何招聘,如何帶領團隊按時交付需求,並讓身邊的小夥伴都能有所成長.當然還要保持深刻的自我認知.可以說這段工作經歷帶給了我的成長的還是很大的.

之後便進入了現在的公司,也就是傳說中的大廠,擔任高級前端工程師.可以說這個世界一切都是有可能的,只要對自己有足夠的信心,並保持足夠自律就沒什麼問題.當然這些經歷和大多數人基本相似,並沒什麼特別的地方.同樣我也迷茫過主要的問題是前端體系的知識比較瑣碎,不知如何下手缺乏整體的規劃.

    在職場中也遇到過一些人和一些事,有頻繁跳槽的.也有拼命努力的.世界本就如此,每個人的家庭及成長環境不同,也就存在了這些差異.只是個人不是很建議頻繁跳槽.而是更應該關注自身的成長,充分知道自己的短板和優勢,接下來分享一些個人的心得和體會.希望能對大家有所幫助,思考,或者啓發.或者有不當的地方也歡迎大家吐槽.

本篇文面對1到3年的初中級前端工程師。

我的 blog 地址, 將在這裏更新最新動態 ,歡迎收藏,保持聯繫✨

技能圖

進階指南

這張全景圖每塊都是比較重要的知識點,且都必不可少,那麼作爲初中級的前端工程師究竟該如何上手呢?學習是該有個順序的,網上的資料大多是像上圖這樣,給出了全景圖,但卻沒有完整的學習路線知道,就好像一個景區裏面只有圖紙,但卻找不到入口,或者說從這個入口進去。但卻找不到出口,於是迷失在了其中的一個景點裏走不出來了。基於這個現狀分享一下個人的經歷,希望可以幫助到前行路上的你。

如何學?

首先這個話題相信不同的人眼裏有不同的看法,在此我分享下我的一些觀點。

(前三年建議踏踏實實學技術漲知識)

前端整個知識體系是比較瑣碎的,拿一個簡單的後臺管理系統來說,可以實現的技術棧有很多,比如 react , ng ,vue。這其中可能還需要做一些可視化的展示,這就需要了解 Echarts,antv之類的圖形化框架。涉及到前後端數據交互的話,那就需要了解axios 之類的第三方工具或則庫。所以我是這麼走的,首先具備基本的業務開發能力,前期不去過多瞭解原理,當發現基本可以搞定所有的業務的時候(努力的情況下大概半年時間)來時按步就班的升級打怪。

基礎篇

基礎是重中之中,萬丈高樓平地起,良好的根基基本能決定你後期能走多遠,這裏必不可少的兩本書。一定要搞明白《javascript高級程序設計》《ES6標準入門》

框架篇

入門:

react官方文檔
vue官方文檔

選一個即可,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左右,相信你的努力一定也是希望過上好的生活。再者一定要一步一個腳印踏踏實實的學習。最後附我的博客

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章