前言

自11月1號(hào)來(lái)到北京后，已經(jīng)有一個(gè)月了娃循，僅以小文總結(jié)一下此番來(lái)京的實(shí)習(xí)經(jīng)歷炕檩。

實(shí)習(xí)工資很低，再加上北京租房簽約多是一年起，為了離公司近笛质、費(fèi)用低兼得泉沾，我只得在離公司近的一個(gè)村里找了一個(gè)還不錯(cuò)的公寓住了下來(lái)，即使這樣一千多的房租還是讓我有點(diǎn)無(wú)奈妇押，要知道我在學(xué)校附近可以租一套小區(qū)里的四室一廳了跷究。我之前在昆明做外包攢的萬(wàn)把塊錢(qián)到這就幾乎生存不下去了，約了幾個(gè)在北京的好友之后更是捉襟見(jiàn)肘敲霍。

好在公司食堂很贊俊马，早中晚餐+下午茶+夜宵一共五頓免費(fèi)管夠，味道也比所謂的互聯(lián)網(wǎng)第一食堂豬場(chǎng)食堂好太多肩杈，可能是我去豬場(chǎng)面試的那兩次吃的菜都比較清淡吧~

這邊的hr小姐姐人很好柴我，在得知我來(lái)了北京后立馬幫我安排入職了~

我們團(tuán)隊(duì)有二十幾號(hào)人，應(yīng)該算是規(guī)模大的前端組了扩然，技術(shù)棧也非常新艘儒，不僅僅涉及到vue、webpack等流行前端技術(shù)夫偶，對(duì)可視化技術(shù)的研究在業(yè)內(nèi)也是非常有前瞻性的界睁。關(guān)于我們

技術(shù)架構(gòu).png

下面我將從這三個(gè)方面來(lái)總結(jié)這段實(shí)習(xí)日子的收獲：

• 工作氛圍
• 技術(shù)
• 其他

工作氛圍

1. 體驗(yàn)大廠規(guī)范的工作流程
   在這里，有著一套成熟的工作流兵拢。從項(xiàng)目翻斟、知識(shí)、郵件到日常辦公管理等卵佛，都有相應(yīng)的工具軟件支撐著杨赤。
   各個(gè)工作職責(zé)塊都被分割地巨細(xì)無(wú)遺，修bug需要幾人天都是記錄在案的截汪，這讓追蹤工作流和量化工作指標(biāo)成為可能疾牲。

2. 隨手可得的豐富知識(shí)資源
   我曾在freecodecamp里接觸到了read-search-ask的學(xué)習(xí)理念，在這里衙解，經(jīng)驗(yàn)豐富的前輩們?cè)缇桶严嚓P(guān)的優(yōu)秀學(xué)習(xí)資源總結(jié)羅列出來(lái)了阳柔，有需要的話可以結(jié)合google來(lái)read和search，最關(guān)鍵的是蚓峦，真人就在身邊舌剂，前兩步都搞不定可以輕松地請(qǐng)教和討論問(wèn)題。
   我可以在這里快速地學(xué)習(xí)到：

• 前端基礎(chǔ)暑椰，如css和JavaScript
• vue相關(guān)霍转，團(tuán)隊(duì)內(nèi)部甚至造了一個(gè)vue的UI庫(kù)
• 可視化相關(guān)，包括svg一汽、canvas避消、webgl低滩、three、d3岩喷、gis等
• 安全攻防相關(guān)恕沫，除了常規(guī)的安全攻防外還有流量過(guò)濾和流量分析等高級(jí)玩法
• 算法
• 大數(shù)據(jù)
  ...

3. 參與高效運(yùn)轉(zhuǎn)的團(tuán)隊(duì)協(xié)作
   我們有自己搭建的gitlab服務(wù)器，在這之前纱意，我還沒(méi)參與過(guò)人數(shù)超過(guò)三十個(gè)婶溯、平均每?jī)煞昼娋陀幸淮翁峤弧资畟€(gè)分支的項(xiàng)目偷霉，不過(guò)這次我有機(jī)會(huì)參與了迄委。對(duì)git中的add、commit类少、fetch跑筝、pull、merge瞒滴、rebase、push赞警、checkout妓忍、branch、reset等命令也有了更加深刻的理解愧旦，因?yàn)橛袘?yīng)用場(chǎng)景了嘛~
   有人說(shuō)世剖，大廠里大部分人都是螺絲釘，這句話無(wú)可厚非笤虫，社會(huì)分工本就是越來(lái)越細(xì)的旁瘫，正是因?yàn)橛写罅扛魉酒渎毜穆萁z釘高效地工作，才能產(chǎn)生出個(gè)人無(wú)法達(dá)成的成就琼蚯。根據(jù)二八法則酬凳，非螺絲釘只是少數(shù)人，目前我還是非常樂(lè)于當(dāng)螺絲釘?shù)摹?br> 之前還在學(xué)校跟著老師做項(xiàng)目的時(shí)候遭庶，我一個(gè)人可以負(fù)責(zé)需求宁仔、產(chǎn)品、策劃峦睡、前端翎苫、后端接口設(shè)計(jì)、服務(wù)器維護(hù)甚至在會(huì)議桌上爭(zhēng)取客戶榨了，但是那只有一個(gè)字：累煎谍。而且效率很低，有的做錯(cuò)了也全然不知龙屉。在這里我可以專心考慮前端的問(wèn)題呐粘，那種感覺(jué)是非常爽的。
   提交代碼之前，可以叫同事來(lái)review事哭，討論幾種解決問(wèn)題的思路漫雷。遇到難題的時(shí)候，還可以結(jié)對(duì)編程鳍咱，寫(xiě)出來(lái)的代碼又快質(zhì)量又高降盹。
   leader也告訴我：不要在已解決的通用問(wèn)題上耗時(shí)間，直接找解決過(guò)的人谤辜。

總結(jié)：

1. 編碼的時(shí)間是大于討論設(shè)計(jì)的時(shí)間的缅糟，因?yàn)樾枨罅看螅鞣綔贤ǔ杀疽埠芨?產(chǎn)品周拐、設(shè)計(jì)浪规、后端)。
2. 有命名規(guī)則脯倚、注釋等編碼約定渔彰，大家也自覺(jué)遵守，作為新人的我上手業(yè)務(wù)也很快推正。代碼格式通過(guò)eslint和stylelint控制恍涂。
3. 對(duì)于錯(cuò)誤、異常植榕、安全等沒(méi)有很明顯的的統(tǒng)一處理方案再沧，似乎期望測(cè)試測(cè)出來(lái)。
4. 接口和api的約定不是很穩(wěn)定尊残，雖然有wiki記錄著炒瘸，但是經(jīng)常變更用法。
5. 可重用代碼和模塊代碼都有標(biāo)準(zhǔn)的寝衫，使用一個(gè)自定義配置驅(qū)動(dòng)
6. 性能方面可視化那一塊很關(guān)注顷扩，因?yàn)樯婕暗酱罅康挠?jì)算，web worker要玩的很6竞端，業(yè)務(wù)這邊關(guān)注較少
7. 技術(shù)棧主要是vue以及它的生態(tài)插件屎即、有一個(gè)自制組件庫(kù)，沒(méi)有落后潮流事富，不過(guò)看樣子可視化那塊是領(lǐng)先的技俐，不過(guò)團(tuán)隊(duì)里還有人用jq
8. 寫(xiě)代碼偏獨(dú)立編程，團(tuán)隊(duì)里沒(méi)有結(jié)對(duì)編程的習(xí)慣统台，不過(guò)協(xié)同構(gòu)建很普遍雕擂，每個(gè)人熟悉一塊內(nèi)容，不懂直接找TA來(lái)幫忙就ok
9. 目前只看到leader封裝的庫(kù)里寫(xiě)了測(cè)試贱勃，業(yè)務(wù)部分沒(méi)有寫(xiě)自動(dòng)化測(cè)試腳本的習(xí)慣井赌，有配備測(cè)試團(tuán)隊(duì)但不是自動(dòng)化的
10. 提交代碼沒(méi)有review谤逼，不過(guò)可以自己找同事來(lái)review

技術(shù)

1. 開(kāi)發(fā)環(huán)境
   我剛接觸前端的時(shí)候用的是sublime，因?yàn)樗p量好用仇穗，打開(kāi)個(gè)啥都快的很流部，界面也好看。
   后來(lái)纹坐，開(kāi)始用Angular枝冀，typescript自帶的工程化特性已經(jīng)不適合用sublime寫(xiě)了，vscode成為了我新的伙伴耘子。
   現(xiàn)在來(lái)到了公司果漾，編輯器都變得那么無(wú)力，而且vue中的eslint似乎和vscode老過(guò)不去谷誓，我又是習(xí)慣先啪啪啪一頓寫(xiě)然后格式化的人绒障，不得已又換上了webstorm。真正的大型項(xiàng)目還得上IDE捍歪。
   不過(guò)好在公司有好人相助户辱，他負(fù)責(zé)國(guó)內(nèi)一個(gè)前端翻譯團(tuán)隊(duì)，解決這些環(huán)境問(wèn)題玩得跟砍瓜切菜一般糙臼，后來(lái)下班之余我倆就成了研究源碼的好伙伴焕妙。
   唯一想吐槽的就是公司發(fā)的電腦有時(shí)候刪不了文件，只能通過(guò)rd /s /q [filename]來(lái)刪除

2. vue全家桶
   這期間無(wú)論是看文檔還是寫(xiě)項(xiàng)目弓摘，我也基本熟悉了vue、vuex痕届、vue-router韧献、axios等全家桶的用法，期間碰見(jiàn)幾個(gè)有意思的點(diǎn)：
   2.1 動(dòng)態(tài)渲染路由
   有時(shí)候研叫，不同用戶所能看見(jiàn)的路由菜單是不一樣的锤窑，也就是需要后端返回當(dāng)前用戶的實(shí)際路由。這時(shí)候一般來(lái)說(shuō)有兩種解決方案：
   一.前端先掛載所有路由嚷炉，然后根據(jù)后端數(shù)據(jù)屏蔽某些路由渊啰。
   二.前端先接收后端數(shù)據(jù)，然后掛載路由申屹。
   我們?cè)谀硞€(gè)項(xiàng)目中使用的是第二個(gè)方案绘证，而且后端返回的是一個(gè)線性的數(shù)組，所以我們需要將它轉(zhuǎn)化成樹(shù)狀的數(shù)據(jù)結(jié)構(gòu)哗讥，然后再轉(zhuǎn)化成vue-router的數(shù)據(jù)結(jié)構(gòu)嚷那。
   期間感受到了從ts轉(zhuǎn)js沒(méi)有類型機(jī)制的不方便，而不熟悉vue-router的我在轉(zhuǎn)化成vue-router的時(shí)候也遇到了一個(gè)問(wèn)題杆煞，后面一查發(fā)現(xiàn)是少了meta字段魏宽，后面有時(shí)間把這個(gè)問(wèn)題復(fù)現(xiàn)一下單獨(dú)寫(xiě)篇文章分析一下腐泻。
   2.2 強(qiáng)大的vue tools
   有一次我在封裝一個(gè)業(yè)務(wù)組件的時(shí)候定位不到問(wèn)題，于是請(qǐng)教了一個(gè)編寫(xiě)基礎(chǔ)組件的同事來(lái)幫忙队询，只見(jiàn)他熟練地打開(kāi)Vue tools查看組件間的通信和內(nèi)部的狀態(tài)派桩，一下就找到了問(wèn)題。
   還有一次是坑爹的后端傳的破數(shù)據(jù)蚌斩，導(dǎo)致前端背鍋铆惑，也是vue tools幫忙找出來(lái)的。
   2.3 樹(shù)組件節(jié)點(diǎn)選中觸發(fā)多次選中事件
   在使用樹(shù)基礎(chǔ)組件的時(shí)候凳寺，我發(fā)現(xiàn)選中一個(gè)節(jié)點(diǎn)它的父節(jié)點(diǎn)也會(huì)相應(yīng)的選中鸭津，然后觸發(fā)多次節(jié)點(diǎn)狀態(tài)改變事件，為了解決這個(gè)問(wèn)題肠缨，我也是頭疼了半天逆趋，最后想到為什么不用節(jié)流或者防抖動(dòng)解決呢？不過(guò)開(kāi)始我沒(méi)有理解節(jié)流和防抖動(dòng)的本質(zhì)區(qū)別晒奕，使用了節(jié)流闻书，還是會(huì)觸發(fā)2次事件，后面看了一篇文章脑慧，發(fā)現(xiàn)這種情況應(yīng)該用防抖動(dòng)魄眉。
   2.4 vuex的state中的數(shù)據(jù)沒(méi)有響應(yīng)式更新
   有一個(gè)頁(yè)面，需要取vuex的一個(gè)state闷袒，我傻乎乎的直接訪問(wèn)$store去拿坑律，結(jié)果當(dāng)這個(gè)state變化的時(shí)候頁(yè)面沒(méi)有更新數(shù)據(jù)，后來(lái)我的一面面試官發(fā)現(xiàn)了這個(gè)bug囊骤，告訴我應(yīng)該用mapState取state晃择，然后用computed更新數(shù)據(jù)，我后面又看了看vuex文檔也物，發(fā)現(xiàn)state設(shè)計(jì)成state=>getter=>mutation=>action還是有一定道理的宫屠。

3. 深入研究源碼
   在使用Angular的時(shí)候，我也就停留在API層面上滑蚯，對(duì)于底層封裝的代碼渾然不知浪蹂，以至于面試時(shí)碰到源碼的問(wèn)題就窘迫的不行，還好公司里有對(duì)源碼有研究的同事H告材，于是我就在他的帶領(lǐng)下下班吃完飯之余研究MV*的實(shí)現(xiàn)原理...最近還在研究一個(gè)精簡(jiǎn)的庫(kù)Moon坤次，等過(guò)段時(shí)間研究Vue和Angular/React，目前已經(jīng)寫(xiě)了第一篇文章斥赋，以后慢慢更新~

最近leader分配給了我一個(gè)vue1的項(xiàng)目讓我維護(hù)浙踢，這個(gè)項(xiàng)目的新版本剛好是4月發(fā)布，于是我就想把它升級(jí)到vue2去灿渴，雖然期間可能會(huì)產(chǎn)生更多問(wèn)題洛波，但是我想這些試錯(cuò)對(duì)我來(lái)說(shuō)是值得的胰舆。

其他

1. 對(duì)畢業(yè)論文有了靈感
   我的專業(yè)是信息安全，我們的業(yè)務(wù)也是安全大數(shù)據(jù)相關(guān)的蹬挤，我也許可以利用自己掌握的前端技術(shù)和安全知識(shí)做一個(gè)有意思的畢業(yè)作品缚窿。

2. 擔(dān)心可能會(huì)被清理
   雖然我住的這個(gè)村接到的通知是15號(hào)之前清退，而且房東也說(shuō)他的房子是建在宅基地上的焰扳，不在清退范圍內(nèi)的倦零，不過(guò)還是讓我思考起了來(lái)北京的意義。明知道這邊生活成本如此高吨悍，社會(huì)地位也低扫茅，每天擠著公交，偶爾吸吸霧霾育瓜，為什么還要過(guò)來(lái)呢葫隙？

我想大概是這座城市里還存在著各種機(jī)遇吧~