前端 知識筆記
SPA：
單頁Web應用（single page web application，SPA）： SPA 是一種特殊的 Web 應用，是載入單個 HTML 頁面並在使用者與應用程式互動時動態更新該頁面的。它將所有的活動侷限於一個 Web 頁面中，僅在該 Web 頁面初始化時載入相應的 HTML 、 JavaScript 、 CSS 。一旦頁面載入完成， SPA 不會因為使用者的操作而進行頁面的重新載入或跳轉，而是利用 JavaScript 動態的變換 HTML（採用的是 div 切換顯示和隱藏），從而實現UI與使用者的互動。在 SPA 應用中，應用載入之後就不會再有整頁重新整理。相反，展示邏輯預先載入，並有賴於內容Region（區域）中的檢視切換來展示內容。
MVC和MVVM：
使用者對View的操作交給了Controller處理，在Controller中響應View的事件呼叫Model的介面對資料進行操作，一旦Model發生變化便通知相關檢視進行更新。
MVVM 實現了View和Model的自動同步，也就是當Model的屬性改變時，我們不用再自己手動操作Dom元素，來改變View的顯示，而是改變屬性後該屬性對應View層顯示會自動改變。
MVVM比MVC精簡很多，不僅簡化了業務與介面的依賴，還解決了資料頻繁更新的問題，不用再用選擇器操作DOM元素。因為在MVVM中，View不知道Model的存在，Model和ViewModel也觀察不到View，這種低耦合模式提高程式碼的可重用性
js 淺拷貝、深拷貝：
簡單點來說，就是假設B複製了A，當修改A時，看B是否會發生變化，如果B也跟著變了，說明這是淺拷貝；如果B沒變，那就是深拷貝。
深拷貝：JSON.parse(JSON.stringify(obj));lodash函式庫 _.cloneDeep();
https://www.jianshu.com/p/1c142ec2ca45
css垂直居中的集中方式:
<divclass="box">
<div>垂直居中</div>
</div>
.box{
display:flex;
justify-content:center;
align-items:Center;
}
Localstorage、sessionstorage、cookie：
cookie和session都是用來跟蹤瀏覽器使用者身份的會話方式，cookie儲存在瀏覽器端，session儲存在伺服器端。
儲存內容：cookie只能儲存字串型別，以文字的方式；session通過類似與Hashtable的資料結構來儲存，能支援任何型別的物件(session中可含有多個物件)
儲存的大小：cookie：單個cookie儲存的資料不能超過4kb；session大小沒有限制
安全性：cookie：針對cookie所存在的攻擊：Cookie欺騙，Cookie截獲；session的安全性大於cookie
WebStorage兩個主要目標：（1）提供一種在cookie之外儲存會話資料的路徑。（2）提供一種儲存大量可以跨會話存在的資料的機制
localStorage的生命週期是永久的；sessionStorage是在同源的視窗中始終存在的資料。
https://www.cnblogs.com/pengc/p/8714475.html
一個完整的http請求過程：
1、域名解析：瀏覽器或客戶端發起請求後，根據地址判斷是否為本機地址，然後在本機設定的 host 中尋找，如果沒找到則去 DNS 伺服器查詢域名對應 IP 地址。
2、建立 TCP 連結：根據 IP 地址定址，然後訪問指定埠；有客戶端向伺服器傳送 TCP 連線請求，經過交換機->路由器；然後進行三次握手四次揮手保證連線可靠性
3、傳送請求：客戶端傳送 http 請求；伺服器接受請求並處理；客戶端根據伺服器端的 response 渲染介面或進行邏輯處理。
原生 ajax 請求過程：
1、建立 ajax 非同步物件
2、設定回撥函式
3、使用 open 方法與伺服器建立連線
4、向伺服器傳送資料
5、再回調函式中進行相應處理
陣列去重：
set 物件：是值得集合，元素只會出現一次。Array.from(new Set(arr))
indexof()：返回 -1 說明不存在於陣列，則插入
includes()：返回 false，則插入
跨域：
出於瀏覽器的同源策略限制，其是一種約定，它是瀏覽器最核心也是基本的安全功能；同源策略會阻止一個域的 js 指令碼和另外一個域的內容進行互動。
當一個請求 url 的協議、域名、埠三者之間任何一個與當前介面 url 不同即為跨域。
解決辦法：
jsonp，簡單適用，相容性好。缺點只支援 get 請求，不支援 post 。
https://blog.csdn.net/qq_38128179/article/details/84956552
CORS？
常用的 es6 功能？