面試篇 - 京東（商城用戶體驗設計部 - 前端架構組）

前言

很榮幸，以前接到了 京東集團-京東商城-商城用戶體驗設計部-前端開發部-前端架構組 的面試。

接下來的內容，我會結合問題給出一個正確的答案，其中有一些問題，正好在我以前的專欄當中有涉及到，因此有些問題的回答，我會附上我寫的專欄的連接。

但願你們除了在看如何回答面試題的基礎上，仍是建議你們能夠系統性的、更加確切的去了解各個面試點要考的知識點，去了解到底這個是幹什麼的，而不是這道題要回答什麼。

正文

象徵性的開頭

先問了一下學歷，介紹了一下以前作過的項目，還有用了哪些技術棧、感受本身項目當中碰見比較複雜的功能

這裏你們根據本身的狀況，只要回答的清晰就能夠

前端技術問題

一、vue 生命週期有哪些？

• beforeCreate（初始化界面前）
• created（初始化界面後）
• beforeMount（渲染dom前）
• mounted（渲染dom後）
• beforeUpdate（更新數據前）
• updated（更新數據後）
• beforeDestroy（卸載組件前）
• destroyed（卸載組件後）

注：平時在工做當中，咱們其實能夠很清楚的知道有這些生命週期方法，可是呢，若是你們還想了解一下每一個生命週期執行前，都作了什麼，請跳轉：詳解 Vue 生命週期實現

二、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 源碼解析（實例化前） - 響應式數據的實現原理

四、一個 url 從輸入按下回車鍵，到頁面展現出來，都經歷了什麼？

首先，在輸入網址按下回車之後，這個時候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 ，並調用該訪問的資源文件，展現對應的內容。

五、你是怎麼理解面向對象的，什麼是面向對象，用面向對象作過什麼

面向對象有三大特性：封裝 、 繼承 、多態 ，其實還有一個特性，就是 抽象 ，只不過咱們平時不多說這一點；

面向對象有兩個概念：類 和 實例；

面向對象的優點：可擴展，易維護，高內聚，低耦合；

面向對象的劣勢：因爲它的特色致使了它的總體體積會很大，哪怕拆分紅了不一樣的類，這一點和 函數式編程 相比，是它的劣勢，由於函數式編程有一個特色就是，每一個函數只作一件事情；

在項目當中，用面向對象作的東西不少，印象最深入的有兩個，一個是 即時通信 的功能封裝，還有一個就是 音頻視頻播放 的統一處理，即時通信涉及的功能比較多，也比較繁瑣，我拿 音頻視頻播放 這個功能點來舉例：

因爲咱們作的產品，會涉及到不少的音頻和視頻，可是音頻和視頻文件是不容許同時播放的，每次只能播放一個；

好比我如今播放了一個 音頻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；

具體的實現步驟我就不寫了，大概的意思表述清楚就好
複製代碼

六、剛纔你提到了事件流（event loop），能簡單的說一下，什麼是事件流嗎？

咱們都知道，js是單線程的，雖然如今有 worker 的存在，可是也只是能夠進行運算，並不能操做 dom；

js最一開始執行的線程，是主線程，而後主線程執行完畢後，是微隊列 microtask 的循環執行，微隊列執行完畢後，在執行宏隊列 macrotask；

宏隊列的方法：setTimeout 、setInterval 、setImmediate 、I/O 、UI rendering

微隊列的方法：promise.then、process.nextTick 、Object.observe(已廢棄)

正好以前寫過這方面的文章，想詳細的理解這一塊的知識，跳轉：性能優化篇 - js事件循環機制（event loop）

七、說一說 xss 攻擊

其實就是一種利用腳本把代碼植入到提供給其餘用戶使用的頁面中，通常就是利用表單提交；

若是咱們本身去寫這種攻擊防護的方式，最簡單的就是利用表單提交的內容，去作處理，不容許提交 script 標籤內容等；

平時在實際項目當中，提交請求通常會用 axios，它對 xss 攻擊已經作了攔截，咱們不須要去在特地的作這方面的處理；

八、== 和 === 的區別

== 會自動轉換類型進行對比，=== 是強制性不會轉換

九、vue 當中，on 事件能夠監聽多個事件嗎？

能夠

職業發展和將來的規劃

一、你本身是如何對本身將來定位的，你想向什麼方向發展

個人本職工做，是一個前端，可是我對產品也很感興趣，作了這麼久的前端，我發現了一些前端和產品溝通直接存在的一些問題，可能互相表達的意思是同樣的，可是術語不同，溝通成本的提高，從而致使了互相直接會出現必定的摩擦；

並且若是每一個人站在本身的角度去考慮問題的話，都會有必定的侷限性，包括產品，我雖然是一個程序員，可是我會站在一個用戶的角度去考慮咱們的產品存在的問題，還有我是一個用戶，我想要什麼樣的產品，什麼樣的產品符合個人需求，要搞清楚產品經理要設計什麼樣的產品，和用戶須要什麼樣的產品，這是兩個概念；

若是拋開產品的方向的話，只考慮開發的話，我會想着把個人前端學精，畢竟前端涉及到的知識點有不少，雖然如今不少前端都要懂後端，這個我是贊同的，可是我以爲做爲一個前端，仍是把本身的本職工做作到一個極致，再去研究別的語言；

我說的極致不是很好的完成手頭的工做，而是要針對這個領域，去不斷的學習和追蹤，對新知識要有很強的嗅覺；

平時我會對本身瞭解到的知識、新技術的探索，還有一些比較大型的框架的源碼進行解讀而後寫成文章發佈到博客上；

二、你有提到你會寫博客，這是你以前公司的要求嗎？

不是的，是我以我的的名義去寫的；

在之前，我是不多寫這方面的東西，不喜歡寫，懶，後來接觸到一個朋友，他說你能夠試着寫一下，總結總結本身，而後我就開始去嘗試着寫了；

起初寫第一篇的時候，感受就是這樣的，按照個人想法去寫了一篇文章，可是這樣的文章，發現第一排版格式就有問題，看起來很不方便，很亂；

接着就是有一些點介紹的很不清楚，或者說理解有必定的問題，經過網友的評論，我也能夠知道我本身的短板在哪裏；

時間長了，就養成了這種習慣，喜歡分享，喜歡寫文章，和你們一塊兒進步，其實寫博客還有一個好處，就是你寫博客時間長了，表達能力也會有必定的提高；

技術好，不會表達，是很難一塊兒合做的，那樣只能單兵做戰，只有把你說的讓全部人都懂了，能夠接受了，說明你在團隊裏能夠起到很大的做用，有時候，技術好不如會溝通表達的好；

結束語

後來兩個面試官出去了半天，後來進來跟我說，感受很合適，是這幾天面試的最合適的一個，可是由於52原則，他們去找了技術總監商量，技術總監說可能hr那邊過不了，後來問了一個我以前的同事如今在京東，他說若是要這種不符合52原則的進來，是須要面試官到技術總監之間全部人擔責任，保證我能夠在京東待夠兩年；

也許是我能力仍是不足，可是上面都是個人回答，只不過以博客的形式寫出來，寫的更詳細了些，還有可能就是後者，若是是後者的話，那就冤了；

最後把我推薦到了一個無人駕駛的公司，面了3輪技術，等hr通知。