web前端常見面試題實(shí)例分析

這篇文章主要介紹“web前端常見面試題實(shí)例分析”，在日常操作中，相信很多人在web前端常見面試題實(shí)例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web前端常見面試題實(shí)例分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成武網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,成武網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為成武上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個(gè)售后服務(wù)好的成武做網(wǎng)站的公司定做！

web前端常見面試題實(shí)例分析

js部分

1、談一談你對原型鏈的理解

在js語言中，每個(gè)實(shí)例對象都有一個(gè)__proto__屬性，改屬性指向他的原型對象，且這個(gè)實(shí)例對象的構(gòu)造函數(shù)都有一個(gè)原型屬性prototype,與實(shí)例對象的__proto__屬性指向同一個(gè)對象，當(dāng)這個(gè)對象在查找一個(gè)屬性的值時(shí)，自身沒有就會根據(jù)__proto__向他的原型上尋找，如果不存在，則會到生成這個(gè)實(shí)例對象的構(gòu)造函數(shù)的原型對象上尋找，如果還是不存在，就繼續(xù)道Object的原型對象上找，在往上找就為null了，這個(gè)鏈?zhǔn)綄ふ业倪^程，就被稱為原型鏈。

2、原型、構(gòu)造函數(shù)、實(shí)例對象三者的關(guān)系

首先從構(gòu)造函數(shù)說起，構(gòu)造函數(shù)通過prototype指向他的原型對象，原型對象通過他的constructor屬性指回這個(gè)構(gòu)造函數(shù)，表明原型對象是由哪個(gè)構(gòu)造函數(shù)生成的。原型對象通過new關(guān)鍵字生成的實(shí)例對象，這個(gè)實(shí)例對象可以通過__proto__屬性指向生成這個(gè)實(shí)例對象的構(gòu)造函數(shù)的原型對象，實(shí)現(xiàn)一個(gè)三角關(guān)系。

web前端常見面試題實(shí)例分析

3、實(shí)現(xiàn)繼承的方式

繼承的方式有很多種，網(wǎng)上的答案都有很多，我自己總結(jié)且大致說的明白的有這五種

1）原型鏈繼承

借助原型可以基于已有的對象創(chuàng)建對象，同時(shí)還不必因此創(chuàng)建自定義類型。 在 object()函數(shù)內(nèi)部，先創(chuàng)建一個(gè)臨時(shí)的構(gòu)造函數(shù)，然后將傳入的對象作為這個(gè)構(gòu)造 函數(shù)的原型，最后返回了這個(gè)臨時(shí)類型的一個(gè)新實(shí)例。關(guān)鍵代碼：Star.proyotype = new Person(), Star.proyotype.constructor = Star缺點(diǎn)：只能繼承父類的方法

2）借用構(gòu)造函數(shù)繼承

在子類構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)?？梢酝ㄟ^使用 apply()和 call()方 法在新創(chuàng)建的對象上執(zhí)行構(gòu)造函數(shù)。關(guān)鍵代碼：Person.call(this,age,name)缺點(diǎn)：無法復(fù)用，只能繼承父類的屬性

3）組合繼承

也叫偽經(jīng)典繼承。指的是將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一 起，從而發(fā)揮二者之長。使用原型鏈實(shí)現(xiàn)對原型屬性屬性和方法的繼承，通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)實(shí)例 屬性的繼承。 既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又能保證每一個(gè)實(shí)例都有它自己的屬性。但是會有一個(gè)小bug，里面的age，name，有兩份，有一份的值為undefined，因?yàn)槔锩娴?code>apply()和call()方法會自動(dòng)多調(diào)用一次。

4）寄生組合繼承

通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法。 本質(zhì)上，就是使用寄生式繼承來繼承超類型的原型，然后再將結(jié)果指定給子類型的原型。是公認(rèn)繼承比較全面的一種方法，要寫全的話還是非常多的，我只會一個(gè)簡單的?，關(guān)鍵代碼：Star.prototype = Object.create(Person.prototype)

5）ES6的Class類繼承方式

可利用class關(guān)鍵字配合extends關(guān)鍵字來實(shí)現(xiàn)繼承。ES6中引入了class關(guān)鍵字來聲明類，而class（類）可通過extends來繼承父類中屬性和方法，super指向父類的原型對象，可以調(diào)用父類的屬性和方法，且子類constructor方法中必須有super關(guān)鍵字，且必須出現(xiàn)在this之前。

4、js數(shù)據(jù)類型

數(shù)據(jù)類型從大的方向來說分為兩種

  • 基本數(shù)據(jù)類型：字符串(String)，數(shù)字(Number)，布爾(Boolean)，空(Null)，未定義(Undefined)，Symbol(nbs)

  • 復(fù)雜數(shù)據(jù)類型：對象(Object)，數(shù)組(Array)，函數(shù)(Function)
    Symbol表示獨(dú)一無二的值，避免屬性名的沖突

5、檢測數(shù)據(jù)類型

  • typeof 檢測 存在的問題:null 或者數(shù)組打印出來也是 object

  • instanceof (只能檢測復(fù)雜數(shù)據(jù)類型)
    返回值是 true 或者 false 相關(guān)的構(gòu)造函數(shù)只要在原型鏈上,就是 true,否則就是 false 可以用于檢測是不是數(shù)組

  • Object.prototype.toString.call(要檢測的數(shù)據(jù)值)
    為什么要借 Object.prototype.toString,因?yàn)樽约旱?toString 被自己原型重寫了,得不到類似[object Object]

6、如何檢測一個(gè)數(shù)據(jù)是數(shù)組

var arr = [2, 3, 4]
console.log(arr instanceof Array)
console.log(Array.isArray(arr))
console.log(Object.prototype.toString.call(arr))

7、深拷貝和淺拷貝

  • 淺拷貝：只是拷貝一層，更深層次對象級別的只拷貝了地址

  • 深拷貝：層層拷貝，每一級別的數(shù)據(jù)都會拷貝

  • 淺拷貝方法：
    1. 使用 lodash 淺拷貝 clone 方法，讓他們倆指向不同地址
    2. 使用 Object.assign 方法
    3. 使用es6語法的 ... 拓展運(yùn)算符

  • 深拷貝方法：
    1. 使用JSON.parse(JSON.stringify(obj)) ，缺點(diǎn)：當(dāng)對象有方法和undefined屬性的時(shí)候會丟失
    2. 使用遞歸

    • 如果存在循環(huán)引用就會出現(xiàn)堆棧溢出

    • 解決思路：把處理好的對象存起來，在處理新的對象的時(shí)候，會現(xiàn)在這個(gè)存的地方找一找有沒有處理好，如果有就直接返回就行了

let obj = {
        name: "zs",
        age: 20,
        father: [2, 3, 4],
      };

      function deepClone(target) {
        //這一行如果不用三元判斷 如果是數(shù)組會有bug會被拷貝成偽數(shù)組對象
        let tempObj = Array.isArray(target) ? [] : {};
        for (let key in target) {
          if (typeof target[key] === "object") {
            tempObj[key] = deepClone(target[key]);
          } else {
            tempObj[key] = target[key];
          }
        }
        return tempObj;
      }

      let obj1 = deepClone(obj);
      console.log(obj1);

8、slice和splice的區(qū)別

  • 兩者都是數(shù)組刪除的方法

1.splice改變原數(shù)組，slice不改變原數(shù)組。
2.slice會返回一個(gè)新的數(shù)組，可以用于截取數(shù)組
3.splice除了可以刪除之外，還可以替換，添加數(shù)組
4.splice可傳入3個(gè)參數(shù)，slice接受2個(gè)參數(shù)

9、substr和substring的區(qū)別

  • 兩者的作用都是截取字符串的

  • substr是從起始索引號開始提取指定長度的字符串

  • substring是提取字符串中兩個(gè)指定索引號之間的字符

10、let const  var區(qū)別

let和const都是用來聲明變量的，在ES5中我們可以使用var來進(jìn)行變量聲明 -使用let和const作用
- 防止for循環(huán)中變量提升的經(jīng)典場景
- 不污染全局變量

var關(guān)鍵字聲明變量

1.var關(guān)鍵字聲明變量存在，變量提升的問題；
2.var聲明的變量不存在塊級作用域，如果是全局變量在任何地方都可以調(diào)用；
3.var聲明變量如果名稱重復(fù)了，后面聲明的會將前面聲明的覆蓋掉；

let關(guān)鍵子聲明變量

1.不存在變量提升，let聲明變量不存在變量提升的問題：如果在let聲明變量前調(diào)用該變量就會報(bào)錯(cuò)（提示初始化前無法訪問該變量）；
2.塊級作用域，let聲明變量存在塊級作用域（全局、函數(shù)、eval嚴(yán)格模式），只在當(dāng)前的代碼塊中生效，如果在當(dāng)前代碼塊以外調(diào)用就會報(bào)錯(cuò)（當(dāng)前的變量沒有定義）；
3.不影響作用域鏈的操作
4.不允許變量重復(fù)聲明，let聲明的變量是不允許重復(fù)聲明的，如果同一個(gè)名稱被重復(fù)聲明了就會報(bào)錯(cuò)（當(dāng)前的標(biāo)識已經(jīng)被聲明了）；

const聲明變量

1.const聲明的變量也具有：不存在變量提升、塊級作用域、不允許重復(fù)聲明的特點(diǎn)；
2.const聲明的變量都是常量（不允許改變的量），一旦聲明就不允許被修改，如果修改就會報(bào)錯(cuò)--常數(shù)變量賦值
3.一般第三方的框架中會大量使用const聲明變量，這樣可以避免用戶修改框架中的變量；
4.const實(shí)際上保證的，并不是變量的值不得改動(dòng)，而是變量指向的那個(gè)內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)。對于簡單類型的數(shù)據(jù)（數(shù)值、字符串、布爾值），值就保存在變量指向的那個(gè)內(nèi)存地址，因此等同于常量。

11、new的過程

  • 創(chuàng)建一個(gè)新的空對象。（即實(shí)例對象）

  • 讓this指向這個(gè)新對象

  • 執(zhí)行構(gòu)造函數(shù)里面的代碼，給這個(gè)新對象添加屬性和方法

  • 返回這個(gè)新對象obj。（定義的構(gòu)造函數(shù)中不寫返回值。）

12、防抖節(jié)流

防抖

  • 防抖是指在事件觸發(fā)n秒后再執(zhí)行，如果在n秒內(nèi)再次被觸發(fā)，則重新計(jì)算時(shí)間。（就是在觸發(fā)某個(gè)事件后，在下一次觸發(fā)之前，中間的間隔時(shí)間如果超過設(shè)置的時(shí)間才會發(fā)送請求，一直觸發(fā)就不會發(fā)送請求 應(yīng)用場景：
    a、scroll事件滾動(dòng)觸發(fā)，
    b、搜索框輸入查詢
    c、表單驗(yàn)證
    d、按鈕提交事件
    e、瀏覽器窗口縮放，resize事件

function debounce(func, delay) {
        let timer = null // 計(jì)時(shí)器
        return function (...args) {
          clearTimeout(timer) // 清除上一次計(jì)時(shí)器
          timer = setTimeout(() => {
            // 重新定時(shí)
            func.apply(this, args)
          }, delay)
        }
      }

節(jié)流

  • 節(jié)流是指如果持續(xù)觸發(fā)某個(gè)事件，則每隔n秒執(zhí)行一次。

function throtte(func, time) {
        let timer = null // 計(jì)時(shí)器
        return function (...args) {
          if (timer) return // 無視，直接返回
          timer = setTimeout(() => {
            func.apply(this, args)
          }, time)
        }
      }

13、promise的3種狀態(tài)

這點(diǎn)簡單介紹概念，用法后面在詳細(xì)介紹

1） . 初始態(tài)pending

- pending。它的意思是 "待定的，將發(fā)生的"，相當(dāng)于是一個(gè)初始狀態(tài)。創(chuàng)建[Promise]對象時(shí)，且沒有調(diào)用resolve或者是reject方法，相當(dāng)于是初始狀態(tài)。這個(gè)初始狀態(tài)會隨著你調(diào)用resolve，或者是reject函數(shù)而切換到另一種狀態(tài)。

2 ）. 成功態(tài)resolved--也叫fulfilled

- resolved。表示解決了，就是說這個(gè)承諾實(shí)現(xiàn)了。 要實(shí)現(xiàn)從pending到resolved的轉(zhuǎn)變，需要在 創(chuàng)建Promise對象時(shí)，在函數(shù)體中調(diào)用了resolve方法(即第一個(gè)參數(shù))。

3） . 失敗態(tài)rejected

- rejected。拒絕，失敗。表示這個(gè)承諾沒有做到，失敗了。要實(shí)現(xiàn)從pending到rejected的轉(zhuǎn)換，只需要在創(chuàng)建Promise對象時(shí)，調(diào)用reject函數(shù)。

14、冒泡排序

// 上口訣 雙層for循環(huán) 外層長度-1 內(nèi)層長度-1-i
      let arr = [4, 3, 1, 7, 8, 10]
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
          }
        }
      }
      console.log(arr)

Vue部分

1、MVVM

MVVM是三個(gè)單詞的縮寫，model(數(shù)據(jù)，一般來自ajax或本地存儲)+view(視圖template)+viewmodel(vue實(shí)例)

  • model數(shù)據(jù)變了，視圖會跟著改變，如果用的是v-model，數(shù)據(jù)也會跟著改變，viewmodel在中間起一個(gè)橋梁作用

  • model 和 view 就像現(xiàn)實(shí)中房東和租客一樣，他們是不認(rèn)識的，通過中介 viewmodel
    好處：

    • 由于 model 和 view 是沒有關(guān)系的，是通過 viewmodel 結(jié)合在一起的，所以維護(hù)起來很方便，因?yàn)?model 邏輯代買改了，view 不用改

    • 因?yàn)閿?shù)據(jù)變了。視圖也會跟著變，所以在 vue 中不用操作dom來改變視圖

    • 數(shù)據(jù)驅(qū)動(dòng)

    • 解耦(降低了耦合性)

2、vue生命周期

  • vue中的生命周期是指組件從創(chuàng)建到銷毀的過程,主要分為4個(gè)周期8個(gè)鉤子函數(shù)

1.分別是創(chuàng)建階段的beforeCreate，created，一般在beforeCreate寫loading加載效果，使用戶體驗(yàn)更好，一般在created中發(fā)送ajax請求獲取數(shù)據(jù)

2.然后是掛載階段的beforeMount，mounted，一般會在mounted中操作DOM元素

3.更新階段的是beforeUpdate ，updated，當(dāng)數(shù)據(jù)更新時(shí)需要做統(tǒng)一的業(yè)務(wù)處理時(shí)，拿到最新的dom，可以使用updated 這個(gè)鉤子函數(shù)

4.最后是銷毀階段的beforeDestroy，destroyed，可以在beforeDestroy做一些清理的工作，比如說定時(shí)器 和解綁一些addEventListener監(jiān)聽的事件

  • 補(bǔ)充：（還有keep-alive的兩個(gè)鉤子函數(shù)，使用場景是當(dāng)組件切換時(shí)會進(jìn)行銷毀，因此組件中的初始化的4個(gè)鉤子函數(shù)會多次執(zhí)行，比較浪費(fèi)資源,此時(shí)可以使用keep-alive紀(jì)行組件的緩存,可以讓組件切換時(shí)不被銷毀,keep-alive有兩個(gè)獨(dú)有的鉤子函數(shù),分別是activated和deactivated,是組件激活和失活時(shí)會執(zhí)行的兩個(gè)鉤子函數(shù)）

3、單向數(shù)據(jù)流

單向數(shù)據(jù)流是指父組件向子組件傳遞數(shù)據(jù)，子組件通過props接收，當(dāng)父組件中的值改變了，子組件中對應(yīng)的數(shù)據(jù)也會改變，因?yàn)閜rops是只讀的，所以無法直接在子組件中對父組件傳遞過來的值進(jìn)行修改，但是如果這個(gè)數(shù)據(jù)是一個(gè)引用數(shù)據(jù)類型，是可以直接在子組件中修改數(shù)據(jù)中的某個(gè)屬性的，只要不改變這個(gè)數(shù)據(jù)的內(nèi)存地址就可以

4、雙向數(shù)據(jù)綁定

  • 數(shù)據(jù) -> 視圖

  • 視圖 -> 數(shù)據(jù)

vue中普通指令都可以實(shí)現(xiàn)數(shù)據(jù)變了，視圖會跟著變，但是有一個(gè)特殊的指令叫v-model，它一般用于表單控件，它可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定，所謂的雙向數(shù)據(jù)就是數(shù)據(jù)變了，視圖就會跟著改變，反過來也是

5、v-model原理

v-model一般配合input框使用，實(shí)現(xiàn)雙向數(shù)據(jù)綁定的效果，它是v-bind和v-on的語法糖，原理是通過v-bind將數(shù)據(jù)綁定給input框，再通過v-on:input，在input中的值改變時(shí)，通過$event可以獲取到事件源對象 再通過target.value獲取到input中更新后的值 將這個(gè)值再賦值給綁定的數(shù)據(jù)即可

web前端常見面試題實(shí)例分析

6、事件傳參

在vue的組件使用自定義事件時(shí)，$event代表子組件拋出的數(shù)據(jù)，當(dāng)這個(gè)自定義事件觸發(fā)一個(gè)方法時(shí)，
可以不傳$event而且可以在方法中進(jìn)行接收，但是如果寫的話就一定要寫成$event的形式，這是一個(gè)固定寫法，
或者這個(gè)方法既要傳參又要使用事件對象，這個(gè)時(shí)候$event也是必須要寫的
- @click='fn' 在回調(diào)函數(shù)直接通過參數(shù)可以拿到事件對象
- @click='fn($event)' 這個(gè)時(shí)候@event是固定寫法

7、父子組件的聲明周期執(zhí)行順序

1.初始化階段時(shí)，先執(zhí)行父組件的beforeCreate、created、beforeMount三個(gè)鉤子函數(shù)，然后執(zhí)行子組件的beforeCreate、created、beforeMount、mounted四個(gè)鉤子函數(shù)，最后執(zhí)行父組件的mounted鉤子函數(shù)

2.更新階段，先執(zhí)行父組件的beforeUpdate，然后執(zhí)行子組件的beforeUpdate，updated，最后執(zhí)行父組件的updated

3.銷毀階段，先執(zhí)行父組件的beforeDestroy，然后執(zhí)行子組件的eforeDestroy，destroyed，最后執(zhí)行父組件的destroyed

8、v-if和v-show的區(qū)別

v-if和v-show都可以控制標(biāo)簽，實(shí)現(xiàn)組件的顯示與隱藏，不同點(diǎn)是v-show是通過display的block和none屬性來控制的，當(dāng)元素隱藏時(shí)，頁面結(jié)構(gòu)依然存在

  • v-if是通過將元素創(chuàng)建和銷毀來控制顯示與隱藏的，當(dāng)v-if的條件為否時(shí)，會直接銷毀該元素，當(dāng)滿足時(shí)會重新創(chuàng)建出來，有可能會影響頁面的回流或重繪

  • 如果該元素需要頻繁切換時(shí)可以使用v-show，不需要頻繁切換時(shí)可以使用v-if，提高性能

9、v-for和v-if為什么要避免一起使用

  • 因?yàn)関-for的優(yōu)先級比v-if要高，兩者同時(shí)作用于一個(gè)標(biāo)簽或組件時(shí)，v-for會優(yōu)先執(zhí)行，執(zhí)行后再進(jìn)行v-if的判斷，但是不滿足v-if的條件的時(shí)候是可以不執(zhí)行v-for的，這時(shí)候就會造成資源浪費(fèi)，性能比較差

  • 解決辦法是可以通過計(jì)算屬性將滿足v-if判斷條件的數(shù)據(jù)篩選出來，再使用v-if直接渲染篩選后的數(shù)據(jù)，或者是當(dāng)v-if不依賴v-for時(shí)，可以通過template將v-if寫在循環(huán)的外部，這樣當(dāng)不滿足v-if的判斷條件時(shí)，就不會再執(zhí)行v-for了，也可以將數(shù)據(jù)放在計(jì)算屬性里面計(jì)算過濾出來的數(shù)據(jù)在交給v-for循環(huán)，代替v-if的作用，即可解決。

10、自定義指令：directive

應(yīng)用場景

  • v-imgerror 公司項(xiàng)目中有的用戶頭像可能加載報(bào)錯(cuò)，可以給他一張默認(rèn)圖片， onerror this.img=默認(rèn)圖片

  • v-focus 打開帶有搜索的頁面的時(shí)候，實(shí)現(xiàn)自動(dòng)把光標(biāo)定位到 input 中

  • 自定義指令的鉤子函數(shù)

1.bind 屬性綁定的時(shí)候執(zhí)行 只會有一次
2. inserted 當(dāng)前指令所在的元素插入到頁面中的時(shí)候執(zhí)行一次
3. update 當(dāng)前指令所在的組件中的 data 數(shù)據(jù)有更新就會執(zhí)行，可以執(zhí)行多次

// 指令的鉤子有三個(gè) bind inserted update
// bind inserted 只會執(zhí)行一次
// update 會反復(fù)執(zhí)行
Vue.directive('focus', {
  inserted(el) {
    el.focus()
  },
})

Vue.directive('red', {
  bind(el) {
    el.style.color = 'red'
  },
})

Vue.directive('check', {
  update(el) {
    const reg = /^[a-zA-Z0-9]+$/
    if (reg.test(el.value)) {
      el.style.color = 'green'
    } else {
      el.style.color = 'red'
    }
  },
})

瀏覽器的緩存機(jī)制

這塊部分理解不是很透徹，大家淺看一下就可以了?

  • 概念：瀏覽器會將請求后的資源進(jìn)行存貯為離線資源，當(dāng)下次需要該資源時(shí)，瀏覽器會根據(jù)緩存機(jī)制決定直接使用緩存資源還是再次向服務(wù)器發(fā)送請求
    作用：

  • 減少了不必要數(shù)據(jù)的傳輸、降低服務(wù)器的壓力

  • 加快了客戶端訪問速度

  • 增強(qiáng)用戶體驗(yàn)

  1. 強(qiáng)緩存：過期之前一直用本地離線資源 不會和服務(wù)器交互

    • http1.0 expire 具體的時(shí)間2023年1月1日

    • http1.1 cache-control 時(shí)間期限1年 （優(yōu)先級高）

  2. 協(xié)商緩存 本質(zhì)是看本地東西和服務(wù)器有沒有變舊（服務(wù)器上有沒有更新的資源） 強(qiáng)緩存不會和服務(wù)器交互 協(xié)商緩存會交互一次來判斷東西有沒有變舊

    • http1.0 last-modified/if-modified-since

    • http1.1 etag/if-none-match（優(yōu)先級高）

  • 當(dāng)前頁面中有一個(gè)img，它的src是logo.png
    1. 先看本地有沒有緩存資源，如果沒有，就需要向服務(wù)器發(fā)請求 拿回來這個(gè)資源同時(shí)拿回來expire,cache-control,last-modified,etag(響應(yīng)報(bào)文中)
    2. 過了一段時(shí)間（不確定的），又有一個(gè)別的頁面上面有一個(gè)img，src也是logo.png,這個(gè)時(shí)候就去看一下本地有沒有緩存資源，發(fā)現(xiàn)有，再看一下它expire,catch-control（如果有，優(yōu)先級是看cache-control),如果沒有過期，就用就行了（這塊屬于強(qiáng)緩存） 但是發(fā)現(xiàn)如果過期了，就開始進(jìn)入?yún)f(xié)商緩存的階段，就向服務(wù)器發(fā)送一個(gè)請求把if-modified-since（值就是last-modifyed)/if-none-match(etag)通過請求頭發(fā)過去,  服務(wù)器開始對比看看服務(wù)器上的資源有沒有比本地更新一點(diǎn)，如果服務(wù)器資源還是舊的，返回一個(gè)狀態(tài)碼叫304，瀏覽器一看狀態(tài)是304就繼續(xù)用本地離線資源，如果服務(wù)器資源有更新的資源，狀態(tài)碼就是200，服務(wù)器就需要傳給瀏覽器一個(gè)新的logo.png,流程重新再走一遍

設(shè)計(jì)模式

本人技術(shù)棧是主要是前端vue的，所以對這方面的知識還是有所欠缺的，盡量說的明白一點(diǎn)，其實(shí)我也不是很懂，大致明白，如果想要全面理解透還是需要很多技術(shù)儲備的，很明顯我不是的哈哈?

1、觀察者模式

觀察者模式即一個(gè)對象被多個(gè)對象所依賴，當(dāng)被依賴的對象發(fā)生更新時(shí)，會自動(dòng)通知所有依賴的對象

  • 觀察者模式定義了對象間的一種一對多的依賴關(guān)系，當(dāng)一個(gè)對象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對象都將得到通知，并自動(dòng)更新
    比喻：
    寶寶 -> 父母爺爺奶奶 一對多的依賴關(guān)系
    寶寶哭 -> 父母爺爺奶奶趕緊過來服務(wù) 當(dāng)一個(gè)對象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對象都將得到通知，并自動(dòng)更新

  • 模式特點(diǎn)： 有二個(gè)主體 一個(gè)是被觀察者 Dep 一個(gè)是觀察者 watcher，在vue中v-band就是采用這種模式理念，缺點(diǎn)是耦合性太高

2、發(fā)布訂閱模式

發(fā)布-訂閱模式其實(shí)是一種對象間一對多的依賴關(guān)系，當(dāng)一個(gè)對象的狀態(tài)發(fā)送改變時(shí)，所有依賴于它的對象都將得到狀態(tài)改變的通知。

  • 在現(xiàn)在的發(fā)布訂閱模式中，稱為發(fā)布者的消息發(fā)送者不會將消息直接發(fā)送給訂閱者，這意味著發(fā)布者和訂閱者不知道彼此的存在。在發(fā)布者和訂閱者之間存在第三個(gè)組件，稱為調(diào)度中心或事件通道(event bus)，它維持著發(fā)布者和訂閱者之間的聯(lián)系，過濾所有發(fā)布者傳入的消息并相應(yīng)地分發(fā)它們給訂閱者

  • 模式特點(diǎn)：有三個(gè)主體 發(fā)布者 調(diào)度中心 訂閱者，在vue中eventBus體現(xiàn)出來了這種模式理念，可以實(shí)現(xiàn)解耦

3、兩者模式區(qū)別

  • 主體數(shù)量不一樣，觀察者模式有二個(gè)主體 分別是被觀察者 Dep 和觀察者 watcher,發(fā)布訂閱模式有三個(gè)主體 分別是發(fā)布者 調(diào)度中心（事件通道 ) 訂閱者

  • 發(fā)布訂閱模式相比觀察者模式多了個(gè)事件通道，事件通道作為調(diào)度中心，管理事件的訂閱和發(fā)布工作，徹底隔絕了訂閱者和發(fā)布者的依賴關(guān)系，訂閱者和發(fā)布者是解耦的（不知道彼此存在）

到此，關(guān)于“web前端常見面試題實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

當(dāng)前名稱：web前端常見面試題實(shí)例分析
轉(zhuǎn)載來源：http://bm7419.com/article36/pcgpsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)公司、靜態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司