# 面試考題整理

### 1. [MVC、AJAX、SPA、MPA 與 SSR](https://hulitw.medium.com/introduction-mvc-spa-and-ssr-545c941669e9)

- MVC(Model–view–controller) 是一種程式架構模式，是指將 **Model模型(資料庫的操作)、View視圖(圖形介面的設計)、Controller控制器(觸發Model以及View的事件)分離實作 的一種架構**，MVC的目的是為了實現動態的程式設計，讓與資料操作相關和視覺頁面拆分開寫就是MVC架構。

# MVC架構範例
# 模拟 Model, View, Controller
var M = {}, V = {}, C = {};

# Model 负责存放资料
M.data = "hello world";

# View 负责将资料输出给用户
V.render = (M) => { alert(M.data); }

# Controller 作为连接 M 和 V 的桥梁
C.handleOnload = () => { V.render(M); }

# 在网页读取的时候呼叫 Controller
window.onload = C.handleOnload;

- AJAX(Asynchronous JavaScript and XML) 是一種實現 **網頁不用重新整理，就能即時地透過瀏覽器去跟伺服器溝通、撈出資料的技術方法**，利用 Ajax 跟後端同步資料，並且在前端用 JavaScript 更改畫面，所以你無論做什麼操作都不會換頁，也可以保證前後端的資料是同步的。

- SPA(Single Page Application) 單頁式應用：後端輸出的都是同一個檔案，前端再根據不同Router動態渲染出不同頁面，例如：React，但因為是動態渲染，造成一開始的程式碼是原始且尚未渲染過的內容，可能造成SEO爬蟲變差。

- MPA(Multiple Page Application) 多頁式應用：sever根據不同路徑輸出不同檔案，例如：PHP。

- SSR(Server side render)：第一次的渲染先由Server side render，先將資料庫資料撈出來並展示，可以避免SEO一開始爬蟲資料是沒有內容的，後續的使用者操作還是由前端javascript去做動態渲染的。


- PWA(Progressive Web App)漸進式網站應用程式：類似APP的網站，達到應用程式的體驗，並保留網頁的優勢。

### 2. PHP特色、NodeJS 特色、同步&非同步、阻塞&非阻塞
- [php node.js 比較](https://kknews.cc/code/al3yaan.html)
- php比較年長nodejs比較年輕
- nodejs的誕生是為了==解決效能==

> **PHP** 采用==阻塞==执行的模型，==同步==。 当你执行一个命令，比如从数据库取数据，那么必须等这个指令执行完成后，才会执行下面的内容。會等。

> **Node.js** 采用==非阻塞==执行的模型，==非同步==。通常不会等的。 取而代之的是， 你需要提供一个回调函数，这个函数当指令执行完后会被调用一次。

> **在性能方面，Node.js 顯然贏了這一局。**

- [[OS] I/O Models: 同步、非同步、阻塞、非阻塞
](https://kaka-lin.github.io/2020/07/io_models/)
- 阻塞與非阻塞關注的是同一個執行緒發出請求(呼叫)時在等待結果時的狀態。
- 同步與非同步關注的是執行緒之間的通訊模式。例如:使用者執行緒與Kernel之間的通訊模式。

#### NodeJS
- 採用Google開發的V8運行代碼，使用事件驅動、非阻塞和非同步輸入輸出模型等技術來提高性能
- 特色:（面試必考題）
- 單執行緒single thread (一個人)有暗樁其實底層是Multi-thread
- 非阻塞(不会等)
- 非同步IO(讀寫)
- event loop事件循環

### 3. JS的物件導向是原型式 prototype (面試必考的)
- [你懂 JavaScript 嗎？#19 原型（Prototype）](https://cythilya.github.io/2018/10/26/prototype/)
- [你不可不知的原型鏈Prototype ](https://medium.com/%E7%8B%97%E5%A5%B4%E5%B7%A5%E7%A8%8B%E5%B8%AB/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84%E5%8E%9F%E5%9E%8B%E9%8F%88-prototype-b2473b301a11)
- [javascript-prototype-chain 面試必考題](https://azole.medium.com/javascript-prototype-chain-ee5a90f6fa5e)
- 建構式(函式) 是一個特殊的函式，通常用new來建構，名稱會跟 class 的名字 一樣，可以傳入一些參數，做一些初始化。舉例：new Date()
- JS 的物件導向是==原型式 prototype==
- 物件導向==是定義一個 class > 透過 new 做出他的 instance==
- 吐司模子＋配方 ==> class
- 被做出來的吐司 ==> instance
- 同一個模子做出來的但可以改變裡面的new屬性(口味)每一個都是獨立的

### 4. cookie, localstorage, sessionStorage, token
- [Cookie、LocalStorage、SessionStorage 三種差異](https://jscinin.medium.com/javascript-cookie-localstorage-sessionstorage-%E4%B8%89%E7%A8%AE%E5%B7%AE%E7%95%B0-fe7f38260439)
- **cookie 存在 client端**
- **session 存在 sever端**
- session id 存在 cookie 上
- 根據 cookie 上的 session id 查找session
- seesion 不等於 sessionStorage
- **localstorage & sessionStorage** 存在於client端的瀏覽器保存，**不參與通信**。
- localstorage & sessionStorage 由於 value 只能存入 String ，無法儲存其他類型的數據，Ex: Array、Object...，**所以可以使用 JSON 的方法來轉換**，好方便存取。
- **cookie** 由瀏覽器生成，存在於client端的瀏覽器，**默認瀏覽器關閉後失效**，每個HTTP 請求都會帶著Cookie 的信息，但跨源預設不帶有cookie。
### [localStorage、sessionStorage 介紹文章](https://ithelp.ithome.com.tw/articles/10203525)

#### 1. localStorage
**localstorage 除非被清除，否則在瀏覽器永久儲存**。
是由html5所提供的一個web storage，擁有5MB的大小，可供程式設計者使用，當然它是無法跨域使用，因為他與cookie一樣是認domain name。

# 建立
localStorage.setItem('userName', name);

# 取得
localStorage.getItem('userName');

# 移除
localStorage.removeItem('userName');

# 一次清除
localStorage.clear(); 

#### 2. sessionStorage
**sessionStorage 僅在當前畫面中儲存，關閉頁面或瀏覽器中就會清除**。
相似於 localStorage ，不同之處在於 sessionStorage 在瀏覽器關掉後就自動清除。

# 建立
sessionStorage.setItem("key", value);

# 取得
sessionStorage.getItem('key');

# 移除
sessionStorage.removeItem("key"); 

#### 3. [要來塊餅乾嗎? Cookie & Session](https://ithelp.ithome.com.tw/articles/10203123)

- cookie不見得話就沒辦法計入登入狀態？
- 紀錄登入登出狀態方法：
- 使用 session
- 使用 token：產生一個 token => reponse 回給前端，需要自己儲存這個 token --> localstorage, session storage，每一次前端發送需要身份驗正的 request 時，都必須自己帶著這個 token，因為 cookie "預設"是無法跨網域讀取的，如果只存在 client 端，那登出會不好做

- [傻傻分不清之Cookie、Session、Token、JWT](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/712796/)
### 5. 靜態網站、動態網站的流程解釋
- [六日： Client-Server 概覽( POST req/res 範例 , 解析動態 req )](https://ithelp.ithome.com.tw/m/articles/10218580)
- 靜態網站
- 動態網站

### 6. same-origin policy 是什麼？
要先用 cors 允許跨源存取、再用 withCredentials 允許他在跨源存取的時候帶著 cookie

### 7. 解釋事件冒泡
- [[第七週] DOM - 事件傳遞機制：捕獲與冒泡、事件代理
](https://yakimhsu.com/project/project_w7_eventListener.html)
- [重新認識 JavaScript: Day 14 事件機制的原理
](https://ithelp.ithome.com.tw/articles/10191970)
- true => 捕獲 ; false => 冒泡
- 中間 btn 會「 先冒泡再捕獲 」是因為冒泡的綁定寫在更前面。
- 阻止事件傳遞 e.stopPropagation()

### 8. 閉包是什麼？
閉包是個捕捉了外部函式變數（或使之繼續存活）的函式，它包含了一個函式，以及函式被建立時所在的環境
- [你懂 JavaScript 嗎？#15 閉包（Closure）
](https://cythilya.github.io/2018/10/22/closure/)

### 9. Hoisting 提升
JavaScript 引擎幫你把變數宣告跟函式宣告都自動「移動」到最上面

- [我知道你懂 hoisting，可是你了解到多深？](https://blog.techbridge.cc/2018/11/10/javascript-hoisting/)
- 變數宣告跟函式宣告都會提升
- 只有**宣告**會提升，**賦值**不會提升
- 如果有傳入參數也要把宣告拆解提升
- **函式宣告也會提升而且優先權比較高**

# 只有變數的宣告會提升，賦值不會
console.log(a) // undefined
var a = 5

# 上面的程式碼你可以「想像」成這樣：
var a
console.log(a) // undefined
a = 5

# 結果a會是一個function
console.log(a); // [Function: a]
var a;
function a() {}

# function 的優先權比較高，可以想像成這樣
function a() {} //提升
var a; //提升
console.log(a); //[Function: a]

### 10. [[面試] 前端工程師一定要會的 JS 觀念題-中英對照之上篇](https://medium.com/starbugs/%E9%9D%A2%E8%A9%A6-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E4%B8%80%E5%AE%9A%E8%A6%81%E6%9C%83%E7%9A%84-js-%E8%A7%80%E5%BF%B5%E9%A1%8C-%E4%B8%AD%E8%8B%B1%E5%B0%8D%E7%85%A7%E4%B9%8B%E4%B8%8A%E7%AF%87-3b0a3feda14f)

### 11. 解釋eventloop
延遲會跑到webapis並執行cb=>執行環境瀏覽器nodejs
執行完丟到task queue
當stack是空的event loop工人會把task queue裡的工作搬到stack
io存取硬碟網路連線讀寫檔案資料庫連線丟給webapis去做
非同步不知道誰先回來