摘要：張鑫旭老師的文章寫的很棒，解決了我的許多困惑。所以，基礎知識的牢固就顯得尤為重要是個不怎么聽話的孩子，總是會搞出一些奇奇怪怪的事情來張鑫旭老師十年磨一劍，鉆研的魔法，可見其中技術細節有多復雜。

??從實習算起，到現在工作了也有一年半的時間了，在這期間，深深感受到了前端領域的飛速發展，在這里記錄一下自己的成長歷程，算是對知識的一個梳理，也希望幫助到剛入行的同學們。說來慚愧，大學里并沒有涉及前端的知識，當時對自己的定位很迷茫，不知道畢業之后何去何從。所以盲目的報了很多學習班，還考了思科認證的網絡工程師，雖然沒走網絡方向，但是這一塊的知識在工作后確實對我的幫助很大，畢竟網絡是基礎。

??那時候，在我的認知里，前端只是寫寫頁面，做做交互，切切圖。那時候，我還沒聽說過什么腳手架，什么構建工具，甚至沒聽說過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和面經，并不是為了跳槽，而是關注一下最近大家都需要什么樣的人才，需要補充自己哪方面的知識。知己知彼，方能百戰百勝！平日里還喜歡逛技術論壇，看看大家都在玩啥黑科技。有什么技術沙龍偶爾也去參加一下，得時刻關注技術的發展，學習大廠的解決方案。

??最后感謝那些一路走來給予我幫助的人！

??好了，今天的分享就到這里，欲知更多技術細節，且聽下回分解！