一個前端菜鳥的成長曆程

  從實習算起，到如今工做了也有一年半的時間了，在這期間，深深感覺到了前端領域的飛速發展，在這裏記錄一下本身的成長曆程，算是對知識的一個梳理，也但願幫助到剛入行的同窗們。說來慚愧，大學裏並無涉及前端的知識，當時對本身的定位很迷茫，不知道畢業以後何去何從。因此盲目的報了不少學習班，還考了思科認證的網絡工程師，雖然沒走網絡方向，可是這一塊的知識在工做後確實對個人幫助很大，畢竟網絡是基礎。

  那時候，在個人認知裏，前端只是寫寫頁面，作作交互，切切圖。那時候，我還沒據說過什麼腳手架，什麼構建工具，甚至沒據說過ES6。以爲jQuery真的是救世主同樣的存在。

  第一天進入公司，心情是徹底不同的，儘管那時候沒有小豬佩奇的手錶，但也深感本身是個社會人了。

  入職第一天，我被要求先搭開發環境，給了我一個Excel表格，是一個長長的清單，一個一個安裝，而後拉取代碼，還要執行一大堆的命令，這都是什麼鬼東西！徹底不知道本身在幹什麼。就記得一直報錯，各類看不懂！無論怎麼說，花了整整一天，總算是搞定了！就這樣，憑着崴腳的基礎就上手了。剛開始看不懂別人寫的代碼，全憑本身天馬行空的想法去作，一行行流水帳似的代碼寫的我開始懷疑人生。

  直到有一天，leader看了我寫的一坨代碼以後，點了點頭，而後選中，刪除。緊接着，畫了一個下劃線，又點了個小數點，後面還跟了個單詞，寥寥幾句，代碼竟然還能正常跑通！我勒個去！代碼原來還能這麼寫！今後開始，我認識了Underscore和lodash。在沒有使用ES6的時候，這個庫真的是萬能工具箱，操做起數據來駕輕就熟，只要把數據結構整明白，剩下的都是一句話的事。那時候，真的是喜歡上了操做數據的過程。可是目前看來，babel的引入，代碼裏開始支持ES六、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和麪經，並非爲了跳槽，而是關注一下最近你們都須要什麼樣的人才，須要補充本身哪方面的知識。知己知彼，方能百戰百勝！平日裏還喜歡逛技術論壇，看看你們都在玩啥黑科技。有什麼技術沙龍偶爾也去參加一下，得時刻關注技術的發展，學習大廠的解決方案。

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

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