簡(jiǎn)介：?良心解讀：JD 分析圖譜 我面試過(guò)的同學(xué)，在結(jié)束的時(shí)候，我都會(huì)指出問(wèn)題，并給出學(xué)習(xí)建議。大部分同學(xué)不是不夠努力，不是不夠聰明，而是沒(méi)有找對(duì)方法，沒(méi)有切中要害。我總結(jié)了一下之前所有的面試經(jīng)歷，以及常見(jiàn)的問(wèn)題，寫(xiě)下這篇文章，希望能夠給前端的同學(xué)，不論是否來(lái)面試阿里的職位，有一個(gè)參考。同時(shí)，也是寫(xiě)下我自己總結(jié)的方法，希望能幫助到其他技術(shù)相關(guān)的同學(xué)

作者|沈礫捷(磐沖)
出品|阿里巴巴新零售淘系技術(shù)部

我是誰(shuí)？為什么寫(xiě)這篇文章？

好吧，我承認(rèn)，我自己在招聘上可能是有點(diǎn)沒(méi)找到方法。但是，看了那么多簡(jiǎn)歷，經(jīng)歷了那么多次面試，我最大的感受卻是惋惜。因?yàn)橛泻枚嗤瑢W(xué)，在電話(huà)那頭我聽(tīng)出了努力，聽(tīng)出了能力，聽(tīng)出了激情，但是卻沒(méi)有聽(tīng)到亮點(diǎn)、和讓我覺(jué)得，能夠繼續(xù)闖過(guò)下一關(guān)的能力。

我面試過(guò)的同學(xué)，在結(jié)束的時(shí)候，我都會(huì)指出問(wèn)題，并給出學(xué)習(xí)建議。大部分同學(xué)不是不夠努力，不是不夠聰明，而是沒(méi)有找對(duì)方法，沒(méi)有切中要害。我總結(jié)了一下之前所有的面試經(jīng)歷，以及常見(jiàn)的問(wèn)題，寫(xiě)下這篇文章，希望能夠給前端的同學(xué)，不論是否來(lái)面試阿里的職位，有一個(gè)參考。同時(shí)，也是寫(xiě)下我自己總結(jié)的方法，希望能幫助到其他技術(shù)相關(guān)的同學(xué)。

我們想要的同學(xué)

★ JD

業(yè)務(wù)背景
淘寶內(nèi)部最大創(chuàng)新項(xiàng)目之一，大團(tuán)隊(duì)已有百人規(guī)模，大部分項(xiàng)目處于保密階段，前景遠(yuǎn)大。

職位描述
1.負(fù)責(zé)組件庫(kù)與業(yè)務(wù)頁(yè)面開(kāi)發(fā)。
2.帶領(lǐng)團(tuán)隊(duì)完成技術(shù)產(chǎn)品實(shí)現(xiàn)。
3.負(fù)責(zé)大型多應(yīng)用架構(gòu)設(shè)計(jì)。
4.利用前端技術(shù)與服務(wù)端協(xié)同完成團(tuán)隊(duì)業(yè)務(wù)目標(biāo)。

職位要求
0.掌握?qǐng)D形學(xué)，webgl或熟練使用threejs框架，熟練canvas相關(guān)渲染及動(dòng)畫(huà)操作的優(yōu)先。
1.熟練掌握J(rèn)avaScript。
2.熟悉常用工程化工具，掌握模塊化思想和技術(shù)實(shí)現(xiàn)方案。
3.熟練掌握React前端框架，了解技術(shù)底層。同時(shí)了解vue以及angular等其他框架者優(yōu)先。
4.熟練掌握react生態(tài)常用工具，redux/react-router等。
5.熟悉各種Web前端技術(shù)，包括HTML/XML/CSS等，有基于Ajax的前端應(yīng)用開(kāi)發(fā)經(jīng)驗(yàn)。
6.有良好的編碼習(xí)慣，對(duì)前端技術(shù)有持續(xù)的熱情，個(gè)性樂(lè)觀開(kāi)朗,邏輯性強(qiáng)，善于和各種背景的人合作。
7.具有TS/移動(dòng)設(shè)備上前端開(kāi)發(fā)/NodeJS/服務(wù)端開(kāi)發(fā)等經(jīng)驗(yàn)者優(yōu)先。

★ 翻譯一下JD

為什么起這個(gè)標(biāo)題呢？因?yàn)橛泻芏嗳丝吹铰毼幻枋?#xff0c;可能就在和自己做的事情一一比對(duì)，把關(guān)鍵字都核對(duì)上。而很多前端同學(xué)看到職位要求第一條里的圖形學(xué)，可能就開(kāi)始打退堂鼓了。或者看到幾個(gè)關(guān)鍵字自己都認(rèn)識(shí)，就覺(jué)得沒(méi)問(wèn)題，還挺簡(jiǎn)單的。

就這樣望而卻步真的好嗎？為什么職位描述看著簡(jiǎn)單，面試卻這么難呢？你真的讀懂這份職位描述了嗎？
現(xiàn)在，不妨先停一下，就上面的問(wèn)題，我們來(lái)細(xì)細(xì)品一下。

什么叫讀懂職位描述呢？從我個(gè)人的理解，讀懂職位描述，應(yīng)該是讀懂這個(gè)職位需要哪些基礎(chǔ)能力，以及可能遇到哪些挑戰(zhàn)。我們寫(xiě)自己簡(jiǎn)歷的時(shí)候，“精通react”和“熟練使用react”，相信大家不會(huì)隨意去寫(xiě)。同樣的，JD 里面的：掌握、熟練掌握、了解、熟悉，也不是隨意寫(xiě)的，這代表了團(tuán)隊(duì)對(duì)新同學(xué)的能力要求。

回想寫(xiě)自己簡(jiǎn)歷的時(shí)候，我們會(huì)對(duì)這個(gè)前綴捫心自問(wèn)一下。因?yàn)闀?huì)擔(dān)心一旦寫(xiě)了精通，面試官的問(wèn)題會(huì)更難，甚至覺(jué)得只有源碼倒背如流的人，才能稱(chēng)得上精通。當(dāng)然也會(huì)有同學(xué)非常自信，用 react 做過(guò)幾個(gè)項(xiàng)目，就寫(xiě)上了精通 react 。

這兩種都可以稱(chēng)為精通，也都不可以。沒(méi)有客觀標(biāo)準(zhǔn)，又怎么去衡量呢？而標(biāo)準(zhǔn)在哪里呢？所以在這里，我從阿里面試官角度，給出我認(rèn)為的標(biāo)準(zhǔn)，盡可能的做到客觀可量化。那么，基于上面這份職位標(biāo)準(zhǔn)，我來(lái)翻譯一下職位要求：

首先，總覽全部的要求，會(huì)發(fā)現(xiàn)這個(gè)職位雖然提到了3d相關(guān)的技能，但是大部分卻是應(yīng)用開(kāi)發(fā)相關(guān)的能力，所以這個(gè)職位并不是想找專(zhuān)業(yè)的3d領(lǐng)域同學(xué)，而是需要一個(gè)工程化能力強(qiáng)，對(duì)3d有了解的同學(xué)。

0.掌握?qǐng)D形學(xué)，webgl 或熟練使用threejs框架，熟練canvas相關(guān)渲染及動(dòng)畫(huà)操作的優(yōu)先。

初級(jí)：

• 學(xué)習(xí)過(guò)圖形學(xué)相關(guān)知識(shí)，知道矩陣等數(shù)學(xué)原理在動(dòng)畫(huà)中的作用，知道三維場(chǎng)景需要的最基礎(chǔ)的構(gòu)成，能用 threejs 搭 3d 場(chǎng)景，知道 webgl 和 threejs 的關(guān)系。
• 知道 canvas 是干嘛的，聊到旋轉(zhuǎn)能說(shuō)出 canvas 的 api。
• 知道 css 動(dòng)畫(huà)，css 動(dòng)畫(huà)屬性知道關(guān)鍵字和用法(換句話(huà)說(shuō)，電話(huà)面試會(huì)當(dāng)場(chǎng)出題要求口噴 css 動(dòng)畫(huà)，至少能說(shuō)對(duì)大概，而不是回答百度一下就會(huì)用)。
• 知道 js 動(dòng)畫(huà)，能說(shuō)出1~2個(gè)社區(qū) js 動(dòng)畫(huà)庫(kù)，知道js動(dòng)畫(huà)和css動(dòng)畫(huà)優(yōu)缺點(diǎn)以及適用場(chǎng)景。
• 知道raf和其他達(dá)到60fps的方法。

中級(jí)：

• 如果沒(méi)有 threejs，你也能基于 webgl 自己封裝一個(gè)簡(jiǎn)單的 threejs 出來(lái)。
• 聊到原理能說(shuō)出四元數(shù)，聊到鼠標(biāo)操作能提到節(jié)流，聊到性能能提到restore，聊到幀說(shuō)出 raf 和 timeout 的區(qū)別，以及各自在優(yōu)化時(shí)候的作用。
• 知道怎樣在移動(dòng)端處理加載問(wèn)題，渲染性能問(wèn)題。
• 知道如何結(jié)合 native 能力優(yōu)化性能。
• 知道如何排查性能問(wèn)題。對(duì) chrome 動(dòng)畫(huà)、3d、傳感器調(diào)試十分了解。

高級(jí)：

• 搭建過(guò)整套資源加載優(yōu)化方案，能說(shuō)明白整體方案的各個(gè)細(xì)節(jié)，包括前端、客戶(hù)端、服務(wù)端分別需要實(shí)現(xiàn)哪些功能點(diǎn)、依賴(lài)哪些基礎(chǔ)能力，以及如何配合。
• 設(shè)計(jì)并實(shí)現(xiàn)過(guò)前端動(dòng)畫(huà)引擎，能說(shuō)明白一個(gè)復(fù)雜互動(dòng)項(xiàng)目的技術(shù)架構(gòu)，知道需要哪些核心模塊，以及這些模塊間如何配合。
• 有自己實(shí)現(xiàn)的動(dòng)畫(huà)相關(guān)技術(shù)方案產(chǎn)出，這套技術(shù)方案必須是解決明確的業(yè)務(wù)或技術(shù)難點(diǎn)問(wèn)題的。為了業(yè)務(wù)快速落地而封裝一個(gè)庫(kù)，不算這里的技術(shù)方案。如果有類(lèi)似社區(qū)方案，必須能從原理上說(shuō)明白和競(jìng)品的差異，各自?xún)?yōu)劣，以及技術(shù)選型的原因。

1.熟練掌握 JavaScript。

初級(jí)：

• JavaScript 各種概念都得了解，《JavaScript 語(yǔ)言精粹》這本書(shū)的目錄都得有概念，并且這些核心點(diǎn)都能脫口而出是什么。這里列舉一些做參考：
• 知道組合寄生繼承，知道 class 繼承。
• 知道怎么創(chuàng)建類(lèi)function + class。
• 知道閉包在實(shí)際場(chǎng)景中怎么用，常見(jiàn)的坑。
• 知道模塊是什么，怎么用。
• 知道event loop是什么，能舉例說(shuō)明event loop怎么影響平時(shí)的編碼。
• 掌握基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)，比如堆、棧、樹(shù)，并了解這些數(shù)據(jù)結(jié)構(gòu)計(jì)算機(jī)基礎(chǔ)中的作用。
• 知道ES6數(shù)組相關(guān)方法，比如forEach，map，reduce。

中級(jí)：

• 知道class繼承與組合寄生繼承的差別，并能舉例說(shuō)明。
• 知道event loop原理，知道宏微任務(wù)，并且能從個(gè)人理解層面說(shuō)出為什么要區(qū)分。知道node和瀏覽器在實(shí)現(xiàn)loop時(shí)候的差別。
• 能將繼承、作用域、閉包、模塊這些概念融匯貫通，并且結(jié)合實(shí)際例子說(shuō)明這幾個(gè)概念怎樣結(jié)合在一起。
• 能脫口而出2種以上設(shè)計(jì)模式的核心思想，并結(jié)合js語(yǔ)言特性舉例或口噴基礎(chǔ)實(shí)現(xiàn)。
• 掌握一些基礎(chǔ)算法核心思想或簡(jiǎn)單算法問(wèn)題，比如排序，大數(shù)相加。

2.熟悉常用工程化工具，掌握模塊化思想和技術(shù)實(shí)現(xiàn)方案。

初級(jí)：

• 知道webpack，rollup以及他們適用的場(chǎng)景。
• 知道webpack v4和v3的區(qū)別。
• 脫口而出webpack基礎(chǔ)配置。
• 知道webpack打包結(jié)果的代碼結(jié)構(gòu)和執(zhí)行流程，知道index.js，runtime.js是干嘛的。
• 知道amd，cmd，commonjs，es module分別是什么。
• 知道所有模塊化標(biāo)準(zhǔn)定義一個(gè)模塊怎么寫(xiě)。給出2個(gè)文件，能口噴一段代碼完成模塊打包和執(zhí)行的核心邏輯。

中級(jí)：

• 知道webpack打包鏈路，知道plugin生命周期，知道怎么寫(xiě)一個(gè)plugin和loader。
• 知道常見(jiàn)loader做了什么事情，能幾句話(huà)說(shuō)明白，比如babel-loader，vue-loader。
• 能結(jié)合性能優(yōu)化聊webpack配置怎么做，能清楚說(shuō)明白核心要點(diǎn)有哪些，并說(shuō)明解決什么問(wèn)題，需要哪些外部依賴(lài)，比如cdn，接入層等。
• 了解異步模塊加載的實(shí)現(xiàn)原理，能口噴代碼實(shí)現(xiàn)核心邏輯。

高級(jí)：

• 能設(shè)計(jì)出或具體說(shuō)明白團(tuán)隊(duì)研發(fā)基礎(chǔ)設(shè)施。具體包括但不限于：
• 項(xiàng)目腳手架搭建，及如何以工具形態(tài)共享。
• 團(tuán)隊(duì)eslint規(guī)范如何設(shè)計(jì)，及如何統(tǒng)一更新。
• 工具化打包發(fā)布流程，包括本地調(diào)試、云構(gòu)建、線上發(fā)布體系、一鍵部署能力。同時(shí)，方案不僅限于前端工程部分，包含相關(guān)服務(wù)端基礎(chǔ)設(shè)施，比如cdn服務(wù)搭建，接入層緩存方案設(shè)計(jì)，域名管控等。
• 客戶(hù)端緩存及預(yù)加載方案。

3.熟練掌握React前端框架，了解技術(shù)底層。同時(shí)了解vue以及angular等其他框架者優(yōu)先。

初級(jí)：

• 知道react常見(jiàn)優(yōu)化方案，脫口而出常用生命周期，知道他們是干什么的。
• 知道react大致實(shí)現(xiàn)思路，能對(duì)比react和js控制原生dom的差異，能口噴一個(gè)簡(jiǎn)化版的react。
• 知道diff算法大致實(shí)現(xiàn)思路。
• 對(duì)state和props有自己的使用心得，結(jié)合受控組件、hoc等特性描述，需要說(shuō)明各種方案的適用場(chǎng)景。
• 以上幾點(diǎn)react替換為vue或angular同樣適用。

中級(jí)：

• 能說(shuō)明白為什么要實(shí)現(xiàn)fiber，以及可能帶來(lái)的坑。
• 能說(shuō)明白為什么要實(shí)現(xiàn)hook。
• 能說(shuō)明白為什么要用immutable，以及用或者不用的考慮。
• 知道react不常用的特性，比如context，portal。
• 能用自己的理解說(shuō)明白react like框架的本質(zhì)，能說(shuō)明白如何讓這些框架共存。

高級(jí)：

• 能設(shè)計(jì)出框架無(wú)關(guān)的技術(shù)架構(gòu)。包括但不限于：
• 說(shuō)明如何解決可能存在的沖突問(wèn)題，需要結(jié)合實(shí)際案例。
• 能說(shuō)明架構(gòu)分層邏輯、各層的核心模塊，以及核心模塊要解決的問(wèn)題。能結(jié)合實(shí)際場(chǎng)景例舉一些坑或者優(yōu)雅的處理方案則更佳。

4.熟練掌握react生態(tài)常用工具，redux/react-router等。

初級(jí)：

• 知道react-router，redux，redux-thunk，react-redux，immutable，antd或同級(jí)別社區(qū)組件庫(kù)。
• 知道vue和angular對(duì)應(yīng)全家桶分別有哪些。
• 知道瀏覽器react相關(guān)插件有什么，怎么用。
• 知道react-router v3/v4的差異。
• 知道antd組件化設(shè)計(jì)思路。
• 知道thunk干嘛用的，怎么實(shí)現(xiàn)的。

中級(jí)：

• 看過(guò)全家桶源碼，不要求每行都看，但是知道核心實(shí)現(xiàn)原理和底層依賴(lài)。能口噴幾行關(guān)鍵代碼把對(duì)應(yīng)類(lèi)庫(kù)實(shí)現(xiàn)即達(dá)標(biāo)。
• 能從數(shù)據(jù)驅(qū)動(dòng)角度透徹的說(shuō)明白redux，能夠口噴原生js和redux結(jié)合要怎么做。
• 能結(jié)合redux，vuex，mobx等數(shù)據(jù)流談?wù)勛约簩?duì)vue和react的異同。

高級(jí)：

• 有基于全家桶構(gòu)建復(fù)雜應(yīng)用的經(jīng)驗(yàn)，比如最近很火的微前端和這些類(lèi)庫(kù)結(jié)合的時(shí)候要注意什么，會(huì)有什么坑，怎么解決

5.熟悉各種Web前端技術(shù)，包括HTML/XML/CSS等，有基于Ajax的前端應(yīng)用開(kāi)發(fā)經(jīng)驗(yàn)。

初級(jí)：

• HTML方面包括但不限于：語(yǔ)義化標(biāo)簽，history api，storage，ajax2.0等。
• CSS方面包括但不限于：文檔流，重繪重排，flex，BFC，IFC，before/after，動(dòng)畫(huà)，keyframe，畫(huà)三角，優(yōu)先級(jí)矩陣等。
• 知道axios或同級(jí)別網(wǎng)絡(luò)請(qǐng)求庫(kù)，知道axios的核心功能。
• 能口噴xhr用法，知道網(wǎng)絡(luò)請(qǐng)求相關(guān)技術(shù)和技術(shù)底層，包括但不限于：content-type，不同type的作用；restful設(shè)計(jì)理念；cors處理方案，以及瀏覽器和服務(wù)端執(zhí)行流程；口噴文件上傳實(shí)現(xiàn)；
• 知道如何完成登陸模塊，包括但不限于：登陸表單如何實(shí)現(xiàn)；cookie登錄態(tài)維護(hù)方案；token base登錄態(tài)方案；session概念；

中級(jí)：

• HTML方面能夠結(jié)合各個(gè)瀏覽器api描述常用類(lèi)庫(kù)的實(shí)現(xiàn)。
• css方面能夠結(jié)合各個(gè)概念，說(shuō)明白網(wǎng)上那些hack方案或優(yōu)化方案的原理。
• 能說(shuō)明白接口請(qǐng)求的前后端整體架構(gòu)和流程，包括：業(yè)務(wù)代碼，瀏覽器原理，http協(xié)議，服務(wù)端接入層，rpc服務(wù)調(diào)用，負(fù)載均衡。
• 知道websocket用法，包括但不限于：鑒權(quán)，房間分配，心跳機(jī)制，重連方案等。
• 知道pc端與移動(dòng)端登錄態(tài)維護(hù)方案，知道token base登錄態(tài)實(shí)現(xiàn)細(xì)節(jié)，知道服務(wù)端session控制實(shí)現(xiàn)，關(guān)鍵字：refresh token。
• 知道oauth2.0輕量與完整實(shí)現(xiàn)原理。
• 知道移動(dòng)端api請(qǐng)求與socket如何通過(guò)native發(fā)送，知道如何與native進(jìn)行數(shù)據(jù)交互，知道ios與安卓jsbridge實(shí)現(xiàn)原理。

高級(jí)：

• 知道移動(dòng)端webview和基礎(chǔ)能力，包括但不限于：iOS端uiwebview與wkwebview差異；webview資源加載優(yōu)化方案；webview池管理方案；native路由等。
• 登陸抽象層，能夠給出完整的前后端對(duì)用戶(hù)體系的整體技術(shù)架構(gòu)設(shè)計(jì)，滿(mǎn)足多業(yè)務(wù)形態(tài)用戶(hù)體系統(tǒng)一。考慮跨域名、多組織架構(gòu)、跨端、用戶(hù)態(tài)開(kāi)放等場(chǎng)景。
• mock方案，能夠設(shè)計(jì)出滿(mǎn)足各種場(chǎng)景需要的mock數(shù)據(jù)方案，同時(shí)能說(shuō)出對(duì)前后端分離的理解。考慮mock方案的通用性、場(chǎng)景覆蓋度，以及代碼或工程侵入程度。
• 埋點(diǎn)方案，能夠說(shuō)明白前端埋點(diǎn)方案技術(shù)底層實(shí)現(xiàn)，以及技術(shù)選型原理。能夠設(shè)計(jì)出基于埋點(diǎn)的數(shù)據(jù)采集和分析方案，關(guān)鍵字包括：分桶策略，采樣率，時(shí)序性，數(shù)據(jù)倉(cāng)庫(kù)，數(shù)據(jù)清洗等。

6.有良好的編碼習(xí)慣，對(duì)前端技術(shù)有持續(xù)的熱情，個(gè)性樂(lè)觀開(kāi)朗，邏輯性強(qiáng)，善于和各種背景的人合作。

初級(jí)：

• 知道eslint，以及如何與工程配合使用。
• 了解近3年前端較重要的更新事件。
• 面試過(guò)程中遇到答不出來(lái)的問(wèn)題，能從邏輯分析上給出大致的思考路徑。
• 知道幾個(gè)熱門(mén)的國(guó)內(nèi)外前端技術(shù)網(wǎng)站，同時(shí)能例舉幾個(gè)面試過(guò)程中的核心點(diǎn)是從哪里看到的。

高級(jí)：

• 在團(tuán)隊(duì)內(nèi)推行eslint，并給出工程化解決方案。
• 面試過(guò)程思路清晰，面試官給出關(guān)鍵字，能夠快速反應(yīng)出相關(guān)的技術(shù)要點(diǎn)，但是也要避免滔滔不絕，說(shuō)一堆無(wú)關(guān)緊要的東西。舉例來(lái)說(shuō)，當(dāng)時(shí)勾股老師面試我的時(shí)候，問(wèn)了我一個(gè)左圖右文的布局做法，我的回答是：我自己總結(jié)過(guò)7種方案，其中比較好用的是基于BFC的，float的以及flex的三種。之后把關(guān)鍵css口噴了一下，然后css就面完了。

7.具有TS/移動(dòng)設(shè)備上前端開(kāi)發(fā)/NodeJS/服務(wù)端開(kāi)發(fā)等經(jīng)驗(yàn)者優(yōu)先。

• 根據(jù)了解的深度分初/中/高級(jí)。
• 知道TS是什么，為什么要用TS，有TS工程化實(shí)踐經(jīng)驗(yàn)。
• 知道移動(dòng)端前端常見(jiàn)問(wèn)題，包括但不限于：rem + 1px方案；預(yù)加載；jsbridge原理等。
• 能說(shuō)出大概的服務(wù)端技術(shù)，包括但不限于：docker；k8s；rpc原理；中后臺(tái)架構(gòu)分層；緩存處理；分布式；響應(yīng)式編程等。

★ JD的要求很難嗎？

首先，感謝你能看到這里，如果你是仔細(xì)看的，那么我更加感動(dòng)了。而且你已經(jīng)用實(shí)際行動(dòng)，證明了你的學(xué)習(xí)能力和耐心。上面那么大篇幅的JD翻譯，有一個(gè)問(wèn)題，大家應(yīng)該都有答案了：為什么職位描述看著簡(jiǎn)單，面試卻這么難呢？然而，有些同學(xué)可能會(huì)嘲諷起來(lái)：寫(xiě)了那么多，我認(rèn)識(shí)的有些阿里P6，P7也不是都會(huì)啊，大廠都是螺絲釘，也就面試時(shí)候問(wèn)問(wèn)，實(shí)際工作不還是if else，何況我又遇不到這些場(chǎng)景，我怎么可能知道。
在這里，我想嚴(yán)肅的說(shuō)明的是：

我所認(rèn)識(shí)的淘寶前端，以及我所在團(tuán)隊(duì)的 P6 同學(xué)，上面初級(jí)都能做到，中級(jí)至少覆蓋60%，高級(jí)覆蓋20%；P6+同學(xué)，中級(jí)覆蓋80%以上，高級(jí)覆蓋50%以上；P7同學(xué)高級(jí)覆蓋80%以上。

我們團(tuán)隊(duì)的前端，每一個(gè)人都負(fù)責(zé)多個(gè)復(fù)雜業(yè)務(wù)項(xiàng)目(客觀數(shù)據(jù)上：至少對(duì)接20+服務(wù)端接口，5個(gè)以上router配置，涉及多個(gè)用戶(hù)角色的綜合業(yè)務(wù)系統(tǒng))，以及一些通用能力，比如組件庫(kù)等。不存在一個(gè)人只接一條業(yè)務(wù)線，只負(fù)責(zé)維護(hù)某幾個(gè)組件這種螺絲釘式的工作。我不知道大廠都是螺絲釘?shù)难哉摓槭裁磿?huì)被復(fù)用到互聯(lián)網(wǎng)企業(yè)，我個(gè)人感受是，如果我在阿里的工作是螺絲釘，那么我以前幾份工作可能勉強(qiáng)算是螺紋。另外，如果你想要晉升，那么維護(hù)好這幾個(gè)業(yè)務(wù)系統(tǒng)只是你的本職工作，晉升時(shí)請(qǐng)?zhí)峁┮恍└邔用娴乃伎己图夹g(shù)產(chǎn)出。

if else 也分鮮花和牛糞。有的人寫(xiě)的是[].reduce，而有的人寫(xiě)的是var temp = ''; for() { temp += 'xxx' }。另外，如果不知道原理，那么類(lèi)似webpack這種明星級(jí)的技術(shù)產(chǎn)品，將永遠(yuǎn)與你無(wú)緣。冷靜下來(lái)想想，webpack難道也只是if else嗎？是，又不全是。

聰明的你應(yīng)該看出來(lái)了，上面 JD 翻譯里的初級(jí)、中級(jí)和高級(jí)，對(duì)應(yīng)的就是我認(rèn)為的，阿里p6/p6+/p7的能力標(biāo)準(zhǔn)，同時(shí)也是一張知識(shí)圖譜。初級(jí)的要求更偏實(shí)際應(yīng)用和基礎(chǔ)原理，中級(jí)的要求是基于原理的拓展和復(fù)雜技術(shù)架構(gòu)的應(yīng)用，高級(jí)的要求是對(duì)跨棧、跨端，多領(lǐng)域結(jié)合產(chǎn)出綜合方案的能力。而且，我們對(duì)技術(shù)的要求，都是能夠與實(shí)際業(yè)務(wù)場(chǎng)景結(jié)合，或者能對(duì)提升工作效率有幫助的。空談和尬想，或者只是百度來(lái)的文章，沒(méi)有經(jīng)過(guò)內(nèi)化，那么面試過(guò)程中將被瞬間拆穿。

有時(shí)我會(huì)在 boss 直聘上直接打字面試，有時(shí)我也會(huì)聽(tīng)到面試過(guò)程中，電話(huà)那頭傳來(lái)鍵盤(pán)敲擊的聲音，甚至有時(shí)候我會(huì)主動(dòng)讓面試的同學(xué)去百度一下，或者掛電話(huà)思考一下，過(guò)15分鐘再聊。我敢這么面試，因?yàn)槲抑?#xff0c;我要的答案你查不出來(lái)，我看的是你真正理解的東西。能搜索到的，我不在乎，我也希望你去查，來(lái)為你更好的表現(xiàn)綜合能力。

破局的方法

好了，如果看到這里，并沒(méi)有把你勸退的話(huà)，那么讓我們來(lái)點(diǎn)希望的曙光。這里用一句阿里土話(huà)來(lái)給大家一些安慰：不難，要你干嘛？

開(kāi)篇我提到面試過(guò)那么多同學(xué)之后，我最大的感受是惋惜，因?yàn)橛泻芏嗤瑢W(xué)在我看來(lái)就差一點(diǎn)點(diǎn)，他有足夠的個(gè)人能力，可能只是沒(méi)有找到感覺(jué)。這里我例舉兩個(gè)比較典型的問(wèn)題。

★ 什么是亮點(diǎn)？

我相信這是很多同學(xué)心中的疑惑，而且事實(shí)上，我看到很多簡(jiǎn)歷下面的面試記錄都會(huì)寫(xiě)：缺乏亮點(diǎn)，暫不考慮。如果仔細(xì)看了上文，到這里還有這個(gè)疑惑，那么我覺(jué)得你需要再靜下心來(lái)感受一下。

這里我不對(duì)亮點(diǎn)做明確的表述，我舉一個(gè)例子來(lái)讓大家更有體感一些：

A: 負(fù)責(zé)公司前端工作，使用 webpack 打包代碼并發(fā)布線上。使用 webpack 配置對(duì)整體性能做優(yōu)化，用 happypack 加快了打包速度。
B: 建設(shè)內(nèi)部云構(gòu)建體系，產(chǎn)出通用命令行指令工具；將發(fā)布、環(huán)境切換、快速回滾能力平臺(tái)化，保證了線上環(huán)境穩(wěn)定性；同時(shí)將研發(fā)流程量化管控，每周產(chǎn)出研發(fā)效能報(bào)告。

如果你是面試官，在簡(jiǎn)歷的大海里看一個(gè)項(xiàng)目描述，什么最吸引你的眼球呢？是webpack，happypack的關(guān)鍵字嗎？還是一句話(huà)就讓你想到這件事的復(fù)雜性，和這個(gè)系統(tǒng)帶來(lái)的巨大價(jià)值？

★ 沒(méi)有場(chǎng)景怎么辦？

這也是很多同學(xué)經(jīng)常遇到的問(wèn)題。上面例舉了那么多技術(shù)點(diǎn)，而我在的環(huán)境，前端就我一個(gè)，甚至服務(wù)端我都要寫(xiě)一點(diǎn)，哪有精力去搞這種大規(guī)模團(tuán)隊(duì)用到的東西？
首先，時(shí)間靠自己合理規(guī)劃。我和老婆兩個(gè)人自己帶孩子，有兩個(gè)娃，每天平均9點(diǎn)下班，我每天回家收拾玩具，孩子睡得晚可能需要再陪玩一下，周末我?guī)Ш⒆訛橹?#xff0c;但是我去年仍然白金了2個(gè)ps4的游戲。

在時(shí)間問(wèn)題排除之后，我建議分三個(gè)階段：

畢業(yè)3年以?xún)?nèi)的階段：不用著急，你的選擇很多，你可以核對(duì)上面初級(jí)的點(diǎn)，看自己是否都做到了，沒(méi)做到就去好好學(xué)習(xí)吧，初級(jí)的技術(shù)要點(diǎn)對(duì)團(tuán)隊(duì)規(guī)模沒(méi)有依賴(lài)，一個(gè)人也能做到極致。如果你所處的環(huán)境已經(jīng)有2個(gè)人，可以同時(shí)關(guān)注中級(jí)和高級(jí)的點(diǎn)，不要覺(jué)得人少就不去嘗試，放手去做，過(guò)程中會(huì)有實(shí)打?qū)嵉氖斋@。

畢業(yè)5年以?xún)?nèi)的階段：不論你處的環(huán)境團(tuán)隊(duì)規(guī)模如何，請(qǐng)開(kāi)始著眼于中級(jí)和高級(jí)相關(guān)能力，人少就不需要研發(fā)提效了嗎？我在segmentFault上發(fā)的第一篇文章，是如何用travis和github做一鍵部署，那時(shí)候我還沒(méi)有去淘寶，我所在的團(tuán)隊(duì)也沒(méi)有用到這個(gè)能力，這篇文章是我自己的個(gè)人項(xiàng)目用到的。而整個(gè)過(guò)程同樣涉及到了研發(fā)效能的方方面面。

畢業(yè)8年以?xún)?nèi)的階段：請(qǐng)開(kāi)始著眼于高級(jí)相關(guān)的技術(shù)方案產(chǎn)出。我以組件動(dòng)態(tài)化為例，我早年維護(hù)手機(jī)淘寶的整個(gè)交易鏈路H5頁(yè)面，所有頁(yè)面的ui部分都是細(xì)粒度組件化抽離，通過(guò)配置下發(fā)頁(yè)面結(jié)構(gòu)的。即使一個(gè)人維護(hù)一個(gè)頁(yè)面，也要竭盡所能去思考好的技術(shù)方案。這種高度動(dòng)態(tài)的設(shè)計(jì)，帶來(lái)的好處是，每年雙十一，80%的需求交給pd自己處理就行了，剩下流轉(zhuǎn)到我手上需要開(kāi)發(fā)的需求，都是新增交互，或者之前抽象不足的組件。所以當(dāng)時(shí)我在的團(tuán)隊(duì)，3個(gè)人在維護(hù)了包括手淘首頁(yè)、商品詳情和正逆向交易鏈路所有H5頁(yè)面，同時(shí)還有額外精力去支持大促會(huì)場(chǎng)頁(yè)。更好的技術(shù)思考和設(shè)計(jì)，一定能給你帶來(lái)更多的可能性，而系統(tǒng)的優(yōu)雅程度，一定不是靠業(yè)務(wù)代碼的堆砌，而是作為技術(shù)核心的你，如何去思考。

我想怎么幫你

我相信每個(gè)人都是能快速成長(zhǎng)的，只是每個(gè)人缺少的東西不同。有的人少了些腳踏實(shí)地，有的人少了些登高望遠(yuǎn)的機(jī)會(huì)，更多的人或許只是沒(méi)有找到那條正確的路。
我希望這篇文章能夠幫助到正在前端領(lǐng)域努力的人，也希望這一篇文章就能成為指路明燈之一。但同時(shí)我也深知，每個(gè)人都是不一樣的，所以，我這里留下聯(lián)系方式， 需要的同學(xué)可以加微信：vianvio （加備注：前端同路人）

我可以給你做模擬面試，同時(shí)給出我認(rèn)為的，適合你的發(fā)展思路和建議，當(dāng)然也可以幫你內(nèi)推。

另外，目前我們成立了一個(gè)模擬面試群，有定期活動(dòng)，可以參考：https://github.com/vianvio/FE-Companions 歡迎有興趣的同學(xué)來(lái)參加。

介紹一下我所在的團(tuán)隊(duì)

我在阿里巴巴淘寶技術(shù)部-ihome 業(yè)務(wù)。目前，ihome 正在深耕家居家裝行業(yè)，縱向深入行業(yè)內(nèi)部，希望能給行業(yè)帶來(lái)一些創(chuàng)新。目前可對(duì)外公開(kāi)的產(chǎn)品和業(yè)務(wù)形態(tài)有：躺平 App、位于青島和寧波的桔至生活門(mén)店。我們還有更多有趣、充滿(mǎn)挑戰(zhàn)和超出你想象的業(yè)務(wù)。
如果你愿意來(lái)和我們一起相信，那請(qǐng)發(fā)送簡(jiǎn)歷過(guò)來(lái)，我們一定會(huì)一起看見(jiàn)！
前端簡(jiǎn)歷請(qǐng)發(fā)送到：yefei.niuyf@alibaba-inc.com 或 lijie.slj@alibaba-inc.com
主攻3d方向的同學(xué)，簡(jiǎn)歷請(qǐng)發(fā)送到：jiangcheng.wxd@alibaba-inc.com
java簡(jiǎn)歷請(qǐng)發(fā)送到：xiaoxian.zzy@taobao.com 或 wuxin.sn@taobao.com
客戶(hù)端簡(jiǎn)歷請(qǐng)發(fā)送到：fangying.fy@alibaba-inc.com
或許有人會(huì)覺(jué)得奇怪，聯(lián)系方式寫(xiě)在最后，還有多少人能看到，這里我引用馬老師和逍遙子老師對(duì)阿里價(jià)值觀的解讀，來(lái)解釋一下：我們的價(jià)值觀是為了幫助我們尋找同路的人。我們期待有志之士的加入！

總結(jié)

以上是生活随笔為你收集整理的我在阿里招前端，我该怎么帮你？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。