從實習算起，到現在工作了也有一年半的時間了，在這期間，深深感受到了前端領域的飛速發展，在這裡記錄一下自己的成長曆程，算是對知識的一個梳理，也希望幫助到剛入行的同學們。說來慚愧，大學裡並沒有涉及前端的知識，當時對自己的定位很迷茫，不知道畢業之後何去何從。所以盲目的報了很多學習班，還考了思科認證的網路工程師，雖然沒走網路方向，但是這一塊的知識在工作後確實對我的幫助很大，畢竟網路是基礎。
那時候，在我的認知裡，前端只是寫寫頁面，做做互動，切切圖。那時候，我還沒聽說過什麼腳手架，什麼構建工具，甚至沒聽說過ES6。覺得jQuery真的是救世主一樣的存在。
第一天進入公司，心情是完全不一樣的，儘管那時候沒有小豬佩奇的手錶，但也深感自己是個社會人了。
入職第一天，我被要求先搭開發環境，給了我一個Excel表格，是一個長長的清單，一個一個安裝，然後拉取程式碼，還要執行一大堆的命令，這都是什麼鬼東西！完全不知道自己在幹什麼。就記得一直報錯，各種看不懂！不管怎麼說，花了整整一天，總算是搞定了！就這樣，憑著崴腳的基礎就上手了。剛開始看不懂別人寫的程式碼，全憑自己天馬行空的想法去做，一行行流水賬似的程式碼寫的我開始懷疑人生。
直到有一天，leader看了我寫的一坨程式碼之後，點了點頭，然後選中，刪除。緊接著，畫了一個下劃線，又點了個小數點，後面還跟了個單詞，寥寥幾句，程式碼居然還能正常跑通！我勒個去！程式碼原來還能這麼寫！從此開始，我認識了Underscore和lodash。在沒有使用ES6的時候，這個庫真的是萬能工具箱，操作起資料來得心應手，只要把資料結構整明白，剩下的都是一句話的事。那時候，真的是喜歡上了運算元據的過程。但是目前看來，babel的引入，程式碼裡開始支援ES6、7的語法，很多Underscore中的高頻函式都被原生實現了，為了縮減程式碼體積，這樣的類庫在逐漸淡出人們的視線。說道這裡，必須要提一提阮一峰老師的《ES6入門教程》了，不僅詳細介紹了語法內容，還給出了大量的使用案例和技巧，可以說是一本經典之作了。
入職不久後，，我接觸到了第一個前端框架Angular1.x,基於yeoman腳手架，整合了grunt，那時候才知道了前端還有構建這個概念。相較於grunt晦澀難懂的配置檔案，gulp的管道思想似乎更容易讓人理解。使用了框架，資料更新後頁面自己就變了，也不用再去操作dom。在grunt和各種外掛的幫助下，程式碼還可以邊修改，邊自動重新整理，哇！真的是高效！又一次重新整理了我對前端的認識。然後開始惡補框架的知識，各種指令，各種service，讓開發過程越來越簡單。我們不再需要關注過多諸如事件委託之類的優化，框架都會自己做掉，於是有更多的時間放在了業務本身。Angular1.x是不支援服務端渲染的，也就是說，它對seo不友好，所以當時我們使用jade來渲染需要服務端直出的頁面，依稀記得嚴格的語法縮排搞得我痛不欲生。
Sass和less等的使用，讓css變得更強大，配合postcss的使用，我不再關注不同瀏覽器的差異。在重度依賴bootstrap的時候，柵格佈局的出場率總是那麼高。後來，我認識了flex，生活彷彿都變得更美好了！
之後，我們開始使用UI元件來提升效率。UI元件庫可以說是遍地開花。在PC端，Element UI和Ant Design是比較主流的。實際使用的時候，還是要結合自身業務和使用場景，例如是否需要支援ssr。後來我也使用過一些移動端和小程式的元件庫，總結一下，一定要使用長期維護的，issue更新較快的，不然遇到坑會很煩惱，別問我是怎麼知道的。
再後來，我逐漸能勝任更多的任務，開始參與資料視覺化這塊的開發，於是，我又見到了echarts和d3.js。說起d3.js，真的是讓我愛恨交加。為了畫出我想要的圖形，我又找回了已經還給老師的數學知識，每天就像在做數學卷子，似乎又回到了那個高中的時代！還把svg和canvas的基本概念也擼了一遍。張鑫旭老師的svg文章寫的很棒，解決了我的許多困惑。
16年小程式首發的時候，為了探索流量紅利，我們也想要搶佔這個首發的優勢，那時候，我輔助開發小程式，文件看了好幾遍，還是理不清小程式的思想。而且由於首發之後，維護的比較少，所以也就再沒過多涉獵。今年，小程式突然大規模爆發，我又開始了重新整理小程式的內容，時隔近一年，再次開啟文件，原先看了一週都不明白的文件，竟然可以兩小時上手了，而且自己又獨立開發了一個完整的小程式，或許這就是成長。也有很多小程式的框架湧現出來，比如官方的wepy,美團的mpvue。類vue的思想讓開發者的學習成本再次降低。對於最近炒的也挺火的pwa和快應用，個人建議需要用的時候補充即可，沒有業務需求自己去實踐成長速度是比較慢的，而且容易遺忘。
17年是Vue輝煌的一年，這一年來，它的生態系統如雨後春筍般的發展。webpack也似乎成了前端er的標配。Vuex藉助Flux的思想而設計。它改變了我對狀態資料管理的認識。在龐大的應用面前，狀態管理變得讓人頭疼。Vuex集中化的管理可謂是一劑良藥！為了支援SEO，我在專案中使用了Nuxt實現了前後端同構。第一次聽說同構這個概念還是在17年的全國前端開發者大會上，那時候感覺離自己很遙遠。現在回憶，當時會議分享的很多內容都在一年內飛速的發展並逐漸應用起來。所以，多參加一些交流分享會還是很有必要的。
後來嘗試自己去做一些東西的時候，開始涉及到服務端和運維相關的知識，一點一滴去優化每一個環節。逐漸去提升效能。從頁面上的小圖示開始。不再使用大量的png小圖片，而是使用iconfont，減少http請求，而且向量可以保障顯示的清晰度；程式碼打包壓縮合並，自動上傳到物件儲存，減小伺服器壓力，並使用cdn進行加速；使用gzip壓縮程式碼減少網路傳輸量；nginx做反向代理和快取；pm2守護node程式，保證服務的可用性；使用docker映象部署服務簡化部署流程而且避免環境差異導致的問題等等。總之每個環節都是一門學問。
個人感覺這一年多來，除了學會了不少新東西，更重要的是學會了如何去學習新知識，如何去發現未知的領域，如何去解決問題。剛開始，遇到問題直接百度或者谷歌關鍵詞，或者stackoverflow找一把，選出高票回答，總能有效的解決問題。但是，很多時候都不知道具體的原因。
在同事的引導下，我逐漸開始重視文件這個東西。最初我認為他只是寫給初學者看的，枯燥乏味。但事實上，文件寫明瞭需要的大部分東西。特別是第三方外掛的文件，如果遇上問題解決不了，那就把文件過一遍。還沒有解決？那麼，再細緻地看一遍！還是不行？開啟github，去外掛的issue裡面搜一搜，如果還是不行，再去借助搜尋引擎等的幫助。如果原始碼不復雜，就看看原始碼怎麼寫的吧！這是我總結的比較快速定位和解決問題的方式，屢試不爽。在使用現成的外掛的時候，嘗試猜測程式碼的實現原理，有條件可以閱讀原始碼，這樣會有利於規避錯誤的的使用方式，也更容易提升自己。所謂錯誤的使用方式，我這麼解釋一下吧，如果你發現你的程式碼變得複雜而又難看，像流水賬，那麼嘗試去換個角度實現它吧，要始終相信程式碼裡有魔法的存在！
前端這個領域的發展日新月異，不必要精通每個前端框架，而是要理解框架的設計思想，理解他們的差異。而且無論現代前端技術再怎麼玩，終歸還是要回歸到html，css和javascript上來。所以，基礎知識的牢固就顯得尤為重要！
css是個不怎麼聽話的孩子，總是會搞出一些奇奇怪怪的事情來！張鑫旭老師十年磨一劍，鑽研css的魔法，可見其中技術細節有多複雜。當然，對於大部分開發者來說，可能沒那麼多時間與精力來投做到這樣，但是大部分的基礎概念還是要爛熟於心的。javascript嘛，業界經典的兩本書（紅寶書、犀牛書）選一本啃好了（慚愧慚愧，我還沒啃完）！但是對於入門者來說，《head first》系列的可能更適合，一上來就讀經典，難免會望而卻步。入門的時候還讀過《JavaScript DOM程式設計藝術》，也推薦給初學者。
設計模式這個東西不算神祕，如果你是一個有追求的人，很可能不知不覺已經在程式碼裡面使用到了，只不過你不認識他而已。比起後端，前端對於設計模式的使用不算太多。多瞭解一下，可以讓你更容易理解大神的程式碼，而且，自己寫的程式碼也會越來越漂亮。這裡安利一把曾探老師寫的《JavaScript設計模式與開發實踐》。
資料結構就不多說了，還是推薦一本書吧，《學習javascript資料結構與演算法》，這本書很適合入門者，進階的話，大家給我推薦推薦啦。
http也是比較重要的一門知識，比如http快取，快取的重要性我就不多講了。之前讀過《圖解http》這本書，讀漫畫一樣的就下來了，通俗易懂。
突然間意識到，文章裡安利了太多的書籍，有點打廣告的嫌疑。各位看官莫見怪，這裡列出的都是本人讀過而且覺得有幫助的，大家選擇性採納。宣告一下，我真不是賣書的！
我有個習慣，就是每隔一段時間就回去看一波招聘的JD和麵經，並不是為了跳槽，而是關注一下最近大家都需要什麼樣的人才，需要補充自己哪方面的知識。知己知彼，方能百戰百勝！平日裡還喜歡逛技術論壇，看看大家都在玩啥黑科技。有什麼技術沙龍偶爾也去參加一下，得時刻關注技術的發展，學習大廠的解決方案。
最後感謝那些一路走來給予我幫助的人！
好了，今天的分享就到這裡，欲知更多技術細節，且聽下回分解！