前言
很榮幸，之前接到了 京東集團-京東商城-商城使用者體驗設計部-前端開發部-前端架構組 的面試。
接下來的內容，我會結合問題給出一個正確的答案，其中有一些問題，正好在我之前的專欄當中有涉及到，所以有些問題的回答，我會附上我寫的專欄的連結。
希望大家除了在看如何回答面試題的基礎上，還是建議大家可以系統性的、更加確切的去了解各個面試點要考的知識點，去了解到底這個是幹什麼的，而不是這道題要回答什麼。
正文
象徵性的開頭
先問了一下學歷，介紹了一下之前做過的專案，還有用了哪些技術棧、感覺自己專案當中遇見比較複雜的功能
這裡大家根據自己的情況，只要回答的清晰就可以
前端技術問題
1、
vue生命週期有哪些？
beforeCreate（初始化介面前）created（初始化介面後）beforeMount（渲染dom前）mounted（渲染dom後）beforeUpdate（更新資料前）updated（更新資料後）beforeDestroy（解除安裝元件前）destroyed（解除安裝元件後）
注：平時在工作當中，我們其實可以很清楚的知道有這些生命週期方法，但是呢，如果大家還想了解一下每個生命週期執行前，都做了什麼，請跳轉：詳解 Vue 生命週期實現
2、
vue響應式資料是如何實現的？
在官方文件中，有簡單介紹一點，是基於 Object.defineProperty 去實現的；
但是有一個要求，就是在 例項化 Vue 建構函式前，所有熬進行雙向繫結的資料，都是要在 data 裡面去做初始化的，哪怕是一個空值；
因為在每次例項化的時候，Vue 會去檢測 data ，檢視並把存在屬性用 Object.defineProperty 進行監聽；
在每一個需要判斷或者展示當前響應式監聽的資料時，例如：
<div>{{name}}</div>
複製程式碼new Vue({
data(){
return {
name:'zhangsan'
}
}
})
複製程式碼初始化的時候，我繫結了一個 name 屬性，它在一個 div 裡面做了展示；
當我在 div 裡面新增 name 展示的時候，其實在模板編譯的時候，獲取了一下 name 屬性；
因為前面有提到，我給當前的屬性繫結了 Object.defineProperty ，所以在獲取的時候，我會呼叫到 get 方法；
在這之前，我有例項化一個 dep 佇列，把每次獲取 name 屬性的地方，做一個 push ；
當我接下來要做資料修改的時候，比如把 zhangsan 變成了 lisi ，那麼在 set 方法裡，把我當前屬性的佇列有監聽當前屬性的位置，全部更新一遍；
最後把 data 物件裡面的屬性值做修改；
注：這是一個面試的回答，但這個不夠詳細，如果想很詳細的去了解，具體都做了什麼，請跳轉：Vue 原始碼解析（例項化前） - 響應式資料的實現原理
4、一個
url從輸入按下Enter鍵，到頁面展示出來，都經歷了什麼？
首先，在輸入網址按下回車以後，這個時候DNS伺服器會通過當前的網址去解析網址的 ip；
在查詢到真的 IP 以後，這個時候瀏覽器會向 web 伺服器發起一個 tcp 連線請求（三次握手）：
第一次：建立連結時，客戶端傳送 syn 包到伺服器，並進入SYN_SENT（傳輸控制協議）狀態，等待伺服器確認；
第二次：伺服器收到 syn 包，必須確認客戶的 syn ，同時自己也傳送一個 ack 包，即 syn + ack 包，此時伺服器進入 SYN_RECV （服務端被動開啟後，接收到了客戶端的 syn 並且傳送了 ack 時的狀態） 狀態；
第三次：客戶端收到了伺服器的 syn + ack 包，向伺服器傳送確認包 ack ，此包傳送完畢，客戶端和伺服器進入 ESTABLISHED （tcp 連線成功） 狀態，完成三次握手；
當三次握手結束後，客戶端和伺服器就建立好了連線，這時候 tcp 協議斷開；
開始訪問當前伺服器下預設的 index.html ，並呼叫該訪問的資原始檔，展示對應的內容。
5、你是怎麼理解物件導向的，什麼是物件導向，用物件導向做過什麼
物件導向有三大特性：封裝 、 繼承 、多型 ，其實還有一個特性，就是 抽象 ，只不過我們平時很少說這一點；
物件導向有兩個概念：類 和 例項；
物件導向的優勢：可擴充套件，易維護，高內聚，低耦合；
物件導向的劣勢：由於它的特點導致了它的整體體積會很大，哪怕拆分成了不同的類，這一點和 函數語言程式設計 相比，是它的劣勢，因為函數語言程式設計有一個特點就是，每個函式只做一件事情；
在專案當中，用物件導向做的東西很多，印象最深刻的有兩個，一個是 即時通訊 的功能封裝，還有一個就是 音訊視訊播放 的統一處理，即時通訊涉及的功能比較多，也比較繁瑣，我拿 音訊視訊播放 這個功能點來舉例：
由於我們做的產品，會涉及到很多的音訊和視訊，但是音訊和視訊檔案是不允許同時播放的，每次只能播放一個；
比如我現在播放了一個 音訊a，當我接下來點選播放 音訊b，那麼這個時候 音訊a 是要暫停的，而不是清空狀態，下次點選是重新播放；
而且如果我再播放狀態當中，一直去進行更新我的 data 物件當中獲取到的資料，對 js引擎執行緒 也是會有影響的，比如我這個時候也在做別的事情，還得在事件流 event loop 中進行排隊，這不是我們想要的；
所以我用了一個類去做這件事情，設計模式用的 單例模式 ；
在首次進入頁面的時候，只載入檔案，不去例項化該物件；
當我在發現有對媒體檔案（音訊視訊）進行操作是，在去建立或者獲取，寫法如下：
class Media {
}
Media.instance = undefined;
Media.getInstance = function(){
if(!Media.instance){
Media.instance = new Media()
}
return Media.instance;
}
複製程式碼這是一個簡單的單例模式的實現；
那麼接下來如果我們要對媒體檔案進行如上的操作，那麼需要有一個單獨的屬性：
class Media {
constructor(){
this._onlyMedia = {
id:'',
url:'',
name:'',
curTime:'',
duration:'',
...
}
}
}
複製程式碼這樣就知道了大概的一個意思，比如我要每次點選媒體檔案的時候，要去對比是不是同一個，因為有不同的id；
具體的實現步驟我就不寫了，大概的意思表述清楚就好
複製程式碼6、剛才你提到了事件流（event loop），能簡單的說一下，什麼是事件流嗎？
我們都知道，js是單執行緒的，雖然現在有 worker 的存在，但是也只是可以進行運算，並不能操作 dom；
js最一開始執行的執行緒，是主執行緒，然後主執行緒執行完畢後，是微佇列 microtask 的迴圈執行，微佇列執行完畢後，在執行巨集佇列 macrotask；
巨集佇列的方法：setTimeout 、setInterval 、setImmediate 、I/O 、UI rendering
微佇列的方法：promise.then、process.nextTick 、Object.observe(已廢棄)
正好之前寫過這方面的文章，想詳細的理解這一塊的知識，跳轉：效能優化篇 - js事件迴圈機制（event loop）
7、說一說
xss攻擊
其實就是一種利用指令碼把程式碼植入到提供給其他使用者使用的頁面中，一般就是利用表單提交；
如果我們自己去寫這種攻擊防禦的方式，最簡單的就是利用表單提交的內容，去做處理，不允許提交 script 標籤內容等；
平時在實際專案當中，提交請求一般會用 axios，它對 xss 攻擊已經做了攔截，我們不需要去在特意的做這方面的處理；
8、== 和 === 的區別
== 會自動轉換型別進行對比，=== 是強制性不會轉換
9、
vue當中，on事件可以監聽多個事件嗎？
可以
職業發展和未來的規劃
1、你自己是如何對自己未來定位的，你想向什麼方向發展
我的本職工作，是一個前端，但是我對產品也很感興趣，做了這麼久的前端，我發現了一些前端和產品溝通直接存在的一些問題，可能互相表達的意思是一樣的，但是術語不一樣，溝通成本的提升，從而導致了互相直接會出現一定的摩擦；
而且如果每個人站在自己的角度去考慮問題的話，都會有一定的侷限性，包括產品，我雖然是一個程式設計師，但是我會站在一個使用者的角度去考慮我們的產品存在的問題，還有我是一個使用者，我想要什麼樣的產品，什麼樣的產品符合我的需求，要搞清楚產品經理要設計什麼樣的產品，和使用者需要什麼樣的產品，這是兩個概念；
如果拋開產品的方向的話，只考慮開發的話，我會想著把我的前端學精，畢竟前端涉及到的知識點有很多，雖然現在很多前端都要懂後端，這個我是贊同的，但是我覺得作為一個前端，還是把自己的本職工作做到一個極致，再去研究別的語言；
我說的極致不是很好的完成手頭的工作，而是要針對這個領域，去不斷的學習和追蹤，對新知識要有很強的嗅覺；
平時我會對自己瞭解到的知識、新技術的探索，還有一些比較大型的框架的原始碼進行解讀然後寫成文章釋出到部落格上；
2、你有提到你會寫部落格，這是你之前公司的要求嗎？
不是的，是我以個人的名義去寫的；
在以前，我是很少寫這方面的東西，不喜歡寫，懶，後來接觸到一個朋友，他說你可以試著寫一下，總結總結自己，然後我就開始去嘗試著寫了；
起初寫第一篇的時候，感覺就是這樣的，按照我的想法去寫了一篇文章，但是這樣的文章，發現第一排版格式就有問題，看起來很不方便，很亂；
接著就是有一些點介紹的很不清楚，或者說理解有一定的問題，通過網友的評論，我也可以知道我自己的短板在哪裡；
時間長了，就養成了這種習慣，喜歡分享，喜歡寫文章，和大家一起進步，其實寫部落格還有一個好處，就是你寫部落格時間長了，表達能力也會有一定的提升；
技術好，不會表達，是很難一起合作的，那樣只能單兵作戰，只有把你說的讓所有人都懂了，可以接受了，說明你在團隊裡可以起到很大的作用，有時候，技術好不如會溝通表達的好；
結束語
後來兩個面試官出去了半天，後來進來跟我說，感覺很合適，是這幾天面試的最合適的一個，但是因為52原則，他們去找了技術總監商量，技術總監說可能hr那邊過不了，後來問了一個我之前的同事現在在京東，他說如果要這種不符合52原則的進來，是需要面試官到技術總監之間所有人擔責任，保證我可以在京東待夠兩年；
也許是我能力還是不足，但是上面都是我的回答，只不過以部落格的形式寫出來，寫的更詳細了些，還有可能就是後者，如果是後者的話，那就冤了；
最後把我推薦到了一個無人駕駛的公司，面了3輪技術，等hr通知。