1.spa（single page web application） --- 單頁(yè)面應(yīng)用程序

? ? ? ? ? ? 只有一張Web頁(yè)面的應(yīng)用，

? ? ? ? ? ? 是加載單個(gè)HTML 頁(yè)面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。

? ? ? ? ? ? 瀏覽器一開(kāi)始會(huì)加載必需的HTML、CSS和JavaScript，

? ? ? ? ? ? 所有的操作都在這張頁(yè)面上完成，都由JavaScript來(lái)控制。

? ? ? ? ? ? 目前時(shí)興的 React、Vue、Angular 等前端框架均采用了 SPA 原則。

? ? ? ? ? ? 優(yōu)點(diǎn)

? ? ? ? ? ? ? ? - 具有桌面應(yīng)用的即時(shí)性、網(wǎng)站的可移植性和可訪問(wèn)性

? ? ? ? ? ? ? ? - 用戶體驗(yàn)好、快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面

? ? ? ? ? ? ? ? - 良好的前后端分離，分工更明確

? ? ? ? ? ? 缺點(diǎn)

? ? ? ? ? ? ? ? - 不利于搜索引擎的抓取

? ? ? ? ? ? ? ? - 首次渲染速度相對(duì)較慢

? ? ? ? ? ? 實(shí)現(xiàn)web單頁(yè)面應(yīng)用

? ? ? ? ? ? ? ? hash模式

? ? ? ? ? ? ? ? history模式

2.?閉包

? ? ? ?閉包是函數(shù)的一種高級(jí)使用方式

? ? ? ?閉包本質(zhì)上利用了函數(shù)的執(zhí)行空間不消毀的特性

? ? ? ?實(shí)現(xiàn)在函數(shù)外部訪問(wèn)函數(shù)內(nèi)部的私有變量

? ? ? ? ? 可以實(shí)現(xiàn)在一個(gè)函數(shù)中使用另一個(gè)函數(shù)中的私有變量

? ? ? ? 閉包的優(yōu)點(diǎn)

? ? ? ? ? ?1. 能夠讓函數(shù)外部訪問(wèn)到函數(shù)內(nèi)部的私有變量

? ? ? ? ? ?2. 能夠保護(hù)函數(shù)的私有變量，不會(huì)污染全局=

? ? ? ? ? ?3. 可以利用閉包的特性，緩存數(shù)據(jù)，提高代碼性能

? ? ? ? 閉包的缺點(diǎn)

? ? ? ? ?因?yàn)閷?duì)數(shù)據(jù)的持續(xù)引用，導(dǎo)致函數(shù)的執(zhí)行空間不消毀，容易造成內(nèi)存泄漏

? ? ? ?

? ? ? ?解決閉包造成內(nèi)存泄漏的問(wèn)題

? ? ? ? ? ?在使用完成后，手動(dòng)給變量賦值null，這樣內(nèi)存就會(huì)釋放了

? ? ? 閉包概念 (重點(diǎn))

? ? ? ? ?例如有一個(gè) A 函數(shù)，在 A 函數(shù)內(nèi)部訪問(wèn)一個(gè) B 函數(shù)

? ? ? ? ?在 A 函數(shù)外部有變量 C 引用這個(gè) B 函數(shù)

? ? ? ? ? B 函數(shù)內(nèi)部訪問(wèn)者 A函數(shù)內(nèi)部的私有變量

? ? ? ? ? 以上三個(gè)條件缺一不可

? ? ? ?閉包應(yīng)用在哪個(gè)業(yè)務(wù)中

? ? ? ? ?在一個(gè)業(yè)務(wù)中如果需要操作緩存數(shù)據(jù)的時(shí)候，用到了閉包實(shí)現(xiàn)

? ? ? ? ? 同時(shí)

? ? ? ? ? ? ? 節(jié)流.防抖.柯里化的函數(shù) 封裝中 會(huì)使用閉包

? HTTP 的工作流程

? ? ? ? ? ? 1. 客戶端和服務(wù)器建立鏈接（http的三次握手）

? ? ? ? ? ? 2. 建立鏈接后，發(fā)送一個(gè)請(qǐng)求給服務(wù)器（請(qǐng)求request）

? ? ? ? ? ? 3. 服務(wù)器接受到請(qǐng)求以后進(jìn)行相應(yīng)的處理并給出一個(gè)回應(yīng)（響應(yīng)response）

? ? ? ? ? ? 4. 客戶端斷開(kāi)與服務(wù)器的鏈接 （http的四次揮手）

?3. ? ? ? 一次完整的HTTP事務(wù)的過(guò)程

? ? ? ? ? ? 1. 域名解析（dns）

? ? ? ? ? ? 2. 發(fā)起建立與服務(wù)器的鏈接（http的3次握手）

? ? ? ? ? ? 3. 建立TCP連接后發(fā)起http請(qǐng)求

? ? ? ? ? ? 4. 服務(wù)器端響應(yīng)http請(qǐng)求，瀏覽器得到html代碼

? ? ? ? ? ? 5. 瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源

? ? ? ? ? ? 6. 瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶

? ? ? ? ? ? 7. 斷開(kāi)與服務(wù)器的鏈接 （http的四次揮手）

? ? ? ? http 三次握手

? ? ? ? ? ? - 第一次握手：

? ? ? ? ? ? ? ? - 建立連接時(shí)，客戶端發(fā)送syn報(bào)文(包)（同步序列號(hào)）到服務(wù)器，

? ? ? ? ? ? ? ? 并進(jìn)入SYN_SEND狀態(tài)，等待服務(wù)器確認(rèn)；

? ? ? ? ? ? - 第二次握手：

? ? ? ? ? ? ? ? - 服務(wù)器收到syn報(bào)文，必須確認(rèn)客戶端的syn報(bào)文，

? ? ? ? ? ? ? ? 同時(shí)自己也發(fā)送一個(gè)SYN報(bào)文，即SYN+ACK（確認(rèn)序列），

? ? ? ? ? ? ? ? 此時(shí)服務(wù)器進(jìn)入SYN_RECV狀態(tài)；

? ? ? ? ? ? - 第三次握手：

? ? ? ? ? ? ? ? - 客戶端收到服務(wù)器的SYN+ACK報(bào)文，向服務(wù)器發(fā)送確認(rèn)報(bào)文ACK，

? ? ? ? ? ? ? ? 此包發(fā)送完畢，客戶端)和服務(wù)器進(jìn)入ESTABLISHED狀態(tài)，完成三次握手。

? ? ? ? http 四次揮手

? ? ? ? ? ? - 第一次揮手：

? ? ? ? ? ? ? ? - 客戶端發(fā)送一個(gè)`FIN`，用來(lái)關(guān)閉客戶端到服務(wù)端的數(shù)據(jù)傳送,

? ? ? ? ? ? ? ? 客戶端進(jìn)入`FIN_WAIT_1`狀態(tài)。

? ? ? ? ? ? - 第二次揮手：

? ? ? ? ? ? ? ? - 服務(wù)端收到`FIN`后，返回一個(gè)`ACK(acknowledgment)`客戶端,

? ? ? ? ? ? ? ? 服務(wù)端進(jìn)入`CLOSE_WAIT`狀態(tài)。

? ? ? ? ? ? - 第三次揮手：

? ? ? ? ? ? ? ? - 服務(wù)端發(fā)送一個(gè)`FIN`，用來(lái)關(guān)閉服務(wù)端到客戶單的數(shù)據(jù)傳送，

? ? ? ? ? ? ? ? 服務(wù)端進(jìn)入`LAST_ACK`狀態(tài)。

? ? ? ? ? ? - 第四次揮手：

? ? ? ? ? ? ? ? - 客戶端收到`FIN`后，客戶端進(jìn)入`TIME_WAIT`狀態(tài)，

? ? ? ? ? ? ? ? 接著發(fā)送一個(gè)ACK給服務(wù)端，服務(wù)端進(jìn)入`CLOSED`狀態(tài)，完成四次揮手

4.? ?Promise

? ? ? ? ? ? Promise 是ES6新增的引用類型，可以通過(guò)new來(lái)進(jìn)行實(shí)例化對(duì)象。

? ? ? ? ? ? Promise 內(nèi)部包含著異步的操作。

? ? ? ? ? ? Promise 是異步編程的一種解決方案

? ? ? ? ? ? ? ? 比傳統(tǒng)的解決方案 --- 回調(diào)函數(shù)嵌套，更合理和更強(qiáng)大。

? ? ? ? ? ? Promise是一個(gè)專門(mén)用來(lái)解決異步 回調(diào)地獄 問(wèn)題的

? ? ? ? ? ? ? ? 回調(diào)地獄 就是 回調(diào)函數(shù)層層嵌套

? ? ? ? ? ? ? ? ? ? 當(dāng)一個(gè)回調(diào)函數(shù)嵌套一個(gè)回調(diào)函數(shù)的時(shí)候

? ? ? ? ? ? ? ? ? ? 就會(huì)出現(xiàn)一個(gè)嵌套結(jié)構(gòu)

? ? ? ? ? ? ? ? ? ? 當(dāng)嵌套的多了就會(huì)出現(xiàn)回調(diào)地獄的情況

? ? ? ? ? ? ? ? 為什么需要使用 回調(diào)函數(shù)

? ? ? ? ? ? ? ? ? ? 當(dāng)我們執(zhí)行一個(gè)異步的行為的時(shí)候，

? ? ? ? ? ? ? ? ? ? 我們需要在一個(gè)異步行為執(zhí)行完畢之后做一些事情

? ? ? ? ? ? ? ? ? ? 那么，我們是沒(méi)有辦法提前預(yù)知這個(gè)異步行為是什么時(shí)候完成的

? ? ? ? ? ? ? ? ? ? 我們就只能以回調(diào)函數(shù)的形式來(lái)進(jìn)行

? ? ? ? ? ? ? ? ? ? 我們并不知道 ajax 請(qǐng)求什么時(shí)候完成，所以就要以回調(diào)函數(shù)的形式來(lái)進(jìn)行

? ? ? ? ? ? ? ? 回調(diào)地獄 會(huì)造成 代碼可讀性變差 且 不易維護(hù)

? ? ? ? ? ? Promise是采用了 鏈?zhǔn)秸Z(yǔ)法 解決 回調(diào)地獄的問(wèn)題

? ? ? ? promise 有三種狀態(tài)：

? ? ? ? ? ? - pending ? ? ? ?進(jìn)行中

? ? ? ? ? ? - fulfilled ? ? ?已成功

? ? ? ? ? ? - rejected ? ? ? 已失敗

? ? ? ? promise 意思是表示 承諾 ，表示其他手段無(wú)法改變。

? ? ? ? ? ? 一旦狀態(tài)確定，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。

? ? ? ?

? ? ? ? Promise 對(duì)象的狀態(tài)改變，只有兩種可能：

? ? ? ? ? ? 從 pending 變?yōu)?fulfilled

? ? ? ? ? ? 從 pending 變?yōu)?rejected

? ? ? ? ? ? 只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果，

? ? ? ? ? ? 這時(shí)就稱為 resolved（已定型）。

5.? AJAX（Asynchronous Javascript And XML）

? ? ? ? ? ? ajax 是 異步的JavaScript和XML

? ? ? ? ? ? 前后端 數(shù)據(jù)交互 的一種技術(shù)，用于快速創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)

? ? ? ? ? ? ajax 是異步的

? ? ? ? ? ? AJAX 通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。

? ? ? ? ? ? 這意味著可以在不重載整個(gè)頁(yè)面的情況下，對(duì)網(wǎng)頁(yè)的某些部分（局部）進(jìn)行更新。

? ? ? ? 注意：

? ? ? ? ? ? 傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必須重新加載整個(gè)頁(yè)面。

? ? ? ? ? ? 而使用ajax可以在不重新加載網(wǎng)頁(yè)的情況下實(shí)現(xiàn)網(wǎng)頁(yè)的局部更新

? ? ? ? Ajax 并不是一個(gè)新技術(shù)，而是多個(gè)技術(shù)的整合：

? ? ? ? ? ? - HTML

? ? ? ? ? ? - CSS

? ? ? ? ? ? - JavaScript

? ? ? ? ? ? - DOM

? ? ? ? ? ? - XMLHttpRequest對(duì)象 (核心)

? ? ? ? 傳統(tǒng)ajax的優(yōu)劣

? ? ? ? ? ? 優(yōu)：1. 不需要插件的支持，原生js就可以使用

? ? ? ? ? ? 優(yōu)：2. 只更新局部，而不用刷新整個(gè)頁(yè)面

? ? ? ? ? ? 優(yōu)：3. 它是異步的，無(wú)阻塞的

? ? ? ? ? ? 劣：4. 流程比較多，編寫(xiě)比較麻煩

6.http請(qǐng)求方式

? ? ? ? ? ? get 請(qǐng)求數(shù)據(jù)

? ? ? ? ? ? ? ? 從安全性方面，get請(qǐng)求相對(duì)來(lái)說(shuō)安全性低一點(diǎn)

? ? ? ? ? ? ? ? 參數(shù)以querystring的形式發(fā)送，也就是直接拼接在 請(qǐng)求路徑的后面

? ? ? ? ? ? ? ? get請(qǐng)求會(huì)被瀏覽器主動(dòng)緩存

? ? ? ? ? ? ? ? get請(qǐng)求根據(jù)不同的瀏覽器對(duì)長(zhǎng)度是有限制的

? ? ? ? ? ? post 發(fā)送數(shù)據(jù)

? ? ? ? ? ? ? ? 從安全性方面，post請(qǐng)求相對(duì)來(lái)說(shuō)要安全一些

? ? ? ? ? ? ? ? post傳輸?shù)臄?shù)據(jù)在body里面,參數(shù)以requestbody的形式發(fā)送，也就是放在請(qǐng)求體中

? ? ? ? ? ? ? ? post請(qǐng)求不會(huì)被瀏覽器主動(dòng)緩存，除非手動(dòng)設(shè)置

? ? ? ? ? ? ? ? post請(qǐng)求理論上是沒(méi)有限制的，除非服務(wù)端做了限制

? ? ? ? ? ? ? ? ? ? - 對(duì)參數(shù)類型沒(méi)有限制，理論上可以傳遞任意數(shù)據(jù)類型，只不過(guò)要和請(qǐng)求頭對(duì)應(yīng)

? ? ? ? ? ? ? ? ? ? - 傳遞的數(shù)據(jù)類型,一般是json數(shù)據(jù)類型

? ? ? ? get和post的區(qū)別總結(jié)

? ? ? ? ? ? 1. 安全性方面,post請(qǐng)求稍微要優(yōu)于get

? ? ? ? ? ? 2. 性能方面,get請(qǐng)求要比post請(qǐng)求快一點(diǎn),所以如果做數(shù)據(jù)查詢,一般都使用get請(qǐng)求

? ? ? ? ? ? 3. 傳輸內(nèi)容的大小,get請(qǐng)求有限制,不同的瀏覽器不太一樣,post理論上沒(méi)有限制

? ? ? ? ? ? 4. 傳遞的參數(shù) get放在url里面 post放在請(qǐng)求體里面

? ? ? ? ? ? 5. 傳遞的數(shù)據(jù)類型 post可以傳遞任意數(shù)據(jù)類型 ?get傳遞的是字符串類型a