跨業自學黨的第一次面試

背景

我是一名二本師範院校的2018屆風景園林畢業生。

在大四通過一次景觀公司的實習以後，發現園林救不了中國（致敬魯迅），也不符合本身的心裏，毅然決然走上了脫產自學 Web 前端的道路。

據說「金三銀四」，遂我決定在3月開始尋找個人第一份前端工做。但沒想到，市場上缺少的是有經驗、能獨立開發的工程師，而不是像我這種沒有經驗的菜鳥。個人心蒙上了一層冰冰涼的霜。

在拉鉤網簡歷被拒後，我都聲情並茂的請教了對方個人不足，其中一位回答了我「非科班基礎不夠」以及「無項目經驗」。我又痛哭流涕地長段論述，終究是求得了一次來之不易的面試機會。

2019年3月14日，是我第一次面試的日子。

過程

面試前

在地鐵上，我才發現我彷佛沒有準備簡歷，所幸的是我提早約定時間一個小時到達了公司樓下，樓下正好有一間打印店。

上樓，發現你們彷佛都趴在桌子上午休，還好HR沒有睡覺，否則我可能會站好久。

HR叫來一名程序猿小哥哥進入會議室，開始了面試。

趁小哥哥看我簡歷之際，HR問了我爲啥轉專業呀，學了些啥呀Blablabla...

面試中

以後，小哥哥開始考我了。因爲忘了錄音，我就說說我答的很差（不會）的這些問題。

Q： 異步與同步的區別？

A： （支支吾吾答不上來，對這個的概念很模糊）。

---

Q： 實現垂直居中。

A： 我說了「margin：0 auto」，「text-align：center」，「flex」（扯了半天實際本身不會）。

---

Q： 說一下JSONP。

A： JSONP是利用 script 標籤能夠跨域的特性實現跨域的。

---

Q： 具體是怎麼實現的呢？

A： 我只是知道這個，沒有具體去實現過。

---

Q： 普通函數與箭頭函數的區別？

A： 箭頭函數的 this 不能改變，箭頭函數的 this 是外層函數的 this 。

---

Q： 說一下localStorage、sessionStorage、cookie的區別。

A： 一個關閉瀏覽器就沒有了、一個還保存着，而cookie保存的很小。（回答的仍是很模糊）

---

Q： 說一下有哪些選擇器？

A： getById、getByClass、getByTags、Selector（平時自動補全慣了，居然一下忘了element和query）。

---

Q： 如何刪除一個節點？

A： innerHTML('')。（小哥哥很義正言辭的告訴我這是一個屬性，不是一個方法。指出我確定是jQuery這種東西用多了）

這下搞的我很慌，明顯地答錯了一個很基礎的東西，這是否是我最後一個問題我都記不清了。我只記得HR告訴我：「好了就這樣，電話聯繫。」

面試後

此次面試給我潑了很大一盆涼水，但同時也知道了本身很大的不足，基礎的薄弱，面試的心態調整、事前的準備等。

我相信失敗只是成功的一部分，我還會回來的。

答案

異步與同步的區別

程序裏面全部的任務，能夠分紅兩類：同步任務（synchronous）和異步任務（asynchronous）。

同步任務是那些沒有被引擎掛起、在主線程上排隊執行的任務。只有前一個任務執行完畢，才能執行後一個任務。

異步任務是那些被引擎放在一邊，不進入主線程、而進入任務隊列的任務。只有引擎認爲某個異步任務能夠執行了（好比 Ajax 操做從服務器獲得告終果），該任務（採用回調函數的形式）纔會進入主線程執行。排在異步任務後面的代碼，不用等待異步任務結束會立刻運行，也就是說，異步任務不具備「堵塞」效應。

舉例來講，Ajax 操做能夠看成同步任務處理，也能夠看成異步任務處理，由開發者決定。若是是同步任務，主線程就等着 Ajax 操做返回結果，再往下執行；若是是異步任務，主線程在發出 Ajax 請求之後，就直接往下執行，等到 Ajax 操做有告終果，主線程再執行對應的回調函數。

實現垂直居中

蒐集資料總結了水平垂直居中各8個共16種 CSS 居中方法。點擊瀏覽

JSONP

JSONP 是服務器與客戶端跨源通訊的經常使用方法。最大特色就是簡單適用，老式瀏覽器所有支持，服務端改造很是小。

它的基本思想是，網頁經過添加一個<script>元素，向服務器請求 JSON 數據，這種作法不受同源政策限制；服務器收到請求後，將數據放在一個指定名字的回調函數裏傳回來。

首先，網頁動態插入<script>元素，由它向跨源網址發出請求。

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};
複製代碼

上面代碼經過動態添加<script>元素，向服務器example.com發出請求。注意，該請求的查詢字符串有一個callback參數，用來指定回調函數的名字，這對於 JSONP 是必需的。

服務器收到這個請求之後，會將數據放在回調函數的參數位置返回。

foo({
  "ip": "8.8.8.8"
});
複製代碼

因爲<script>元素請求的腳本，直接做爲代碼運行。這時，只要瀏覽器定義了foo函數，該函數就會當即調用。做爲參數的 JSON 數據被視爲 JavaScript 對象，而不是字符串，所以避免了使用JSON.parse的步驟。

Cookie, sessionStorge, localStorage

Cookie

Cookie 是服務器保存在瀏覽器的一小段文本信息，每一個 Cookie 的大小通常不能超過4KB。瀏覽器每次向服務器發出請求，就會自動附上這段信息。

Cookie 主要用來分辨兩個請求是否來自同一個瀏覽器，以及用來保存一些狀態信息。它的經常使用場合有如下一些。

• 對話（session）管理：保存登陸、購物車等須要記錄的信息。
• 個性化：保存用戶的偏好，好比網頁的字體大小、背景色等等。
• 追蹤：記錄和分析用戶行爲。

sessionStorage, localStorage

Storage 接口用於腳本在瀏覽器保存數據。兩個對象部署了這個接口：window.sessionStorage和window.localStorage。

sessionStorage保存的數據用於瀏覽器的一次會話（session），當會話結束（一般是窗口關閉），數據被清空；localStorage保存的數據長期存在，下一次訪問該網站的時候，網頁能夠直接讀取之前保存的數據。除了保存期限的長短不一樣，這兩個對象的其餘方面都一致。

保存的數據都以「鍵值對」的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。全部的數據都是以文本格式保存。

cookie 與 storage 比較

同：

• 保存數據
• 受同域限制

異：

• coolkie 最多 4k
• storage 最多幾M（目前，每一個域名的存儲上限視瀏覽器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，IE 是 10MB）

箭頭函數

箭頭函數有幾個使用注意點。

（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

（2）不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。

（3）不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。

（4）不可使用yield命令，所以箭頭函數不能用做 Generator 函數。

---

但願幫助到了你。

歡迎討論。

٩(๑❛ᴗ❛๑)۶