前言

自11月1號來到北京后，已經有一個月了，僅以小文總結一下此番來京的實習經歷。

實習工資很低，再加上北京租房簽約多是一年起，為了離公司近、費用低兼得，我只得在離公司近的一個村里找了一個還不錯的公寓住了下來，即使這樣一千多的房租還是讓我有點無奈，要知道我在學校附近可以租一套小區里的四室一廳了。我之前在昆明做外包攢的萬把塊錢到這就幾乎生存不下去了，約了幾個在北京的好友之后更是捉襟見肘。

好在公司食堂很贊，早中晚餐+下午茶+夜宵一共五頓免費管夠，味道也比所謂的互聯網第一食堂豬場食堂好太多，可能是我去豬場面試的那兩次吃的菜都比較清淡吧~

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

我們團隊有二十幾號人，應該算是規模大的前端組了，技術棧也非常新，不僅僅涉及到vue、webpack等流行前端技術，對可視化技術的研究在業內也是非常有前瞻性的。關于我們

技術架構.png

下面我將從這三個方面來總結這段實習日子的收獲：

• 工作氛圍
• 技術
• 其他

工作氛圍

1. 體驗大廠規范的工作流程
   在這里，有著一套成熟的工作流。從項目、知識、郵件到日常辦公管理等，都有相應的工具軟件支撐著。
   各個工作職責塊都被分割地巨細無遺，修bug需要幾人天都是記錄在案的，這讓追蹤工作流和量化工作指標成為可能。

2. 隨手可得的豐富知識資源
   我曾在freecodecamp里接觸到了read-search-ask的學習理念，在這里，經驗豐富的前輩們早就把相關的優秀學習資源總結羅列出來了，有需要的話可以結合google來read和search，最關鍵的是，真人就在身邊，前兩步都搞不定可以輕松地請教和討論問題。
   我可以在這里快速地學習到：

• 前端基礎，如css和JavaScript
• vue相關，團隊內部甚至造了一個vue的UI庫
• 可視化相關，包括svg、canvas、webgl、three、d3、gis等
• 安全攻防相關，除了常規的安全攻防外還有流量過濾和流量分析等高級玩法
• 算法
• 大數據
  ...

3. 參與高效運轉的團隊協作
   我們有自己搭建的gitlab服務器，在這之前，我還沒參與過人數超過三十個、平均每兩分鐘就有一次提交、幾十個分支的項目，不過這次我有機會參與了。對git中的add、commit、fetch、pull、merge、rebase、push、checkout、branch、reset等命令也有了更加深刻的理解，因為有應用場景了嘛~
   有人說，大廠里大部分人都是螺絲釘，這句話無可厚非，社會分工本就是越來越細的，正是因為有大量各司其職的螺絲釘高效地工作，才能產生出個人無法達成的成就。根據二八法則，非螺絲釘只是少數人，目前我還是非常樂于當螺絲釘的。
   之前還在學校跟著老師做項目的時候，我一個人可以負責需求、產品、策劃、前端、后端接口設計、服務器維護甚至在會議桌上爭取客戶，但是那只有一個字：累。而且效率很低，有的做錯了也全然不知。在這里我可以專心考慮前端的問題，那種感覺是非常爽的。
   提交代碼之前，可以叫同事來review，討論幾種解決問題的思路。遇到難題的時候，還可以結對編程，寫出來的代碼又快質量又高。
   leader也告訴我：不要在已解決的通用問題上耗時間，直接找解決過的人。

總結：

1. 編碼的時間是大于討論設計的時間的，因為需求量大，各方溝通成本也很高(產品、設計、后端)。
2. 有命名規則、注釋等編碼約定，大家也自覺遵守，作為新人的我上手業務也很快。代碼格式通過eslint和stylelint控制。
3. 對于錯誤、異常、安全等沒有很明顯的的統一處理方案，似乎期望測試測出來。
4. 接口和api的約定不是很穩定，雖然有wiki記錄著，但是經常變更用法。
5. 可重用代碼和模塊代碼都有標準的，使用一個自定義配置驅動
6. 性能方面可視化那一塊很關注，因為涉及到大量的計算，web worker要玩的很6，業務這邊關注較少
7. 技術棧主要是vue以及它的生態插件、有一個自制組件庫，沒有落后潮流，不過看樣子可視化那塊是領先的，不過團隊里還有人用jq
8. 寫代碼偏獨立編程，團隊里沒有結對編程的習慣，不過協同構建很普遍，每個人熟悉一塊內容，不懂直接找TA來幫忙就ok
9. 目前只看到leader封裝的庫里寫了測試，業務部分沒有寫自動化測試腳本的習慣，有配備測試團隊但不是自動化的
10. 提交代碼沒有review，不過可以自己找同事來review

技術

1. 開發環境
   我剛接觸前端的時候用的是sublime，因為它輕量好用，打開個啥都快的很，界面也好看。
   后來，開始用Angular，typescript自帶的工程化特性已經不適合用sublime寫了，vscode成為了我新的伙伴。
   現在來到了公司，編輯器都變得那么無力，而且vue中的eslint似乎和vscode老過不去，我又是習慣先啪啪啪一頓寫然后格式化的人，不得已又換上了webstorm。真正的大型項目還得上IDE。
   不過好在公司有好人相助，他負責國內一個前端翻譯團隊，解決這些環境問題玩得跟砍瓜切菜一般，后來下班之余我倆就成了研究源碼的好伙伴。
   唯一想吐槽的就是公司發的電腦有時候刪不了文件，只能通過rd /s /q [filename]來刪除

2. vue全家桶
   這期間無論是看文檔還是寫項目，我也基本熟悉了vue、vuex、vue-router、axios等全家桶的用法，期間碰見幾個有意思的點：
   2.1 動態渲染路由
   有時候，不同用戶所能看見的路由菜單是不一樣的，也就是需要后端返回當前用戶的實際路由。這時候一般來說有兩種解決方案：
   一.前端先掛載所有路由，然后根據后端數據屏蔽某些路由。
   二.前端先接收后端數據，然后掛載路由。
   我們在某個項目中使用的是第二個方案，而且后端返回的是一個線性的數組，所以我們需要將它轉化成樹狀的數據結構，然后再轉化成vue-router的數據結構。
   期間感受到了從ts轉js沒有類型機制的不方便，而不熟悉vue-router的我在轉化成vue-router的時候也遇到了一個問題，后面一查發現是少了meta字段，后面有時間把這個問題復現一下單獨寫篇文章分析一下。
   2.2 強大的vue tools
   有一次我在封裝一個業務組件的時候定位不到問題，于是請教了一個編寫基礎組件的同事來幫忙，只見他熟練地打開Vue tools查看組件間的通信和內部的狀態，一下就找到了問題。
   還有一次是坑爹的后端傳的破數據，導致前端背鍋，也是vue tools幫忙找出來的。
   2.3 樹組件節點選中觸發多次選中事件
   在使用樹基礎組件的時候，我發現選中一個節點它的父節點也會相應的選中，然后觸發多次節點狀態改變事件，為了解決這個問題，我也是頭疼了半天，最后想到為什么不用節流或者防抖動解決呢？不過開始我沒有理解節流和防抖動的本質區別，使用了節流，還是會觸發2次事件，后面看了一篇文章，發現這種情況應該用防抖動。
   2.4 vuex的state中的數據沒有響應式更新
   有一個頁面，需要取vuex的一個state，我傻乎乎的直接訪問$store去拿，結果當這個state變化的時候頁面沒有更新數據，后來我的一面面試官發現了這個bug，告訴我應該用mapState取state，然后用computed更新數據，我后面又看了看vuex文檔，發現state設計成state=>getter=>mutation=>action還是有一定道理的。

3. 深入研究源碼
   在使用Angular的時候，我也就停留在API層面上，對于底層封裝的代碼渾然不知，以至于面試時碰到源碼的問題就窘迫的不行，還好公司里有對源碼有研究的同事H，于是我就在他的帶領下下班吃完飯之余研究MV*的實現原理...最近還在研究一個精簡的庫Moon，等過段時間研究Vue和Angular/React，目前已經寫了第一篇文章，以后慢慢更新~

最近leader分配給了我一個vue1的項目讓我維護，這個項目的新版本剛好是4月發布，于是我就想把它升級到vue2去，雖然期間可能會產生更多問題，但是我想這些試錯對我來說是值得的。

其他

1. 對畢業論文有了靈感
   我的專業是信息安全，我們的業務也是安全大數據相關的，我也許可以利用自己掌握的前端技術和安全知識做一個有意思的畢業作品。

2. 擔心可能會被清理
   雖然我住的這個村接到的通知是15號之前清退，而且房東也說他的房子是建在宅基地上的，不在清退范圍內的，不過還是讓我思考起了來北京的意義。明知道這邊生活成本如此高，社會地位也低，每天擠著公交，偶爾吸吸霧霾，為什么還要過來呢？

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