轉行做前端的學習心得,深情交流

来源:https://www.cnblogs.com/lyy-1/archive/2020/07/03/13229976.html
-Advertisement-
Play Games

一、Why choose front-end 2012.07畢業後,進了一家游戲公司做運營策劃,寫過營銷方案、做過內容編輯、知道廣告投放和換量,還得兼職產品經理畫原型。 每天9.30-23.00以後,周末經常加班,像無頭蒼蠅一樣碰撞一年後,我沒有任何成就感,我開始思考自己每天做的是什麼,將來會做什麼 ...


一、Why choose front-end

2012.07畢業後,進了一家游戲公司做運營策劃,寫過營銷方案、做過內容編輯、知道廣告投放和換量,還得兼職產品經理畫原型。 每天9.30-23.00以後,周末經常加班,像無頭蒼蠅一樣碰撞一年後,我沒有任何成就感,我開始思考自己每天做的是什麼,將來會做什麼,做的這份工作是自己喜歡的嗎?在這個領域上將來會有所成就嗎? 1、重覆而繁雜 => No,我喜歡專心研磨一個東西,直到做好它 2、各種會議和無數遍的方案修改 => No,我做事的時候不喜歡被打擾,但這並不妨礙我是個喜歡交流的家伙 3、錶面上付出了無數心血的產品,到頭來說不出它哪些地方屬於你 => 很可悲,螺絲釘,物質和精神上都沒有得到回報 4、個人成長,想總結自己畢業一年的提升,除了滿口的流量、DAU、PV等辭彙和一套又一套的運營方法論,發現竟然都是一些很虛的東西(至少在當時的我看來是的) 5、高強度而無原則、低效率的加班

基於以上等等,從2013開始,我不斷的審視自己,我自己是個什麼樣的人,我喜歡做什麼,我適合做什麼,我會在什麼領域有所成就

1、我經常會為了研究一個東西廢寢忘食,投入而專註 => 貌似適合做技術 2、我能堅持做一件事情,不會三分鐘熱度 => 貌似適合做技術 3、我大學很喜歡搗鼓跟電腦相關的東西,從軟體PS、AI、ID到優化電腦系統到重裝系統到最後自己組裝電腦 => 貌似適合做IT 4、我的舍友是後端,在我搗鼓第三點的時候他已經在幫學校和外面的公司寫系統了,我很崇拜他,但大三大四讀了《人人都是產品經理》,崇拜歸崇拜,畢竟還是經理比較有吸引力,年少無知隨大流 5、我是985通信工程專業,好歹見過C語言,知道數據結構,上過計網 => 這不明擺著去做開發的意思麽

綜上所述,我看到面前清清楚楚的寫著三個字:程式員 再加上詢問了一些朋友和同學的意見,2013.09.01開始在家全日制脫產自學,從前端開始……

二、2013.09-2014.04(自學)

嗯,自學開始,怎麼學呢?

我並沒有一股腦就開始學

這裡得感謝第一份工作對我的鍛煉,我利用了產品思維來看待這件事 目標:4-6個月找到一份前端工作 核心技能:HTML、CSS、Javascript + 一個框架(Vue)+ 一個項目

確認好需求後,我利用思維導圖把這三個模塊進行了需求拆分和梳理,每個大需求下要學的是什麼,特別是最核心的模塊-JS 然後是尋找合理快速的學習方法,我瀏覽了很多關於如何自學前端、前端推薦書籍、前端知識體系等等方面的內容,最後總結出來我要做的事:看視頻快速入門 => 看書扎實基礎 => 大量敲代碼實踐,期間不斷積累好的博客資源,吸取前人的經驗,特別是github(懂的自然懂)

但其實,前面的我並沒有消化多少,對新手來說 《Javascript DOM編程藝術》 《Javascript面向對象編程》 這兩本書我覺得是比較合適的,其他的書都有它對應的階段,強讀不來 《Javascript高級程式設計》真是一本好書,入門後就值得不斷的翻看了

到現在工作一年了,我的桌面上常備《Javascript高級程式設計》+《You don’t know JS》系列,閑來無事就翻一翻,個人覺得進階必備

大學折騰過科學上wang,看得懂hello world的英文水平(大學過完六級後就扔了)……在牆外發現了一些新世界:Google、Medium、Youtube、Twitter

四個月後的我,能寫靜態網站、JS基礎能隨口胡扯一點、會Vue的基礎使用(對,爛大街的仿餓了麽Web App)、用github page給自己做了個線上簡歷

這段時間留下來的積累是30多張知識腦圖+50篇博客(不是現在github上的)

花了一個月去面試,此次省略一萬心酸字,最終入職一家理想的互聯網公司,產品技術驅動、最新技術棧、leader和同事是985大牛、技術氛圍很nice、效率至上965 回想起來當初的自己真滴是渣渣,肚子里那點東西一眼忘穿秋水,換做現在我是面試官,說不定自己都會搖搖頭 面試時得到的反饋:能學到的東西叫技能,花時間就能學會,我們要的是有自學能力和技術熱情的人。 很感恩現在公司的CEO和前端老大,或許因為中大華工一家親?

三、2014.7.01-2015.07.01(工作一年)

6.1兒童節當天正式入職,對我來說,還有個特殊的意義:在前端路上,我只是個兒童,剛剛開始蹣跚學步,未來路很長……

剛開始是內部管理系統的開發,vue對新手小白真的非常友好,過度平緩 然後寫了兩個星期的微信小程式,妥妥的練了一把手 緊接著就上了公司的react-native大船開發App(公司核心產品),一開始真的是一無所知,幸得leader炒雞耐心,簡直手把手有木有,在react的路上越走越遠…… 加入RN-App項目後,我花費了大量的時間去熟悉項目 加上我很喜歡從大局看問題,想掌控一個項目,所以不斷的嘗試如何從零搭建項目、移動端打包測試、項目部署、App Store提審等等流程,全部自己跑了一遍,有時候不懂的就直接拉著leader教自己,在此過程順便瞭解了下gulp、webpack、Xcode相關操作 從添加小功能 => 負責獨立模塊 => 巨集觀掌握App => 參與重構 很快我就對react技術棧的使用得心應手,但並不滿足於此,開始研究數據流、項目性能優化、總結踩坑,開始去瞭解virtual Dom和diff演算法,順遍入了閱讀react源碼的坑(路漫漫其修遠兮,吾將上下而求索),結果發現redux的源碼更簡單一點…… JS基礎和框架刷累了,又跑去寵幸一下網路相關,HTTP、緩存、瀏覽器等張口就來,滿口性能優化卻又無從實踐,不幸還發現了事件迴圈這個東西,又趕緊跑去系統擼了一遍非同步

大半年後,公司前端方面的業務都已經得心應手,功能開發和維護什麼的都已經不成問題,這個時候的自己其實有點小竊喜了,感覺自己在前端方面有點無所不能的感覺,貌似只要有後端的介面,什麼頁面都能開發 幸好本人一直保持著一顆敬畏的心和危機感,馬上意識到自己處於舒適圈了,必須得想辦法打破它,給自己敲一個警鐘

趕緊對自己進行總結:其實自己僅僅滿足於獲取數據渲染頁面,就已經開始自我陶醉了

在面向內部人員的管理後臺上,不太考慮性能優化、相容性(只用chrome)、美觀等,那麼是否應該在開發複雜應用功能、優化許可權系統、提高開發效率上下功夫呢? 在面向用戶的App和web頁面上,性能優化、相容性又成為了核心要素

這時候很想試一下react同構和伺服器端渲染,聽說能解決白屏,大大提升首屏載入速度,但遲遲未和後端同事找到機會試,這時候就對後端的知識蠢蠢欲動,想自己動手

其實前端就夠自己吃一壺了,加上node帶來的各種工具,還有數據結構與演算法、服務端、資料庫等等,有點貪心不足蛇吞象,草草刷了一遍node擼了幾個express的demo妄圖通吃後端,卻沒練過實際項目,花了兩天學完了python語法,卻不知所措……

越學卻越發心生焦慮,學的越多,發現自己越無知

學啊學的,某天終於悟出了一點道理:百藝通不如一藝精 天天聽別人全棧全棧,這學一點那沾一下,太浮躁了 還不如在前端這個領域往下深耕,扎實基礎,T型縱向深入,等時機成熟了,一點點去擴展服務端的知識,橫向面的寬度很重要,但急不來,只有把目前所做的東西給擼清楚了,留下自己的思考和沉澱,才能為長足發展打下厚實的基礎。

如果大家對於學習前端有任何問題,學習方法,學習路線,如何學習有效率的問題,可以隨時來咨詢我,或者缺少系統學習資料的,我做這行年頭比較久,
自認為還是比較有經驗的,可以幫助大家提出建設性建議,這是我的web前端交流qq群851231348,有任何問題可以隨時來咨詢我。

  

再加上跟一些群里的大牛虛心請教,給自己確認了一些打基礎的方向,也是接下來的長期方向

作為前端

  • 把目前業務中用的框架用明白,總結坑,寫文章(react性能、RN坑)
  • 讀源碼,寫文章
  • 演算法(從位運算開始)

作為程式員

  • 學英語(每天Anki背單詞、聽podcast、看英文文章和文檔、無字幕看美劇和電影)
  • 補基礎(操作系統、編譯原理)
  • 學 C++(看情況,這個有點遠)

以上幾點都需要沉下心來,一點一點去積累,急功近利不得。

總結起來,這一年裡有幾個關鍵詞:勤奮、養生、學英語、輸出、雜學

1、勤奮

這一年裡,在本職工作之外,我貌似活成了一個很“正能量”的人 公司九點半上班,我八點就到公司開始看書學習(家裡離公司單程地鐵一個小時,沒錯,我每天6點多起床),下班後或者周末,不是在家裡就是在公司學東西

2、養生

每天六點多早起了,那自然是得早睡,11:00-11:30睡覺,最晚不敢超過12:00,對於一個程式員來說,是否有點unbelievable 晚上下班回家後會去健身房或者家裡旁邊的籃球場練球 周末的話,雷打不動至少有一個下午打籃球,堅持了10年的籃球 身體是革命的本錢,尤其程式員這種物種 另外,我幾乎不吃外賣。

3、學英語

不知從哪個時間段起,發現經常要讀英文文檔,google和stackoverflow都是英文的,很多好的文章和博客都是英文的

決心把自己的英語撿回來,然後開始每天記單詞、閱讀英文文章、嘗試無字幕看美劇或者電影

推薦一個叫Anki的軟體,對於記憶內容非常有幫助,建議入手嘗試一下

4、輸出

輸出很好理解,就是寫博客,堅持寫 我充分利用了bear、MindNode、Axure、github這幾個工具 把自己所學所想所思的內容都沉澱了下來。

5、雜學

對於雜學這個詞,我想了很久,其實這個詞不好,有點類似上面說的,啥都學一下,啥都不會

其實我真正想表達的是:我擁有對新技術的好奇心和熱情,會主動關註最新技術趨勢。對知識擁有饑渴感,以前端為中心發散開來的技術領域,我都會保持關註,但不僅限於前端,給自己的定位應該是解決實際問題的工程師,前端只是我目前的一個職業。

四、next to learn

對於接下來要學什麼,上面籠統的寫了個大方向

作為前端

  • 把目前業務中用的框架用明白,總結坑,寫文章(react性能、RN坑)
  • 讀源碼,寫文章
  • 演算法(從位運算開始)

作為程式員

  • 學英語(每天Anki背單詞、聽podcast、看英文文章和文檔、無字幕看美劇和電影)
  • 補基礎(操作系統、編譯原理)
  • 學 Java(看情況,這個有點遠)

還是給自己一個一年內的目標吧 1、繼續react源碼學習(學有餘力就把vue的源碼也學了) 2、學Node,並用Node+react(vue)寫一個完整的前後端項目 3、把《演算法》第4版啃完

時隔一年,多虧自己有寫東西的習慣,還能勉強寫個總結 新的一年,希望自己能更上一層樓 雖然自己起步晚,但有句話:種一棵樹最好的時間,一個是十年前,一個是今天,不要被這個事情影響 另外,堅持是制勝法寶

五、一點學習心得

有人會覺得,大神們才有資格寫學習心得,你算個什麼東西,你的資歷呢,請先show出阿裡騰訊的5年經驗!

個人初衷,寫這一part是把自己這一階段的學習態度、方法、心得記錄下來,可能哪天自己回頭審視的時候,發現這個階段其實有點學習方法是錯誤的,那麼也能及時更正自己。重點:這是我自己的學習方法 另外一方面,目前的確還有很多小白還苦惱於如何學習,希望能有幸對這一群體有點點幫助,那我也是做了好事,算回饋社會了吧。 所以,大神們請繞道啦

一、合理利用時間

請充分利用好下班時間

1、上班時長

如果你是996,加上通勤就沒有自己的時間了,完全沒有下班時間給自己充電,我建議還是儘快換一家公司

大部分情況下(除了項目上線+短期內敏捷開發),這些加班都是無謂的消磨時間,試想一下,六點半,感覺下班了,點個外賣或者出去吃飯,這裡起碼得消耗一個小時吧,七點半到了,吃完飯休息一下,這時候大部分人的心理是想著反正還要加班,吃完飯休息一會,找個娛樂活動,看會抖音、頭條、鬥魚、動漫,就半個鐘……八點到了,進入工作狀態,離9點就剩一個小時,即使全程投入,有效加班時間也就一個小時,反正我是不相信白天的八個小時內無法通過提高效率和專註力來彌補這一個小時。 如果你說常態要加班到十一點之後,那麼復出的就是身體的代價了,還有前途。工作時間的業務驅動,每個人都會有,你想比別人更有優勢,就要利用工作之外的時間。 程式員是靠技術吃飯的,如果沒有工作之外的時間來增長技術,還要賠上大量時間,你很快就廢掉了。

請利用好下班後的那一兩個小時,日積月累,你會看到不一樣的自己,一萬個小時理論。

as for me,除了利用下班時間,我還有早上的一個多小時可以靜靜看書,不受任何人影響。還有一個隱形的優勢,吃的健康睡得早,我每天都精力充沛,所以我能保證白天的工作效率。

2、上班效率

1、列好todo list,分好優先順序,做完一個劃掉一個,比如這樣

  • App **bug修複
  • H5 頁面開發
  • 管理後臺添加功能

2、工作一段時間起來休息一下,這是為了確保你下一個工作時間段更有精力,番茄工作法瞭解一下

二、補基礎+看文檔

電腦、軟工的科班好學生可以忽略,我是轉行的,所以我需要大量補基礎 不單單是JS基礎,還有網路、演算法、服務端等等等

如果是學習新框架或者其他工具,請第一時間看文檔,有代碼的地方就對著實踐一遍,別人的博客最起碼也都是第二手資料了 官方文檔作者是最瞭解這個東西的人,你不問他問誰? 遇到問題,也請第一時間查看官方文檔,再看其他

三、會查資料+學好英語

普通程式員+google = 超級程式員 國外真的有不少好的資料,Medium、Youtube、Twitter請瞭解一下,github上也大部分是英文的 國內大部分資料都是二手的,除了慢,還有翻譯是否準確的問題

想要吸收國外的精華,學好英語相信是毋庸置疑的

還有,不會英文你可能連報錯都看不懂,還有google+stackoverflow的超級組合咧

學英語其實比學編程簡單多了,而且產出比非常高,你可以從裝翻譯插件開始 你只需要堅持背背單詞+強迫看一段時間的英文文章,技術辭彙就那麼點,很快你就能看得懂了。

這一點上,請相信我好嗎,你不會後悔的。

三、搜索+提問

個人搜索問題三大步驟,請放棄百度,擁抱google,查看順序 1、官方文檔+github 2、Stack Overflow 3、國內答案、博客、其他

搜索不出來後,可以求助於同事或者朋友,請準確描述問題 不要沒搜索過就問人,反正我就會很反感這樣的人咯,別人的時間也很寶貴的

四、總結、反思、歸納

這一個,更多的是一個思維習慣 也是提升自己最關鍵的一個步驟

具體怎麼做呢? 如果初中高中有做過錯題本、喜歡做筆記的同學,特別是理科生,可能會比較容易理解這一塊

最笨的方法,先從記錄bug、寫博客開始,得先有一部分的實踐與素材才能開始整理歸納 然後慢慢歸納同一類問題,同一類優化方案 至於更高層次的舉一反三,就要看個人積累與沉澱了

其實這一步也不難,對嗎,也就是多寫寫,記錄記錄而已

另外就是,看了別人的博客文章,也可以記錄下來,作為自己的經驗所用 踩在別人的肩膀上,你會看得更遠 如果踩的是巨人,那就更好了

最後

如果你覺得這篇文章不錯,請別忘記點個關註哦~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 新的一天又開始了,今天學習了三個內容 一、表格標簽 table 在各個網頁中我們會發現許多商品頁面,展示是用什麼來展示的呢,表格無疑是一種不錯的選擇看下圖。 一張常見的簡歷就是有表格標簽來編寫的 創建表格: <!-- 表格由基本標簽table tr td組成其中tr代表表格的行 td代表表格的列,行 ...
  • 一、什麼是 Promise 1.1 Promise 的前世今生 Promise 最早出現在 1988 年,由 Barbara Liskov、Liuba Shrira 首創(論文:Promises: Linguistic Support for Efficient Asynchronous Proce ...
  • JavaScript中數組去重的幾種方法 正常情況下,數據去重的工作一般都是由後端同事來完成的,但是前端也要掌握好處理數據的能力,萬一去重的工作交給我們大前端處理,我們也不能慫呀。現在我總結了一些去重的方法,希望對大家有點幫助。 方法一:new Set()實現數組去重 ES6 提供了新的數據結構 S ...
  • CSS實現居中對齊的幾種方式 頁面佈局中,居中對齊是我們經常遇到的場景,現在總結幾個常用的方式供大家參考。 場景一:按鈕文字居中對齊,line-height + text-align html代碼: <div class="btn">Hello World</div> CSS代碼: .btn{ wi ...
  • 做一個簡易計算器,效果圖片 c表示清空,為一個空字元串 +/-表示該值為正還是負 %表示當前值/100 ←表示退格,往前刪除一個值 eval 函數是能夠計算出字元串表達式或者語句的結果,把結果求出來。 代碼如下 <!DOCTYPE html> <html> <head> <meta charset= ...
  • 我第一次直播寫代碼是在去年七月份。我想要直播一下我在業餘時間內為開源項目領域所做的工作,儘管在youtube上的大部分直播都是關於游戲的。我比較擅長於NodeJS的硬體庫方面的工作(儘管大部分項目都是自己的)。並且我在youtube上曾經開啟過一個房間了,那為什麼我不繼續做下去?我的欄目可以叫做:基 ...
  • 現在,Safari(技術預覽版106)和Firefox(版本78)的預覽版均支持新的CSS :is() 和 :where() 偽類。 Chrome的實施仍然落後。 使用 :is() 減少重覆 你可以使用 :is() 偽類來刪除選擇器列表中的重覆項。 /* BEFORE */ .embed .save ...
  • 接下來就好好介紹一下這七個開發調試工具,用起來是真的爽啊。建議收藏使用哦! Web瀏覽器中的開發工具 任何現代的 Web 瀏覽器都配有功能強大的工具來調試應用程式。 如使用控制台語句cconsole.log(),使用alert()的彈出視窗,還可以使用debugger語句暫停代碼執行,這些對於我們的 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式(靜態工廠模式)1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點:2. 總結:3 ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說,下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫,因此mysql數據發生改變時,Elasticsearch也必須跟著改變,這個就是Elasticsearch與my ...
  • 引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據,今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫,旨在最大程度地減少單元測試中的“安排(Arrange)”階段,以提高 ...
  • 經過前面幾個部分學習,相信學過的同學已經能夠掌握 .NET Emit 這種中間語言,並能使得它來編寫一些應用,以提高程式的性能。隨著 IL 指令篇的結束,本系列也已經接近尾聲,在這接近結束的最後,會提供幾個可供直接使用的示例,以供大伙分析或使用在項目中。 ...
  • 當從不同來源導入Excel數據時,可能存在重覆的記錄。為了確保數據的準確性,通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間,而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟: 1. 首先安裝免費.NET ...
  • C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式,使程式更加健壯和可靠。 異常處理的基本概念: 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • 優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解,包括JDK和第三方庫。 我花了很多時間來學習API,尤其是在閱讀了Effective Java 3rd Edition之後 ,Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發,而不是為常見的東西編 ...
  • 框架 · 使用laravel框架,原因:tp的框架路由和orm沒有laravel好用 · 使用強制路由,方便介面多時,分多版本,分文件夾等操作 介面 · 介面開發註意欄位類型,欄位是int,查詢成功失敗都要返回int(對接java等強類型語言方便) · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵,火星子都快出來了。司機跟那同事更熟一些,連我在內一共就三個人,同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了,馬上聽出來了,為那個無辜的企業經辦人辯護,實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責, ...