個人2016：從野路子到正規軍的前端養成記

時間 2019-11-05

標籤個人路子正規軍前端養成简体版

原文原文鏈接

2016年終於進入尾聲啦，恰好也趁着@segmentfault社區舉辦的《回顧 2016，你都收穫了什麼？》活動，好好回顧一下個人2016年。javascript

2016年發生的事情很是多，仍是以時間爲線索慢慢寫起吧html

1、結束實習

在今年年初的時候，正式從實習了半年的單位離職。在這半年的實習時間內，負責的是公司電商系統的前端頁面開發，第一次接觸了VueJS這個框架。當時整個公司加上我只有2個前端工程師，要作的網站倒是功能複雜，需求更改頻繁，重構也是屢見不鮮。隨着系統複雜度的提高，原有的架構已經不能知足，通過和老大的溝通，最終敲定了使用VueJS做爲基礎框架，進行徹底的重構。在重構的過程當中遇到過許多坑，還好最終都一個一個填了過來，也積累了許多寶貴的經驗。前端

爲了適配不一樣的設備，第一次接觸到了「響應式設計」，也得以有機會深刻研究bootstrap的源碼，學習了它是如何組織代碼，如何解耦變量，如何拆分文件等工程化的知識，明白了原來樣式能夠這樣寫。後來回頭總結寫了一篇文章bootstrap3.x內less文件夾的文件內容及功能分析，有興趣的能夠去瞧一瞧。也基於這一次對於bootstrap源碼的學習，終於可以看懂別人家的樣式庫是怎麼寫的了，後來本身也造了一個輪子：elf，基於flexbox的響應式CSS框架。vue

後來由於畢業論文，以及輔導員隔三差五就要抓人開會等蛋疼的事情，終於在過年前辦完了離職手續，回家過年之後就正式結束了實習。java

這份實習對我意義非凡，在不足半年的短短的時間內，讓我有機會接觸到行業最新的技術，讓本身的實戰能力獲得巨大的提高。webpack

2、面試狂魔

過年的時候和女票兜了一圈長沙和鳳凰古城，回來之後快馬加鞭地勾搭面試。因爲技術太爛錯過了秋招，因此能好好把握春招的機會了。其實在過年前我已經有心儀的公司了，可是HR說他們已經招滿，即便要面試也得在過完年之後才能安排，因此只能慢慢等唄。但是旅遊回來了尚未接到面試通知，內心難免有些慌，爲了兩手準備，因而在某APP上放了一份簡歷。也許由於簡歷寫得還算OK，有很多的公司邀請我參加面試，也所以拉開了我「面試狂魔」的序幕。git

一個月內面試了大大小小超過十家公司，慢慢地積累面試經驗，總結教訓，知道了本身各方面的不足，也明白了「面試是雙向選擇」的道理。從說話結巴到「面試面試官」，我也慢慢成長爲一個「面試狂魔」，offer收割率也很不錯。github

等啊等，後來終於等到心儀公司的面試邀請了！一貫淡定的我……此次也很淡定，面試後仍是比較有信心的，起碼面試官問的問題我答得來，吹水的問題我接得上，大概是這樣了吧……web

嗯，而後就成了。面試

這段時間誕生了個人第一個開源做品，是一個用Vue作的markdown編輯器，叫作Markcook，那會仍是1.0版本，代碼特別澀……Markcook1.0的開發總結

3、畢業

大學的專業是光信息科學與技術，酷炫吧，搞光搞電搞相對論，就是不搞前端。還好個人導師對咱們比較放心，容許咱們自定題目。因此個人畢業設計妥妥的選擇了前端方向。

爲了方便而又略顯逼格，個人畢業設計選擇了製做一個「私人博客」，也就是沒有登陸註冊機制的一個博客……前端用的是我最喜歡的VueJS，後端的話選擇了PHP，數據庫使用傳統的MySQL。當時除了前端的技能，後端和數據庫徹底一竅不通，因此我但願趁畢業設計這個機會好好學習一下後端的技術。

PHP不愧是「世界上最好的語言」，真的很好學啊有木有，借了本書回來啃了一週就立馬着手進行後端的開發了，過程挺順利的，總算把先後端的一整套運行流程都摸了一遍，這對我往後的學習以及工做來講都很是有意義。在做品製做完成後，寫下了這篇文章：採用vue+webpack構建的單頁應用——私人博客MintloG誕生記，恰好也是我畢業論文的一部份內容。

拿了offer，簽了三方，完成畢設，經過答辯，我也在今年六月份結束了4年的大學生涯。雖然說從大三暑假開始就幾乎沒有在學校待着而是跑去深圳實習，可是當我真正拿到畢業證學位證的那一刻，我才發現，原來4年時光真的就這麼過去了，我也正式從象牙塔走向了社會。

時光這壞人偏卻冷酷如許，離場慢些也不準 ——《青春常駐》·張敬軒

4、補基礎，造玩具

因爲7月底才入職，因此在結束實習後的大半年內，我都處於自學的狀態。經過以前面試總結的經驗，我拿紙和筆一條一條列出了所未掌握的知識點，知道了有哪些基礎要補，有那些東西要學。

去泰國玩了一圈後，看完了《http權威指南》，《高程3》，《結構與算法的Javascript描述》等經典著做，對自身的技術體系有了一次全面的提升，可是奈何實戰經驗仍然不足，不少地方沒有理解通透，得找個時間好好重溫一下，一定能收穫更多。

與此同時，也開始挑戰熱門框架的源碼。從Zepto入門，結合網上的資料慢慢對它層層剖析，把整個庫的原理和一些不熟悉的寫法都研究了一遍，極大提升了我「看源碼」的能力，也總結出了一套屬於本身的分析源碼的心得。在往後的不少項目裏，遇到文檔不全或者有疑惑的地方都再也不懼怕了，直接扒源碼去了……

也是經過看各類各樣的源碼，學習到了不少設計模式和代碼規範，尤爲是看到一些簡潔又清晰的代碼，真的不由自主地要拍手叫好，潛移默化之下，本身的代碼也逐漸變得規範起來。一些好的開源項目，不只代碼邏輯清晰嚴密，並且文檔齊全，logo也設計得很好，很是優秀，也所以越看越手癢，後來忍不住了開始本身造玩具玩：

Markcook升級重構到1.2版本了：Markcook 1.2，超輕的開源markdown編輯器
學習NodeJS和算法，造了個輪子：自動化文件目錄結構生成工具——filemap.js
喜歡PHP的模版引入，因而寫了個能在html裏面實現模版引入功能的工具：gulp-html-import，在html中引入外部html文件
研究vue-cli的原理，本身擼了一個腳手架工具：教你從零開始搭建一款前端腳手架工具
到目前爲止我最喜歡的玩具：MottoJS，一個讓你的「座右銘」更好玩的JS插件

另外還翻譯了幾篇文章：

翻譯水平略渣，可是也讓我對英文的閱讀更加駕輕就熟，也開始習慣天天瀏覽Medium，Reddit等技術社區，掌握最新最熱門的前端資訊。

很榮幸連續兩個季度得到@SegmentFault 社區的Top Writer稱號，但願最後一個季度也能當選吧哈哈~

5、入職，接受正規軍訓練

若是說以前的經歷都是本身在摸爬滾打，那麼在7月底入職之後，纔算是真正見識到什麼叫正規軍的打法。從正式入職至今，我對於本身的評價是「多而不精」，典型的啥都會一點，卻啥都不精。因爲之前都是在小公司實習或者本身作小項目，幾乎徹底沒有團隊開發的概念，在第一次接手公司的業務，須要和其餘同事聯合開發某些業務模塊時，我居然發現本身無從下手。爲何一個看似簡單的功能要區分這麼多模塊？爲何要這樣寫而不是那樣寫？對業務代碼的見解從「這麼簡單的玩意兒居然這麼複雜」，到「哦哦原來如此」，再到「臥槽我根本就沒考慮到這種狀況」，入職以來我最大的成長就是戒掉心浮氣躁，學會踏實作人。

如今每接到一個新的任務，我都會仔細考慮分析它的各類可能情況，在開發的過程當中也時刻注意着會不會引發什麼反作用，在開發完成進行測試的時候也會老老實實認真細緻地進行，避免犯錯。

固然，也沒有中止寫博客的習慣，在工做中遇到的問題，通過仔細研究學習後，總能得到很多的收穫，也所以誕生了幾篇我以爲頗有意思的文章：

研究SEO的時候順便研究了下PhantomJS：基於 PhantomJS + Node + Express + VueJS 1.x 的服務端渲染實踐
研究強緩存evercookie源碼的時候，學了招黑科技：探索前端黑科技——經過 png 圖的 rgba 值緩存數據，順便作了個新玩具：SphinxJS——把字符串編碼成png圖片的超輕量級開源庫
研讀某框架源碼的時候，發現它居然可以在document上監聽設置了stopPropagation()的元素的事件，後來明白原來是函數劫持：談談JS中的函數劫持
研究HTTP2.0：深刻研究：HTTP2 的真正性能到底如何

更多的，仍是在業餘時間繼續學習，好比追隨Vue2的發佈順便升級個Markcook神馬的：Markcook2.0，使用Vue2.0和Vuex2.0進行徹底重構升級；以及研究Vue的源碼並加入本身想法的：使用ES6的新特性Proxy來實現一個數據綁定實例。越學發現水越深，越是工做越是發現和周圍大神的差距，越是不敢放鬆本身。