這篇文章分享一個(gè)比較有意思的東西，那就是Vue中如何實(shí)現(xiàn)cache緩存的。提前揭曉答案--閉包。下面我們就來手寫一個(gè)吧。第一步，毫無疑問當(dāng)然是我們的測(cè)試文件咯。

添加測(cè)試文件

繼續(xù)使用vitest測(cè)試,想知道具體怎么操作的，可以看下專欄第一篇文章。

剛開始學(xué)習(xí)寫測(cè)試，大家多提意見哈。

test.only("cached", () => {
  const fnMock = vi.fn((str) => str)
  const getName = cached(fnMock)
  const name = getName("mick")
  expect(name).toBe("mick")
  expect(fnMock).toHaveBeenCalled()
  expect(fnMock).toHaveBeenCalledTimes(1)
  const name1 = getName("mick")
  expect(name1).toBe("mick")
  expect(fnMock).toHaveBeenCalledTimes(1)
})

首先模擬一個(gè)函數(shù)，這個(gè)函數(shù)傳入一個(gè)字符串，返回一個(gè)字符串。為什么要這么模擬呢？我們拿Vue當(dāng)中capitalize首字母轉(zhuǎn)大寫舉例（當(dāng)然我們可以暫時(shí)不用太多的關(guān)心capitalize是怎么實(shí)現(xiàn)的）

const capitalize = cached((str) => {
  return str.charAt(0).toUpperCase() + str.slice(1)
})

可以看到cached傳入了一個(gè)函數(shù)，這個(gè)函數(shù)要實(shí)現(xiàn)的就是傳入一個(gè)字符串，返回一個(gè)字符串（首字母轉(zhuǎn)成大寫）。所以我們要模擬的就是類似這樣的一個(gè)函數(shù)。

回歸正題

模擬了一個(gè)函數(shù)fnMock,傳給cached并執(zhí)行，返回了getName函數(shù)。然后調(diào)用getName函數(shù)傳入字符串mick,用name變量接收，這個(gè)變量我們期望應(yīng)該是mick。此時(shí)模擬的fnMock應(yīng)該被調(diào)用了一次，當(dāng)再次執(zhí)行getName函數(shù)同樣傳入mick時(shí)，仍然能拿到這個(gè)值，但是模擬的fnMock還是被調(diào)用一次。因?yàn)?code>mick被緩存了。

沒錯(cuò)，就是用文章開頭提到的"閉包"解決。

實(shí)現(xiàn)cache

不廢話，直接上代碼

export function cached(fn) {
  const cache = Object.create(null)
  return function cachedFn(str) {
    var hit = cache[str]
    return hit || (cache[str] = fn(str))
  }
}

首先創(chuàng)建一個(gè)空對(duì)象方便存儲(chǔ)需要緩存的值。然后返回一個(gè)函數(shù)cachedFn,參數(shù)fn就是就是我們測(cè)試中的fnMock,函數(shù)內(nèi)部首先去獲取我們想要拿到的值cache[str],第一次肯定是拿不到的，所以需要對(duì)其賦值cache[str] = fn(str)并返回,此時(shí)fnMock已經(jīng)被執(zhí)行了1次。此時(shí)根據(jù)閉包的特性，傳入的str已經(jīng)被緩存了起來。當(dāng)?shù)诙蝹魅胪瑯拥闹档臅r(shí)候，var hit = cache[str]就可以獲取到了，則直接返回，所以fnMock不會(huì)被再次執(zhí)行，只有首次執(zhí)行了1次。

到此這篇關(guān)于詳解Vue中是如何實(shí)現(xiàn)cache緩存的的文章就介紹到這了,更多相關(guān)Vue cache緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論