17 年從上家公司離職之後就嘗試過去阿里面試，結果還沒進入狀態就被涼涼了，在扇貝呆了 2 年多的時間，趕上正好租的房子要到期了，就想着再次嘗試一下吧，結果還蠻順利的拿到了 p6 的 offer，趁着目前在家裏呆着哪裏也不讓去的功夫整理一下面試的過程，希望能幫到大家~
一面
- 自我介紹
此處就省略了，一般自我介紹的時間感覺不宜過長，簡單說下就好~
- 從淺到深諮詢一個項目
因爲我在目前公司涉及小程序比較早，並且那個時候還沒有比較成熟的線上監控方案，所以我們自己搞了一個線上錯誤監控系統，然後我就拿這個項目來說了，面試官會仔細的從設計思路，運行原理等等方面開始問，一直問到後端數據慢查詢怎麼解決，這個問題的時間大概佔了面試時間的一半還多，然後得到的經驗就是大家一定要自己實際去設計和實現一些項目，不能停留在眼高手低只看不落實的層面，如果這個項目不是我帶頭髮起和親身實現了裏面的一些流程可能很容易就卡殼了，在做的過程中遇到的問題都是很寶貴的經驗，當然也是成長的一部分~
- 簡單介紹前端模塊化，amd，cmd，commonjs es6 的 module
很尷尬，因爲我們目前公司都是直接用esm，再加上自己確實沒在前端項目中用過amd 和 cmd項目的類庫，然後再加上異常的緊張(一面的時候緊張到說話都喘氣，哈哈)，然後只聊到一個是同步加載，一個是異步加載，沒說出來一個是前置依賴，一個是就近依賴，面試官也很耐斯，聽到我有點緊張也沒繼續問了，說了一句安慰我的話-現在已經不怎麼用了~，哈哈哈
- commonjs 和 es6 的 module 哪個支持異步
緊接着問了這個問題，emmm.. 當時差點沒緩過來，冷靜分析了一波，然後想到我們最近的項目中在做react組件第一步加載，想到了 es10 版本添加了異步 import() 方式去載入一個模塊，所以答案毫無疑問是 esm 目前支持異步，其實返回來想想，如果用排除法這個也很簡單，因爲 commonjs 規範主要是給 node 層用的，node 層對於 module 的加載無非就是文件的讀寫，所以它根本沒有必要去支持異步加載，讀寫 io 本身就很快~
- async await 和 promise 的關係
這個問題是當初我第一次面試阿里的時候回答的不好的一個問題，所以面試官專門提出來問了我一下，當然現在看這個問題就比較簡單了，async await 是 promise 和 generator 函數組合的一個語法糖，這個沒啥好說的~
- 口述代碼，實現 promise.all 的 polyfill
可能還是擔心我這塊不是很熟悉，所以又問了一個相關的問題，這個比較簡單，我直接寫代碼，當時是口述的，思路是一樣的；
Promise.myAll = function(...args){ const result = []; let isFail = false; let errInfo; let j = args.length; for (let i = 0; i < args.length; i++){ // 如果有錯誤就停止循環 if(isFail) { return Promise.reject(errInfo); }; // 挨個運行promise args[i].then(res => { // 處理結果 result.push(res); j--; if(j === 0){ return Promise.resolve(result); } }).catch(err => { // 設置停止循環的標誌，存儲錯誤信息 isFail = true; errInfo = err; }) } } // 以上都是未經運行未經測試的僞代碼，可能有問題，大致思路就這樣~
- flex 佈局，固定高度，左邊定寬，右邊自適應？
這個比較簡單，flex 佈局給父元素設置 display:flex，左邊的子元素 flex:none，給個 width:100px，右邊的子元素 flex:1 就可以了，當然可能有別的方式，這個應該是最簡單的~
- 如果子元素不能 100% 繼承高度，怎麼實現撐滿？
這個問題我當時沒反應過來面試官的意思，我問了一下是不是要縱軸方向的 flex 佈局？後來面試官說 嗯。。也可以，這個過了。我就愣了，回來之後想了一下，不知道是不是說如果子元素無法 100% 的繼承高度，那是不是可以結合定位的方式，比如父元素 relative，子元素 absolute，然後四個位置都是 0？不知道是不是這個意思~無法考究了~
- 對 ts 的理解
ts 用的不是很多，因爲我們的項目大部分都是基於 h5 的，首先邏輯不是很複雜，因爲每個 part 最多就三四個頁面而且跟別的 part 基本沒關係，業務決定並不是很適合 ts，所以也沒在團隊中怎麼推廣，但是有在後臺項目，就是管理端用了 ts，所以簡單說了一下 ts 和 js 的優缺點~
- ts 的泛型是什麼作用
一下沒反應過來怎麼回答，因爲本身 ts 用的不多，泛型用的更不多，但是後來我想了一下 java 中的泛型，再加上面試官的提示，我給的答案是泛型決定了一個類型在不同的場景下能夠在每個場景下從始至終的保持類型一致，有點拗口，但是應該就是這麼個意思~
- 假如監控系統別的組需要用，並且沒滿足他們的需求，你會怎麼處理
瞬間沒反應過來面試官想問啥，因此說了一大堆，比如說要看自己的團隊是否有時間，要看這個需求是否合理，要看這個需求是一個定製化的需求還是一個比較通用的需求，等等各種情況下怎麼處理都給了自己的方案，然後面試官打斷我說我問的不是這個意思，是問你是你來做還是別的組來做？我說還是得分情況看事情和時間的安排，然後就過去了~
基本到這裏一面就結束了，emmm，剛掛了電話，正好面試的部門有一個之前從扇貝離職去了的同事，面的還是很巧的同一個部門，大哥就跟我說恭喜一面過了。。哈哈，2 面開始就沒那麼緊張了
二面
隔了好像就兩天 2 面就來了，2 面因爲是晚上 8 點多才開始的，所以面試官本來說準備聊半個小時，結果還是聊多了
- 設計一個通過拖拽，然後交換位置的組件，給思路就可以。
emmm，網上有很多，大體就是關於拖拽的一些 api，然後怎麼攜帶數據這些，我就不展開了~
- 假如有 2 個團隊，一個團隊想用另一個團隊的一個類庫，並且還是想在用到的時候才加進來，怎麼辦？
emmm。。我先說答案，是用 webpack 中的 externals 去配置一個 cmd 第一步引入，這個是面試官的答案，但是我印象面試官開始的時候沒提到說要用 webpack，我一直在想的就是怎麼異步加依賴，我就說可以讓他們發佈到自己的私服 npm 上，然後另一個團隊安裝，用的時候用 import 做異步加載。。balabala 說了半天，直到最後面試官來了一句你知道 webpack 的 externals 嗎？我才反應過來~emmmm，好吧~
- 設計一個組件你會考慮哪些問題？
不得不說這個是個好問題，組件天天寫，但是確實沒好好整理過，當時問完我的時候，我是有點懵逼的，我在想就是看需要啥樣子的就怎麼樣的設計唄，主要就是考慮一下擴展性，其實這個我每次開發的時候都會注意到，但是一下子竟然不知道怎麼說了，balabala 講了一堆，看需求分析啊，確定輸入輸出啊，考慮擴展性啊，別人怎麼用啊之類的，其實我覺得面試官想問的可能是如何設計一個通用的組件，可以參考這個
- 回到一個我簡歷上的項目，這個項目的核心是讓運營和產品能夠自己替換線上活動頁或者落地頁的圖片資源和文案一類的內容，同時還有定點替換的功能，這個面試的時候還沒完全實現，不過現在已經上線了一個簡單版本了，用着還可以，等待後續再迭代，這個項目問了一下簡單的思路，我還準備描述我們在 node 做的緩存，結果面試官說我瞭解了，emmm，可能太晚了吧，哈哈
二面就結束了，完了看下時間，超了半小時，主要卡在第 2 個題目上，從始至終都沒去向 webpack，這個確實還是自己的思路一下被限制的太死了，再加上我們通過 webpack 的 externals 去做的配置很少，基本就是簡單的 jquery 這樣引入過，後來爲了方便都直接走 npm 裝依賴了，其實還是要看場景，有時候偷懶確實是問題~~
三面
隔了三天左右，三面的通知就下來了，三面是 p8 的大佬，從頭到尾都沒問基礎知識相關的內容；
- 自我介紹
省略。。
- 主要做的是哪些業務？
簡單聊了一下在公司做的業務。。。
- 爲什麼感覺你們的產品會比別人家的業務要好？
這個問題涉及到一些產品的核心業務的賣點，沒多說，講了一點點。。
- 看你在帶一個項目，你一般都是怎麼協調資源的？
講了一大堆。。
後面的幾個問題不記得了，基本上都是和業務相關的，還有和產品、運營如何溝通協作等等的問題。。
三面基本都是涉及到業務相關的，總結下來就是我覺得越到後面面試反而更注重業務多一些了，這些東西不是臨時抱佛腳能 get 到的東西，如果你對所做的事情不做更多的理解，對業務不做一定的思考，可能在這個環節會涼涼，我之前也一直有說我們每個開發都要做一個有靈魂的開發，不要把自己真的就只定義爲碼農機器，我們要加入自己的思考，比如，對接到的需求要有自己的理解，怎麼樣幫助需求方更完美的去實現需求，哪些該做的沒有，哪些需求是僞需求不合理，都應該是每個人要學會和掌握的，至少在熟悉的環節要理解透徹~
四面
大概也是三天左右，四面的通知也下來了，是一個 p9 的大佬，比我想象的要老一點哈哈，所以小夥伴們不用擔心我們吃的是青春飯，加油奮鬥吧~
- 什麼是 h5?
是 html 歷史上的一個版本，也是一個協議，規定 html5 支持哪些、不支持哪些特性；
- 舉幾個 h5 的新特性
很多，比如媒體啊，storage 相關的等等
- 我看你做過小程序，你覺得小程序，webview 和 h5 的關係？
開始有點懵，我在想這應該是完全不同的東西吧，後來簡單說了一下小程序，webview 屬於是容器一類，它們可以用來承載 html 的內容，但是小程序的又不同於標準的 webview，它承載的是自己獨有類 html 語法等等。。。
4.你們的業務主要用的是哪些方式？
native + webview 還有小程序，瀏覽器端只有後臺項目，不是很多
後面的問題都不記得了，反而感覺四面的問題比較簡單，時間也不久，就二十來分鐘，可能是因爲晚上快下班了吧~
總結
三面和四面都是視頻面的，我都是提前十分鐘就在線等了，說話的時候面試官都能看到你的一言一行，還是注意點，把周圍的環境也弄整齊一些，給面試官留個好印象~
經歷了大概 2 周的時間，順利面完，最後的 hr 是現場面的，也問了很多個人相關的問題，hr 面的內容還蠻多的，並且 hr 面會涉及到一些技術相關，當然不是基礎內容~
好了，面試至此結束，不知道大家看到我所經歷的這些面試題有沒有什麼感觸，或者有一個目標清楚下面該怎麼準備，
而當你明確了自己的目標之後，接下來就是認真努力的去奮鬥了，我也整理形成了一些資料，有需要的老鐵點贊+關注，轉發後私信“資料”獲取
關注公衆號：Java架構師聯盟，每日更新技術好文
