2016年加入，2021年離開剩蟀，五年有余催蝗。
有過美好，也有過無奈育特，告別數(shù)云之前整理一下丙号，留點文字憶往昔。

image.png

人力問了我兩個問題

提出離職后缰冤，人力問我為什么會選擇離開犬缨。
我頓了下，很平靜的說道：“以前早晨醒來棉浸，會想著今天要去做什么事情怀薛，而且是那種特別想要去完成的事情∶灾＃”
“可是枝恋，現(xiàn)在的早晨卻在懶床创倔。”

人力笑出了一個我懂的表情，然后問了另外一個問題：“五年多的時間里焚碌，你最大的收獲是什么畦攘？”
思考了半分左右的時間，直視著人力說道：“忍耐”十电。

在人力驚訝的眼神中知押，我想起了許多。

技術(shù)不進則死

image.png

在2015年開始維護博客的時候鹃骂，就在博客管理端中寫著一段22px的自勉：技術(shù)不進則死朗徊，即然選擇，請堅持偎漫！

遙想2016，只寫過jQuery和react demo的我在面試時有缆，更多展現(xiàn)的還是基于jQuery的各種手段象踊。
直到有一天，剛把angular1.x臟檢查搞明白的我棚壁，猛然間發(fā)現(xiàn)各大社區(qū)都在歡慶angular2的橫空出世杯矩。

本著技術(shù)不進則死的自我勉勵，趕緊照著示例寫了一個demo袖外。
看著這個angular2的demo史隆，內(nèi)心滿是MMP：“這特么就不是同一個框架好嗎？”
稍微一猶豫曼验，時間就過去了幾個月泌射。在上海團隊再次扔過來一個項目的時候，框架居然是React+angular1.x的混搭鬓照。

只有React字母編寫及React demo開發(fā)經(jīng)驗的我熔酷，不得已開啟了React的學習之路。
又是一套不同的前端語法糖豺裆，又是一套不同的前端思想拒秘。期間在翻閱各大社區(qū)時，偶爾間發(fā)現(xiàn)了前端框架的占有率折線圖：看上去vue 2.0勢頭也很猛哎臭猜？

腦袋只有一個躺酒，壓哪個？

學哪個框架

image.png

2016年下旬蔑歌，老夫jQuery一把梭的時代已經(jīng)成為了過去式(假裝這里有張圖.jpg)羹应，angular1.x也漸顯頹廢∝はィ看著那本九成新的精通angularjs量愧，開啟了自問模式：[Angular2, React, Vue2]钾菊，先學哪個？
摸著自已略微后移的發(fā)際線偎肃，告訴自已這個問題很重要煞烫。不僅要在網(wǎng)上搜羅萬相，也要在同行里發(fā)起討論累颂。
一翻折騰之后滞详，驚的一身冷汗：在2016年的某一天，Angular4.0發(fā)布了紊馏。

一念之間料饥，想到了java ssh框架之一的struts。彼時的我還是一名java粘貼工程師朱监，懵懂之間經(jīng)歷了某個項目從struts1升級到struts2的悲慘歷程岸啡。
那一次，struts給我留下了閉包式的回憶赫编。許久未能痊愈的我巡蘸，便投身到據(jù)說相當美好的前端行業(yè)。

此時此刻擂送，恰如彼時彼刻悦荒。
如業(yè)界多位大佬所言及的論調(diào)：前端可以摸著后端過河。

方法有了嘹吨，就開始摸吧搬味。
要說摸后端過河，那肯定首選后端架構(gòu)師蟀拷。巧如拍戲碰纬，那次年會我和架構(gòu)被分到了一個標間。

于是匹厘，我問了幾個問題：

• 當年的struts2現(xiàn)在還有項目在用沒嘀趟？
• 現(xiàn)在的后端用的什么框架，這套框架后續(xù)變化如何愈诚？
• 當年的后端框架是否也出現(xiàn)過百花齊鳴她按？
• angular這種斷崖式版本，還值不值得學習炕柔？

架構(gòu)的回答酌泰，匯總下只有六個字: 萬變不離其宗。

以實現(xiàn)業(yè)務邏輯為目的匕累，針對性的學習框架陵刹；以原生JS為基線，全面提升技術(shù)能力欢嘿。

原生JS才是核心

上面有提到在2016年面試的時候衰琐，展示了基于jQuery的各種手段也糊。在這些手段中，最主要的便是一款表格組件: GridManager羡宙。

2016年初狸剃，立了個Flag: 移除GridManager對jQuery的依賴，改造為純原生JS實現(xiàn)狗热。

這是一個大膽的嘗試钞馁，也是一次瓶頸期的自我突破。后續(xù)在學習各個框架的API時匿刮，總能很快的理解其背后的實現(xiàn)邏輯僧凰。

然后，我做了另外一件事：將GridManager中的基礎方法抽取為js類庫熟丸，命名為jTool训措，以此向經(jīng)典的jQuery致敬。

jTool是一個類似于jQuery的js類庫光羞，包含了常用的jQuery的方法隙弛，如：Event，Ajax狞山。

做為泥腿子出身的程序員，jTool的編碼過程并不順利叉寂，回想起來有以下幾個原因：

• 技術(shù)思維固化萍启，在前端框架異軍突起的2016，jQuery的DOM思維尚未改變屏鳍。
• 編碼過程中涉及到很多原生API勘纯，需要經(jīng)常查找文檔；磕磕絆絆的編碼歲月里钓瞭，MDN全程陪伴驳遵。
• 由于定位為類庫，所以會對代碼反復雕琢山涡；然而反復雕琢有個更加通俗的名詞：需求變更堤结。

期間也有過退卻的想法，特別是在周末的凌晨：解決不掉睡不著的BUG鸭丛，跳動的時間和家人不斷的催促竞穷，身體的困頓和第二還要去公司打罐頭的生活壓力。煩躁感上來了鳞溉，把電腦一扣瘾带。上個廁所吸根煙，又翻開了電腦熟菲。

當2017后的某一天看政，將jTool引入GridManager青抛，隨著npm run start順利展現(xiàn)的那一刻，激動的把成果四處展示寒瓦，以至于忘記了有些人不是同行迟几。

jTool, 個人編碼路上的里程碑。

也許這種有目標的學習方式厉萝，才是適合我的方式恍飘。

今天在整理這個文章的時候，有了一個感悟: 讓jQuery走向沒落的原因可能并不是那些框架谴垫，原生的javascript才是jQuery的掘墓者章母。

隨著ECMA的每次提案，javascript都在不斷的吸收著jQuery的價值翩剪。其它框架乳怎，又何嘗可以逃脫這個魔咒？

歲月催人老前弯，一覺醒來Angular12了蚪缀。

工程化思維

來數(shù)云之前，只使用過gulp恕出，僅是那種字面意義上的使用询枚。接手的項目以gulp為主，雖然當時不太明白這些task的甬道思維浙巫，但同行者眾金蜀，相互學習。

2016年的6月的畴，我和個陜西妹子結(jié)對編程渊抄，寫了第一個基于webpack1 + angular1.x + es5的項目。

雖然不久后公司取消了結(jié)對編程丧裁，但革命友誼長存护桦，革命者尚眾，前端人員相互分享著經(jīng)驗:

• es5 -> es6 hi, babel
• eslint 代碼校驗
• jenkins 前端發(fā)布工具
• jasmine+karma 單元測試
• mock 寫個假接口自已調(diào)
• node 寫個真接口自已調(diào)
• linux 邊寫邊忘
• ……

至于webpack, 一眾人等從1升到2煎娇，再升4二庵，最升5。然后缓呛，各奔前程眨猎。

關(guān)于工程化，我現(xiàn)在的理解: 用于服務核心代碼的工具及代碼即為工程化强经，包含但不限于構(gòu)建睡陪、校驗、單元測試、發(fā)布兰迫、服務器接收信殊。

對于工程化，同一個團隊應該保持統(tǒng)一汁果。

印像最深的一件事

到公司不久后涡拘，接手了一個項目的重構(gòu)工作。初次看到這個jsp項目時据德，立刻就提升了我對麻雀雖小五臟俱全的認知鳄乏。

遙想當年，正在配置jdk和idea的切圖仔一轉(zhuǎn)頭與項目經(jīng)理四目相對棘利，項目經(jīng)理意味深長的說了句：“這項目每年雙11都會崩潰橱野，已經(jīng)5年了……”。躲閃過項目經(jīng)理關(guān)愛的眼神善玫，冒出來一個想法：我現(xiàn)在跑路還來的急不水援？

一閃而過的想法之后，是改變這個現(xiàn)狀以證明自已的機會茅郎。
將項目跑起來后蜗元，發(fā)現(xiàn)性能問題有點罄竹難書的意思，較大的幾項如下:

• jsp未實現(xiàn)前后端分離
• 無模塊化概念
• 接口調(diào)用頻繁系冗，且這些淘寶接口的調(diào)用需要收費
• 超多的setInterVal
• ……

對這種擁有一定年齡的項目奕扣，漸性優(yōu)化的步驟如下：

• 搭建一個新的前端項目，當時采用的webpack2 + angular1.x + es6
• 將原項目通過iframe嵌套入新項目掌敬，此時項目可以完整的運行
• 以一級菜單為單位成畦，進行漸性重構(gòu)
• 清除歷史遺留代碼，保證核心功能清晰
• 提供靜態(tài)數(shù)據(jù)緩存方案涝开，對非必要性接口只在初次加載時調(diào)用
• 搭建CDN，將公共資源替換為CDN資源
• iconfont整理框仔，盡量不使用圖片
• 解決index.html緩存問題
• 常用數(shù)據(jù)的加載機制調(diào)整為預加載
• 查看火焰圖舀武，查找js性能瓶頸并優(yōu)化
• 尋求產(chǎn)品、后端离斩、測試配合银舱，期間要學會忍耐

五年前認為對研發(fā)人員來講技術(shù)能力最重要，五年后認為團隊協(xié)作更重要跛梗。

我眼中的管理

剛到數(shù)云不久寻馏，在項目經(jīng)理.張和前端經(jīng)理.鄭的提攜下，從來沒有管理經(jīng)驗的我被安排到了前端組長的位置核偿，管理一個4個人的小團隊诚欠。
那是一段渾渾噩噩的摸索期，項目經(jīng)理.張告訴我: “少寫一些業(yè)務把精力放到其他的事情上，比如說人員成長轰绵，公共組件”粉寞。

然而，在除了業(yè)務代碼以外的事情左腔，我其實是找不到頭緒的唧垦。

直到后來大領(lǐng)導.蔡親自下場指導(批評)，才多少找到些方向液样。隨著時間的推移振亮，五段年華成為往事。

在這些往事里鞭莽，有幾個想法值得記錄：

• 領(lǐng)導經(jīng)常會說：“我希望你能把問題提前拋出坊秸，而不是等到了截止日期再讓我知道”。然而撮抓，當你在提前拋出問題前妇斤，最好想想是否真的沒有了任何的解決方案。
• 下屬的工作安排應當相互交叉丹拯、松弛有度站超，相互交叉是為公司負責，松弛有度是人員成長的前提乖酬。但若你選擇松弛有度死相，那么來自上面的壓力需要你獨自承擔。
• 協(xié)調(diào)人員時咬像，部門內(nèi)可以完全依仗職位算撮，部門外卻必定需要一些人緣。所以少做虧心事县昂，是自已的鍋就請站直了背好肮柜。
• 管理很難做到一碗水端平，因為人是有感情的倒彰。

憶往昔审洞，往往意猶未盡。

收拾行囊待讳，向著明天出發(fā)芒澜。
個人簡介: 只要堅持，螞蟻也能移走愚公門前的那座山创淡。

image.png

傳送門

• GridManager 請不要吝嗇star
• jTool
• 個人博客