前端面試題

HTTP協(xié)議

(1).常見(jiàn)的請(qǐng)求方法

HTTP 1.0

  • 1.GET：從指定的資源請(qǐng)求數(shù)據(jù)
  • 2.POST：向指定的資源提交要被處理的數(shù)據(jù)，例如
    • 1.提交表單
    • 2.將消息發(fā)布到公告板，新聞組，郵件列表，博客或類似的文章組；
  • 3.HEAD
    • 1.類似于get請(qǐng)求，只不過(guò)返回的響應(yīng)中沒(méi)有具體的內(nèi)容，只有頭部
    • 2.只請(qǐng)求資源的首部
    • 3.檢查超鏈接的有效性
    • 4.檢查網(wǎng)頁(yè)是否被修改

HTTP1.1

  • 1.PUT：替換或創(chuàng)建指定資源
  • 2.DELETE：對(duì)指定資源進(jìn)行刪除

HTTP2.0

  • 1.OPTIONS： 用于獲取目的資源所支持的通信選項(xiàng)，比如說(shuō)服務(wù)器支持的請(qǐng)求方式等等。

  • 2.TRACE：實(shí)現(xiàn)沿通向目標(biāo)資源的路徑的消息環(huán)回（loop-back）測(cè)試 ，提供了一種實(shí)用的 debug 機(jī)制。

  • 3.CONNECT

    • 1.為代理服務(wù)器準(zhǔn)備的

    • 2.在 HTTP 協(xié)議中，CONNECT 方法可以開(kāi)啟一個(gè)客戶端與所請(qǐng)求資源之間的雙向溝通的通道。它可以用來(lái)創(chuàng)建隧道（tunnel）。例如，CONNECT 可以用來(lái)訪問(wèn)采用了 SSL (HTTPS) 協(xié)議的站點(diǎn)?？蛻舳艘蟠矸?wù)器將 TCP 連接作為通往目的主機(jī)隧道。之后該服務(wù)器會(huì)代替客戶端與目的主機(jī)建立連接。連接建立好之后，代理服務(wù)器會(huì)面向客戶端發(fā)送或接收 TCP 消息流。

所有通用服務(wù)器必須支持GET和HEAD方法。所有其他方法都是可選的。

  • 1.安全性：在此規(guī)范定義的請(qǐng)求方法中，GET，HEAD，OPTIONS和TRACE方法被定義為安全的
  • 2.冪等性：PUT，DELETE和安全Method是冪等的。
  • 3.可緩存性：GET, HEAD, and POST。但大多數(shù)是只實(shí)現(xiàn)GET和HEAD可緩存
    • 1.表示瀏覽器是會(huì)自動(dòng)緩存的，以應(yīng)用于后續(xù)請(qǐng)求。除非response中有相關(guān)策略

(2).GET 和 POST 的區(qū)別

  • 1.get參數(shù)通過(guò)url傳遞，post放在request body中。

  • 2.get請(qǐng)求在url中傳遞的參數(shù)是有長(zhǎng)度限制的，而post沒(méi)有。

  • 3.get比post更不安全，因?yàn)閰?shù)直接暴露在url中，所以不能用來(lái)傳遞敏感信息。

  • 4.get請(qǐng)求只能進(jìn)行url編碼，而post支持多種編碼方式

  • 5.get請(qǐng)求會(huì)瀏覽器主動(dòng)cache，而post支持多種編碼方式。

  • 6.get請(qǐng)求參數(shù)會(huì)被完整保留在瀏覽歷史記錄里，而post中的參數(shù)不會(huì)被保留。

  • 7.GET和POST本質(zhì)上就是TCP鏈接，并無(wú)差別。但是由于HTTP的規(guī)定和瀏覽器/服務(wù)器的限制，導(dǎo)致他們?cè)趹?yīng)用過(guò)程中體現(xiàn)出一些不同。

(3).HTTP 狀態(tài)碼

  • 1xx (Informational): 收到請(qǐng)求，正在處理
  • 2xx (Successful): 該請(qǐng)求已成功收到，理解并接受
  • 3xx (Redirection): 重定向
  • 4xx (Client Error): 該請(qǐng)求包含錯(cuò)誤的語(yǔ)法或不能為完成
  • 5xx (Server Error): 服務(wù)器錯(cuò)誤

(4).301 和 302 有什么具體區(qū)別

  • 301：永久移動(dòng)，請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新的位置，服務(wù)器返回此響應(yīng)，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到新位置

  • 302：歷史移動(dòng)，服務(wù)器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)繼續(xù)以后的請(qǐng)求。

MVVM和MVC
  • MVC: MVC是應(yīng)用最廣泛的軟件架構(gòu)之一,一般MVC分為:Model(模型),View(視圖),Controller(控制器)。 這主要是基于分層的目的,讓彼此的職責(zé)分開(kāi).View一般用過(guò)Controller來(lái)和Model進(jìn)行聯(lián)系。Controller是Model和View的協(xié)調(diào)者,View和Model不直接聯(lián)系?；径际菃蜗蚵?lián)系。

1.View傳送指令到Controller。

2.Controller完成業(yè)務(wù)邏輯后改變Model狀態(tài)。

3.Model將新的數(shù)據(jù)發(fā)送至View,用戶得到反饋。

  • MVVM: MVVM是把MVC中的Controller改變成了ViewModel。

    View的變化會(huì)自動(dòng)更新到ViewModel,ViewModel的變化也會(huì)自動(dòng)同步到View上顯示,通過(guò)數(shù)據(jù)來(lái)顯示視圖層。

2.MVVM模式的優(yōu)點(diǎn)以及與MVC模式的區(qū)別

  • MVVM模式的優(yōu)點(diǎn):

    • 低耦合:View可以獨(dú)立于Model變化和修改,一個(gè)ViewModel可以綁定到不同的View上,當(dāng)View變化的時(shí)候Model可以不變,當(dāng)Model變化的時(shí)候View也可以不變。
    • 可重用性: 可以把一些視圖邏輯放在一個(gè)ViewModel里面,讓很多View重用這段視圖邏輯。
    • 獨(dú)立開(kāi)發(fā): 開(kāi)發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā),設(shè)計(jì)人員可以專注于頁(yè)面的設(shè)計(jì)。

  • MVVM和MVC的區(qū)別:

    • MVC中Controller演變成MVVM中的ViewModel
    • MVVM通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作
    • MVVM主要解決了MVC中大量的dom操作使頁(yè)面渲染性能降低,加載速度變慢,影響用戶體驗(yàn)
ajax

(1).實(shí)現(xiàn)一個(gè)Ajax


var xhr = new XMLHttpRequest()
// 必須在調(diào)用 open()之前指定 onreadystatechange 事件處理程序才能確?？鐬g覽器兼容性
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status ==== 304) {
      console.log(xhr.responseText)
    } else {
      console.log('Error:' + xhr.status)
    }
  }
}
// 第三個(gè)參數(shù)表示異步發(fā)送請(qǐng)求
xhr.open('get', '/api/getSth',  true)
// 參數(shù)為作為請(qǐng)求主體發(fā)送的數(shù)據(jù)
xhr.send(null)

(2).Ajax狀態(tài)

0--未初始化。尚未調(diào)用 open()方法。
1--啟動(dòng)。已經(jīng)調(diào)用 open()方法，但尚未調(diào)用 send()方法。
2--發(fā)送。已經(jīng)調(diào)用 send()方法，但尚未接收到響應(yīng)。
3--接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。
4--完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。

(3).將原生的 ajax 封裝成 promise

const ajax = (url, method, async, data) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = () => {
      // 已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else if (xhr.status > 400) {
          reject('發(fā)生錯(cuò)誤')
        }
      }
    }
    xhr.open(url, method, async)
    xhr.send(data || null)
  })
}

有補(bǔ)充或者有更通俗易懂的小伙伴可以私信或者加QQ群：163958730（已滿） 145454260 一起討論~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容