背景

我是一名二本師範院校的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 函式。

---

希望幫助到了你。

歡迎討論。

٩(๑❛ᴗ❛๑)۶