摘要：一個(gè)前端菜鳥(niǎo)的成長(zhǎng)記現(xiàn)在才總結(jié)似乎有點(diǎn)晚，但聊勝于無(wú)，記錄一下我的，畢業(yè)的第一年，對(duì)于人生意義重大的一年。感謝勇哥新哥，給予我機(jī)會(huì)去做更多的嘗試。

現(xiàn)在才總結(jié)似乎有點(diǎn)晚，但聊勝于無(wú)，記錄一下我的2016，畢業(yè)的第一年，對(duì)于人生意義重大的一年。

打從進(jìn)入了大四之后，便深深的意識(shí)到了就業(yè)的壓力，并一直在做著邁向社會(huì)的準(zhǔn)備。從2015年9月開(kāi)始，便開(kāi)始投簡(jiǎn)歷（技術(shù)類(lèi)的招聘一般都比較早），每天8點(diǎn)出8點(diǎn)歸，總算沒(méi)有辜負(fù)辛苦了兩個(gè)月的自己，斬下一些不好不壞的offer。

11月開(kāi)初，技術(shù)類(lèi)的招聘已經(jīng)基本結(jié)束了。不甘于閑賦在學(xué)校的我又開(kāi)始了自己的實(shí)習(xí)之路。
說(shuō)起來(lái)也是慚愧，在這實(shí)習(xí)期間，我竟輾轉(zhuǎn)了三家公司進(jìn)行實(shí)習(xí)。

在4399實(shí)習(xí)期間，鍛煉了我非常多的東西。感謝勇哥、新哥，給予我機(jī)會(huì)去做更多的嘗試。

在4399中，我有幸進(jìn)入到UED部門(mén)，在設(shè)計(jì)組中擔(dān)任前端工程師。

在這期間，我頭一回面向多項(xiàng)目編程，在這期間積累了非常多的實(shí)戰(zhàn)經(jīng)驗(yàn)，也開(kāi)始有了自己書(shū)寫(xiě)HTML、CSS、JS的規(guī)范。同時(shí)，在此期間自己不自量力地嘗試起了前端代碼構(gòu)建工具——gulp，以自己的理解寫(xiě)了一篇粗鄙的gulp介紹——Gulp Introduction。

研究完gulp之后，自己摸索著將gulp運(yùn)用到實(shí)際的開(kāi)發(fā)工作當(dāng)中，在勇哥的指點(diǎn)下，開(kāi)始跳出項(xiàng)目外去思考，嘗試?yán)霉ぞ呓夥烹p手，向模塊化邁進(jìn)，寫(xiě)出文章——在項(xiàng)目中使用gulp。

在4399的這段寶貴的實(shí)習(xí)經(jīng)歷中，讓我對(duì)大前端、“技術(shù)選型”、“構(gòu)建工具”、“腳手架”有了一個(gè)更加深刻的認(rèn)識(shí)，讓從前僅會(huì)隨便寫(xiě)一下簡(jiǎn)單頁(yè)面的菜鳥(niǎo)跳出一切都已經(jīng)準(zhǔn)備好的舒適區(qū)，從無(wú)到有的學(xué)習(xí)、創(chuàng)作、進(jìn)步。

過(guò)完春節(jié)，在濱豪的推薦、南風(fēng)姐的幫忙下，有幸進(jìn)入到UC進(jìn)行實(shí)習(xí)，再次開(kāi)始一個(gè)全新的旅程。

在UC中，我就職于海外業(yè)務(wù)組，基于NodeJS進(jìn)行爬蟲(chóng)的開(kāi)發(fā)。

在此之前，雖對(duì)NodeJS已經(jīng)有一個(gè)初步的認(rèn)識(shí)，也曾從書(shū)籍上學(xué)習(xí)過(guò)。但我始終認(rèn)為，在前端、乃至技術(shù)的學(xué)習(xí)中，如果沒(méi)有項(xiàng)目驅(qū)動(dòng)（無(wú)論是工作業(yè)務(wù)還是自己創(chuàng)造的需求），都是很難真正的學(xué)會(huì)的。

從一入職，我所做的第一件事就是學(xué)習(xí)項(xiàng)目組里面的編碼規(guī)范，包括命名規(guī)范、代碼縮進(jìn)、編寫(xiě)風(fēng)格、注釋規(guī)范等，我才深深的感受到一個(gè)精良的規(guī)范對(duì)于一個(gè)團(tuán)隊(duì)的良好運(yùn)行，是多么重要的事情。

在之后的爬蟲(chóng)開(kāi)發(fā)當(dāng)中，我越發(fā)的感受到編碼規(guī)范、代碼可讀性、code review等對(duì)于團(tuán)隊(duì)的重要性。以前一直以為這些東西都是很虛的，但當(dāng)團(tuán)隊(duì)日益龐大，業(yè)務(wù)日益繁重時(shí)，如果不能保證代碼的可讀性，是會(huì)嚴(yán)重的拖慢團(tuán)隊(duì)進(jìn)度的。同時(shí)，嚴(yán)格的code review，可以防范于未然，規(guī)避很多日后意想不到的問(wèn)題發(fā)生。從來(lái)沒(méi)想過(guò)，自己寫(xiě)的代碼原來(lái)挺爛的...

在爬蟲(chóng)開(kāi)發(fā)中，越來(lái)越感覺(jué)NodeJS對(duì)于“前端”的革命是那么的巨大。它讓“前端”不再局限于所謂的“切圖”當(dāng)中，僅僅幾十行代碼，一個(gè)爬蟲(chóng)就能寫(xiě)出來(lái)了，而且運(yùn)行良好，足以支撐巨大的業(yè)務(wù)。同時(shí)，NodeJS的出現(xiàn)，也讓前后端沒(méi)有了編程語(yǔ)言上的溝通障礙，能夠更好的協(xié)作。

而我，也在這次實(shí)習(xí)中接觸學(xué)習(xí)并熟悉了很多必備的技能：正則表達(dá)式、Promise、命令行操作等。

在一系列的機(jī)緣巧合之下，我來(lái)到了現(xiàn)東家，從入職到現(xiàn)在工作了8個(gè)月的時(shí)間，在其中飽嘗酸甜苦辣，技術(shù)得到了飛躍的進(jìn)步。

感謝老大，沒(méi)有他當(dāng)時(shí)的拍板就沒(méi)有現(xiàn)在的我，無(wú)盡感激~（雖然到現(xiàn)在我也不知道為什么當(dāng)時(shí)他會(huì)看中我...）

如何入職暫且不表，但這段經(jīng)歷對(duì)于我來(lái)說(shuō)，是一個(gè)絕對(duì)重大的人生轉(zhuǎn)折點(diǎn)，它讓我開(kāi)啟了一個(gè)全新的職業(yè)生涯，也讓我對(duì)創(chuàng)業(yè)有了更深、更全的認(rèn)知。

對(duì)的，我就是進(jìn)入到了一家前景非常可期的創(chuàng)業(yè)公司！

在這里，我是最初期的團(tuán)隊(duì)中的一員，在老大的指引下，一步步從無(wú)到有的在前端這條路上越走越遠(yuǎn)。

咱們團(tuán)隊(duì)是“JavaScript 全棧開(kāi)發(fā)團(tuán)隊(duì)”，在此打個(gè)小廣告，歡迎志同道合的你。入職以來(lái)，我的title是“客戶端開(kāi)發(fā)工程師”，主要開(kāi)發(fā)咱們的APP。對(duì)的，你猜到了，用的就是REACT NATIVE。

在老大給我搭好了開(kāi)發(fā)所需的初始框架之后，我便開(kāi)始投入到工作當(dāng)中。然而，我要怎么開(kāi)始呢？！當(dāng)時(shí)的我?guī)锥茹卤?，咬咬牙便開(kāi)始摸索起來(lái)。

那時(shí)候我可是一個(gè)連github.com都不怎么會(huì)用的人呀，所以只能從文檔、老大給的starter-kit入手，一步步地啃并動(dòng)手學(xué)習(xí)。

從搭建開(kāi)發(fā)環(huán)境開(kāi)始，我便陷入了深深的蛋疼當(dāng)中...怎么讓windows中跑起starter-kit，我足足研究了兩天，折騰了一大堆，后來(lái)總結(jié)起來(lái)，嘔出了Windows下安裝React Native的安卓環(huán)境這篇文章。

說(shuō)實(shí)話，搭建RN環(huán)境，挺累的...

開(kāi)發(fā)環(huán)境搭好之后，就抓緊學(xué)習(xí)RN的寫(xiě)法了。RN用的是一套全新的XML標(biāo)簽，與一套全新的CSS語(yǔ)法，雖然看樣子格式還是那種格式，但背后卻有不同的學(xué)習(xí)成本。在摸索完之后，我便開(kāi)始以我之前積累下來(lái)的移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)經(jīng)驗(yàn)，開(kāi)始摸索著開(kāi)發(fā)移動(dòng)端的頁(yè)面了。對(duì)著設(shè)計(jì)稿，摸索這RN中使用了REM、百分比、flex，以打造一個(gè)可以多屏幕適配的頁(yè)面。

還記得當(dāng)時(shí)開(kāi)發(fā)第一個(gè)頁(yè)面的時(shí)候，打一行代碼需要重寫(xiě)三遍，一個(gè)頁(yè)面基本做完，又推倒重做，用2天時(shí)間，終于弄出了一個(gè)與設(shè)計(jì)稿大體相似的頁(yè)面。看到成果時(shí)，感覺(jué)沒(méi)白熬。

之后當(dāng)然就是接二連三的爬坑啦?？傊?，在這段日子里，我摸出了：

github插件選擇（star，issue），找RN的插件的話，js.coach/react-native/是個(gè)不錯(cuò)的選擇

npm版本控制很重要

技術(shù)選型

代碼組織的藝術(shù)

項(xiàng)目架構(gòu)的前瞻性、拓展能力

深挖業(yè)務(wù)需求，凡事多想想，避免對(duì)代碼打上“日后必定重寫(xiě)”的tag

APP開(kāi)發(fā)到了一定程度，就碰到了JS所不能解決的瓶頸——原生SDK的接入。因?yàn)楫?dāng)時(shí)的業(yè)務(wù)需求，已經(jīng)到了第三方插件無(wú)法滿足需求的時(shí)候了。為了實(shí)現(xiàn)功能，必須進(jìn)入到android和ios中去寫(xiě)RN可以用的插件。當(dāng)時(shí)看到客戶端原生代碼（java, Objective-C）的時(shí)候真的是一臉懵逼，尤其是Objective-C，全新的寫(xiě)法讓我迫不得已思考了一天的人生。

沒(méi)辦法，只得抄著現(xiàn)有的第三方插件庫(kù)，半抄半寫(xiě)。途中已然忘記在多少個(gè)QQ群中問(wèn)人，也記不起找過(guò)多少個(gè)朋友，多少個(gè)群友去問(wèn)問(wèn)題了，只記得同事們都對(duì)我說(shuō)：“駿馬面前無(wú)溝壑”...

終于，我對(duì)RN的熟悉度越來(lái)越高，開(kāi)發(fā)起來(lái)也沒(méi)那么吃力了。當(dāng)然爬坑是少不了的，但已然沒(méi)有那么痛苦。趁著在業(yè)務(wù)不是那么多的時(shí)候，我趕緊買(mǎi)了幾本android、ios的入門(mén)書(shū)籍啃起來(lái)。感覺(jué)回到了剛開(kāi)始學(xué)前端的時(shí)候，啃“JavaScript高級(jí)程序設(shè)計(jì)”那段日子...

在項(xiàng)目開(kāi)發(fā)到一定體量的時(shí)候，之前寫(xiě)得很爛的代碼、不太合適項(xiàng)目的架構(gòu)，已經(jīng)嚴(yán)重的拖了后腿了，讓項(xiàng)目開(kāi)發(fā)變得難以高效迅速。在深思熟慮過(guò)后，我決定來(lái)一次項(xiàng)目代碼重構(gòu)。

這次重構(gòu)，的確預(yù)備了很久了。我把平時(shí)寫(xiě)業(yè)務(wù)代碼時(shí)碰到的一些不爽的點(diǎn)都收集起來(lái)，然后每天下班回家就在想要如何做才能夠更好的在滿足業(yè)務(wù)需求的前提下，高效迅速的開(kāi)發(fā)。這一次代碼重構(gòu)主要針對(duì)下面幾點(diǎn)：

將非常通用的組件（入Toaster, Confirm, Picker等），從以xml的格式應(yīng)用，轉(zhuǎn)變?yōu)楹瘮?shù)調(diào)用。例如我之前需要在頁(yè)面中引入錯(cuò)誤提示Toaster這個(gè)組件，是要在render中加上這個(gè)標(biāo)簽的。而現(xiàn)在，只需要在需要的時(shí)候，協(xié)商Toaster.error(new Error("錯(cuò)誤提示"));，即可完成調(diào)用。這個(gè)一定程度上避免了react + redux下if-else嵌套過(guò)多的問(wèn)題；

重整項(xiàng)目中store冗余，不夠精細(xì)的問(wèn)題。目前以頁(yè)面為維度，來(lái)進(jìn)行store的組織，同時(shí)補(bǔ)充一些全局通用的store。

重整頁(yè)面代碼的組織結(jié)構(gòu)，將其調(diào)整為一個(gè)較為通用、規(guī)范的組織結(jié)構(gòu)。

革自己的老命，可不是開(kāi)玩笑的...

已讀但不限于：

<瘋狂Android講義>



<你不知道的javascript（上卷）>
<深入淺出NodeJS>

<第二屆FEDay前端年會(huì)>
<騰訊IMWeb>
<第三屆CSS大會(huì)>

在此特別感謝裕波大大與前端圈可愛(ài)的工作人員們，為我們廣州人民帶來(lái)了這兩場(chǎng)盛大的高質(zhì)量前端技術(shù)分享會(huì)議。

多參加技術(shù)會(huì)議，能極大的開(kāi)拓自己的技術(shù)視野哦！

在技術(shù)上，不懂的還是太多了。2017年，希望自己能夠再接再厲，向當(dāng)一名優(yōu)秀的前端工程師這個(gè)夢(mèng)想繼續(xù)努力。

多讀（15本書(shū)），多寫(xiě)，多總結(jié)（15篇分享）。

同時(shí)，希望自己能夠多多接觸除技術(shù)以外的事物，努力拓展、拓寬自己的視野，交際！