一、美團(tuán)前端面試探究

美團(tuán)目前正在進(jìn)行大規(guī)模的人才招聘。我曾參與的是美團(tuán)打車部門的前端面試，該部門技術(shù)棧主要使用vue，后臺則是node。對于這次面試，我有一肚子的心得體會想與大家分享。

一面的經(jīng)歷

一面主要是一個初步的了解和技術(shù)的探討。面試官首先讓我進(jìn)行了自我介紹，接著詢問了我在項目中使用的技術(shù)和遇到的挑戰(zhàn)。在了解了我對webpack的多頁面切換、按需加載以及某些webpack配置的理解后，他詢問了我對vue源碼的熟悉程度。我提及了對vue的watch機制的了解，然后面試官對我的框架應(yīng)用情況進(jìn)行了詢問。

隨后，面試進(jìn)入了技術(shù)深度探討階段。

技術(shù)問題的挑戰(zhàn)

1. Promise的原理：這是我在面試中遇到的一個關(guān)鍵問題。面試官在發(fā)現(xiàn)我對promise的理解并不深入后，用更直觀的方式向我解釋了promise的概念，并讓我用原生js寫一個回調(diào)函數(shù)來進(jìn)一步理解。

2. this的指向問題：這是一個比較繞的問題，需要我對javascript的this機制有深入的理解。我通過百度和自身的知識積累成功解答了這個問題。

3. bind與函數(shù)柯里化：這個問題涉及到bind的用法以及函數(shù)柯里化的概念，需要我對這兩個概念有清晰的理解并可以手寫實現(xiàn)。

4. 數(shù)據(jù)類型與==, isNaN, typeof：我被詢問到了關(guān)于javascript的數(shù)據(jù)類型以及如何使用==, isNaN, typeof進(jìn)行類型判斷。這也涉及到es6的新特性symbol。

HTTP請求頭與跨域問題

在面試中，我被問到了一些HTTP請求頭的問題，以及關(guān)于跨域請求頭的細(xì)節(jié)。我憑借之前項目的經(jīng)驗以及對CORS的了解，成功回答了這個問題并展開了與面試官的討論。

CSS相關(guān)的問題

我還被問到了關(guān)于CSS的問題，包括CSS盒子模型、浮動與清除浮動、BFC(Box Formatting Context)的理解以及兩列布局的實現(xiàn)等。這些問題都是對前端基礎(chǔ)知識的考察。

二面的挑戰(zhàn)

二面是由我的學(xué)長進(jìn)行的，但是我感覺被問的很慘。他主要考察了我的防抖知識，這是我之前沒有深入研究的領(lǐng)域。面試結(jié)束后，我詢問了是否還有二面，被告知還有，并且學(xué)長提到了后臺是node，看來對前端開發(fā)者也有了后臺知識的需求。

美團(tuán)的前端面試是一個全面而深入的考察過程，不僅考察前端知識，也考察對后端知識的了解。參加這樣的面試需要做好充分的準(zhǔn)備，并且有足夠的自我展示和溝通能力。深入探究Java技術(shù)：面試經(jīng)歷與美團(tuán)APP開發(fā)成本分析

一、面試經(jīng)歷回顧

1. 自我介紹與項目經(jīng)歷

在面試開始時，我進(jìn)行了自我介紹。隨后，針對我參與的一個支付行為項目，面試官提出了許多關(guān)于安全問題的疑問。雖然我對這方面的知識還不夠深入，感到有些迷茫，但這次問答讓我意識到自己在安全領(lǐng)域的不足。隨后，面試官還詢問了我在其他項目中的經(jīng)驗，特別是關(guān)于WebSocket的內(nèi)容。

2. Node的EventEmitter用js實現(xiàn)

我嘗試用js實現(xiàn)了Node的EventEmitter，雖然代碼能夠運行，但不夠規(guī)范。面試官指出了其中的問題，并建議我進(jìn)行改進(jìn)。這也讓我意識到自己在編程規(guī)范和代碼優(yōu)化方面的不足。

3. 虛擬DOM

面試官對虛擬DOM進(jìn)行了提問。虛擬DOM是Vue和React等前端框架的重要特性。在瀏覽器渲染過程中，渲染引擎和JS引擎各司其職。由于獲取DOM元素需要依賴渲染引擎，因此在前端優(yōu)化中，我們需要盡量減少DOM操作。而虛擬DOM則是一種將DOM元素存儲在內(nèi)存中的數(shù)據(jù)結(jié)構(gòu)，通過JS快速操作這些數(shù)據(jù)，從而提高渲染效率。虛擬DOM也存在一些缺點。

接下來的面試中，我被問到了路由的實現(xiàn)原理、Node文件流、Java的映射機制、數(shù)組方法map和reducer的區(qū)別、進(jìn)程與線程的區(qū)別等問題。對于部分問題，我暫時無法給出深入的解答，如路由的實現(xiàn)原理和Java的映射機制。但面試官對進(jìn)程與線程的區(qū)別似乎很感興趣，我對此進(jìn)行了一些基本的解釋。瀏覽器是一個進(jìn)程，雖然JS是單線程的，但瀏覽器和多線程技術(shù)如V8引擎都支持多線程處理。我還簡單介紹了循環(huán)和任務(wù)隊列的概念。

面試官還問到了樹遍歷、算法以及KMP算法的相關(guān)知識。對于這些問題，我的回答并不夠深入。在面試過程中，我意識到自己在算法和數(shù)據(jù)結(jié)構(gòu)方面的知識儲備還有待加強。

二、開發(fā)一個類似美團(tuán)的APP需要多少錢？

開發(fā)一個類似美團(tuán)的APP涉及的不僅僅是APP界面開發(fā)，還包括后臺系統(tǒng)、運營后臺、推廣平臺、數(shù)據(jù)分析后臺、供應(yīng)商管理系統(tǒng)、訂單管理系統(tǒng)、財務(wù)結(jié)算系統(tǒng)以及內(nèi)部OA系統(tǒng)等眾多方面。雖然技術(shù)上看起來可能并不復(fù)雜，但要將這些系統(tǒng)整合在一起并確保流暢運行是一個巨大的挑戰(zhàn)。開發(fā)成本相對較高。

以美團(tuán)APP為例，其開發(fā)報價大約在18k至25k之間。這只是一個大致的估計，實際費用可能會因開發(fā)需求、開發(fā)周期、開發(fā)團(tuán)隊規(guī)模和技術(shù)難度等因素而有所不同。如果真的要開發(fā)一個類似美團(tuán)的APP，除了技術(shù)開發(fā)本身，還需要投入大量的時間和資源在市場調(diào)研、用戶需求分析、系統(tǒng)設(shè)計和測試等方面。

面試經(jīng)歷讓我意識到自己在Java和前端領(lǐng)域的知識儲備還有待加強。開發(fā)一個類似美團(tuán)的APP不僅需要技術(shù)能力，還需要對市場和用戶的深入理解。用外表和內(nèi)涵來形容APP開發(fā)，我們可以發(fā)現(xiàn)，開發(fā)一個與餓了么外賣相似的APP，外表上的模仿并不難，但要達(dá)到內(nèi)在的運行效率和用戶體驗，則是一項巨大的挑戰(zhàn)。一個APP的成功，不僅僅取決于它的功能豐富程度，更在于它的內(nèi)涵——用戶體驗、技術(shù)架構(gòu)、數(shù)據(jù)處理能力等多方面的綜合素質(zhì)。

一、餓了么與美團(tuán)的挑戰(zhàn)

以餓了么為例，其APP集成了多種功能，集美食、外賣、訂票等服務(wù)于一體，展現(xiàn)出強大的功能性和豐富的用戶體驗。這樣的APP開發(fā)需要巨大的工作量，耗時耗資。而美團(tuán)作為一個成熟的平臺，其成功的背后是長時間的技術(shù)積累和用戶培養(yǎng)。模仿其外觀容易，但真正要做到內(nèi)外兼修，則需要投入大量的時間和精力。

二、內(nèi)外兼修的APP開發(fā)

開發(fā)一款內(nèi)外兼修的APP，需要深入理解并融合各種功能背后的技術(shù)架構(gòu)和用戶體驗設(shè)計。以美團(tuán)為例，其集成了美食、溫泉、電影、酒店等多種服務(wù)，背后是復(fù)雜的技術(shù)架構(gòu)和數(shù)據(jù)處理能力。開發(fā)這樣的APP不僅需要投入大量的前期工作，還需要在后期進(jìn)行不斷的優(yōu)化和完善。開發(fā)價格自然不菲。但值得注意的是，真正的成功并非簡單的復(fù)制粘貼，而是需要在借鑒的基礎(chǔ)上，注入自己的特色和創(chuàng)新。

三、走進(jìn)美團(tuán)前端：MVI

在現(xiàn)代APP開發(fā)中，前端設(shè)計扮演著至關(guān)重要的角色。以MVI（Model-View-Intent）架構(gòu)為例，它在提升用戶體驗和開發(fā)者效率方面表現(xiàn)出色。與傳統(tǒng)的MVP（Model-View-Presenter）架構(gòu)相比，MVI更加注重用戶交互和視圖展現(xiàn)的分離。在MVI架構(gòu)中，視圖（View）只負(fù)責(zé)展現(xiàn)界面，而用戶的交互行為（Intent）則獨立出來。這種設(shè)計使得代碼更加清晰，更易于維護(hù)和擴(kuò)展。MVI架構(gòu)也注重單向數(shù)據(jù)流和不可變性原則的應(yīng)用，這使得程序更加穩(wěn)定和可靠。在實際開發(fā)中，我們可以將用戶與計算機的交互抽象為函數(shù)關(guān)系，形成閉環(huán)系統(tǒng)。通過這種方式，我們可以更好地理解并優(yōu)化用戶與APP之間的交互流程。我們也要意識到開發(fā)過程中人的因素——開發(fā)者需要不斷學(xué)習(xí)和進(jìn)步以適應(yīng)不斷變化的市場需求和技術(shù)發(fā)展。因此開發(fā)者不僅要關(guān)注技術(shù)的實現(xiàn)也要關(guān)注用戶的需求和體驗設(shè)計真正實現(xiàn)內(nèi)外兼修的APP開發(fā)才能真正在市場上獲得成功。通過分析和借鑒優(yōu)秀的外賣APP的設(shè)計理念和架構(gòu)再結(jié)合自身的需求和目標(biāo)定制出具有特色的APP才是關(guān)鍵所在。只有這樣我們才能在競爭激烈的市場中脫穎而出成為真正的行業(yè)領(lǐng)導(dǎo)者而不是追隨者。至于開發(fā)成本則取決于多種因素包括功能需求開發(fā)時間地區(qū)等因素。但無論如何我們都應(yīng)該明白成功的APP并非一日之功需要長期的投入和努力。

總的來說開發(fā)一款內(nèi)外兼修的APP是一項復(fù)雜而耗時的任務(wù)需要深入理解用戶需求和技術(shù)架構(gòu)并在此基礎(chǔ)上進(jìn)行創(chuàng)新和完善。只有這樣我們才能開發(fā)出真正具有競爭力的APP在市場上取得成功。

關(guān)于ScreenStream與InteractionStream的交互

一、ScreenStream的呈現(xiàn)

當(dāng)我們在界面上顯示流（ScreenStream）時，實際上是在觸發(fā)一系列的用戶交互行為。這就像我們打開一部電影或視頻，畫面中的每一個細(xì)節(jié)都會引導(dǎo)我們的注意力，進(jìn)而引發(fā)一系列的情感反應(yīng)和動作決策。在軟件開發(fā)中，ScreenStream就如同一個舞臺，展示著我們的應(yīng)用程序，引導(dǎo)用戶的視線和操作。

二、InteractionStream的觸發(fā)

隨著ScreenStream的呈現(xiàn)，用戶的交互流（InteractionStream）也隨之啟動。用戶與應(yīng)用程序的互動，如點擊、滑動、輸入等操作，構(gòu)成了豐富的交互流。這些交互行為不僅反映了用戶的需求和操作習(xí)慣，也是應(yīng)用程序設(shè)計成功與否的關(guān)鍵。我們設(shè)計的程序需要能夠準(zhǔn)確捕捉并響應(yīng)這些交互行為，提供流暢、自然的用戶體驗。

三、DOM的核心地位

在我們的程序中，DOM（文檔對象模型）扮演著至關(guān)重要的角色。它是網(wǎng)頁的基礎(chǔ)結(jié)構(gòu)，代表著網(wǎng)頁上的所有元素和它們之間的關(guān)系。無論是ScreenStream的呈現(xiàn)還是InteractionStream的觸發(fā)，都離不開DOM的支持。可以說，DOM是連接用戶和應(yīng)用程序的橋梁。

四、在DOM上的流轉(zhuǎn)

在DOM上，所有用戶的都會被轉(zhuǎn)發(fā)到一個特殊的交互流中。比如用戶點擊一個按鈕，這個點擊就會被捕捉到，然后轉(zhuǎn)發(fā)到相應(yīng)的處理程序中。這個過程離不開我們對domevent dispatcher的設(shè)計和實現(xiàn)。domevent dispatcher負(fù)責(zé)的分發(fā)和處理，確保能夠準(zhǔn)確無誤地傳遞給相應(yīng)的處理程序。

五、程序設(shè)計的目標(biāo)與挑戰(zhàn)

我們設(shè)計的程序?qū)Ｗ⒂趯崿F(xiàn)流暢、自然的用戶交互體驗。為了實現(xiàn)這一目標(biāo)，我們需要深入理解用戶的交互行為，準(zhǔn)確捕捉并響應(yīng)每一個。我們還需要不斷優(yōu)化DOM和domevent dispatcher的設(shè)計，提高的響應(yīng)速度和準(zhǔn)確性。這是一個充滿挑戰(zhàn)的任務(wù)，但也是我們努力的方向和目標(biāo)。

我們的程序通過處理ScreenStream和InteractionStream，實現(xiàn)了用戶與應(yīng)用程序的交互。在這個過程中，DOM和domevent dispatcher起到了關(guān)鍵的作用。我們需要不斷優(yōu)化設(shè)計，提供更好、更流暢的用戶體驗。