欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue源碼cached解析

 更新時(shí)間:2022年08月13日 08:55:53   作者:qq_22841387  
最近在寫(xiě)閉包的應(yīng)用的時(shí)候,出現(xiàn)了一個(gè)cached函數(shù),來(lái)源于Vue源碼,利用了閉包變量不會(huì)被回收的特點(diǎn),可以緩存變量,cached本質(zhì)上是一個(gè)高階函數(shù),它接受一個(gè)函數(shù)的參數(shù),同時(shí)返回一個(gè)函數(shù)

前言

創(chuàng)建一個(gè)純函數(shù)的緩存版本

主要用途:優(yōu)化性能——對(duì)于之前運(yùn)算過(guò)一次的內(nèi)容,利用閉包原理,緩存起來(lái),避免重復(fù)調(diào)用,造成性能的浪費(fèi)

  /**
   * Create a cached version of a pure function.
   */
  function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
      var hit = cache[str];
      return hit || (cache[str] = fn(str))
    })
  }

這一段的源碼很短,但是在源碼中使用了19處!這就顯得這個(gè)函數(shù)很重要了

參數(shù)解釋

傳入?yún)?shù)

fn:(函數(shù)類(lèi)型)

用于執(zhí)行需要緩存的方法

str:字符串類(lèi)型

傳入函數(shù)fn中的參數(shù)

返回參數(shù)

類(lèi)型為:函數(shù)類(lèi)型

源碼解釋

首先通過(guò)Object.create創(chuàng)建一個(gè)干凈的空對(duì)象出來(lái)

然后直接返回一個(gè)函數(shù)(cachedFn

函數(shù)內(nèi)首先定義變量,通過(guò)傳入的參數(shù)str去訪問(wèn)創(chuàng)建出來(lái)的cache對(duì)象

  • 若hit擊中了目標(biāo),即不為undefined——直接返回,不再調(diào)用函數(shù)
  • 若未擊中,則訪問(wèn)傳入的fn函數(shù),并把函數(shù)返回值賦值給cache對(duì)象

實(shí)驗(yàn)解釋

這樣可能比較抽象,我們直接做一個(gè)實(shí)驗(yàn),同樣直接在瀏覽器中做

這一次,我們直接在瀏覽器的源代碼中做——debug

function cached(fn) {
    var cache = Object.create(null)
    return(
        function cachedFn(str) {
            var hit = cache[str];
            return hit || (cache[str] = fn(str));
        }
    )
}
var capitalize = cached(function(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
})
console.log(capitalize("abc"),"第一次訪問(wèn)")
console.log(capitalize("abc"),"第二次訪問(wèn)")

直接打一個(gè)斷點(diǎn),看看會(huì)發(fā)生什么

執(zhí)行第一次

在第一次運(yùn)行時(shí),發(fā)現(xiàn)cache是一個(gè)空的object,然后直接進(jìn)入了立即執(zhí)行函數(shù)cacheFn

這里立即執(zhí)行函數(shù)的作用就是

創(chuàng)建新的作用域,隔離變量——于將var使用變?yōu)?code>let效果一致

str值為abc,也就是傳入?yún)?shù)fn中的參數(shù)

下一步執(zhí)行,當(dāng)然就是執(zhí)行fn函數(shù)了

我們可以看到這里的fn函數(shù)就是對(duì)應(yīng)capitalize中的function,將str的參數(shù)傳進(jìn)來(lái)

執(zhí)行的結(jié)果就是Abc

右邊執(zhí)行完成后,賦值給左側(cè)的cache[str]

這里的代碼可以翻譯成,或許更好理解

cache[str] = "Abc"

也就是說(shuō),這里相當(dāng)于通過(guò)方括號(hào)屬性訪問(wèn)器,創(chuàng)建了一個(gè)不存在的屬性abc,對(duì)應(yīng)的值是fn返回的Abc

在右側(cè)監(jiān)視的cache也明顯的多出了一個(gè)屬性abc

執(zhí)行第二次

此時(shí)我們看見(jiàn),cache此時(shí)是具有屬性abc的,因此hit的值不再是undefined

第二次時(shí),很明顯的我們可以看見(jiàn)執(zhí)行過(guò)程,沒(méi)有再次調(diào)用fn函數(shù),也就是說(shuō)沒(méi)有調(diào)用capitalize中的函數(shù),而是直接獲取的緩存。

從而也就做到了對(duì)性能的優(yōu)化。

源碼疑問(wèn)

為什么cache是有效的,每次調(diào)用函數(shù)的時(shí)候不都創(chuàng)建了新的嗎?

這里其實(shí)使用的是閉包的特性。

在調(diào)用cached函數(shù)時(shí),會(huì)在當(dāng)前函數(shù)創(chuàng)建一個(gè)cache對(duì)象

也就是說(shuō),其實(shí)cache對(duì)象是屬于當(dāng)前示例中的capitalize

這個(gè)我們可以直接在屬性中看出來(lái)

我們重新debug一次,這一次關(guān)注capitalize中的值

第一次執(zhí)行時(shí)

第二次執(zhí)行時(shí)

在運(yùn)行完cache[str] = fn(str)后,發(fā)現(xiàn)的確這里的值增加了一個(gè)

因此,我們可以得出結(jié)論。

小結(jié):

在每一次調(diào)用cached時(shí),由于閉包函數(shù)的特性,使得cached中的變量值不會(huì)被清空,而且這個(gè)值是在對(duì)應(yīng)的處理方法中的。

因?yàn)閏ache對(duì)象是在內(nèi)部創(chuàng)建的,所以每次調(diào)用cached都將是不同的object

各自擁有獨(dú)立的緩存空間,而不是全局共用一個(gè)

到此這篇關(guān)于Vue源碼cached解析的文章就介紹到這了,更多相關(guān)Vue cached內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue2中實(shí)現(xiàn)dialog的封裝方式

    Vue2中實(shí)現(xiàn)dialog的封裝方式

    這篇文章主要介紹了Vue2中實(shí)現(xiàn)dialog的封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • vue3+vite動(dòng)態(tài)引入圖片方式

    vue3+vite動(dòng)態(tài)引入圖片方式

    這篇文章主要介紹了vue3+vite動(dòng)態(tài)引入圖片方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Vue實(shí)現(xiàn)購(gòu)物車(chē)實(shí)例代碼兩則

    Vue實(shí)現(xiàn)購(gòu)物車(chē)實(shí)例代碼兩則

    這篇文章主要介紹了Vue實(shí)現(xiàn)購(gòu)物車(chē)實(shí)例代碼,需要的朋友可以參考下
    2020-05-05
  • Vue.js中 v-model 指令的修飾符詳解

    Vue.js中 v-model 指令的修飾符詳解

    v-model 指令默認(rèn)會(huì)在 input 事件中加載輸入框中的數(shù)據(jù)(中文輸入法中輸入拼音的過(guò)程除外)。這篇文章通過(guò)實(shí)例代碼給大家介紹Vue.js中 v-model 指令的修飾,感興趣的朋友跟隨小編一起看看吧
    2018-12-12
  • VueRouter?原理解讀之初始化流程

    VueRouter?原理解讀之初始化流程

    這篇文章主要為大家介紹了VueRouter原理解讀之初始化流程實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • Vue中的事件綁定與解綁方式

    Vue中的事件綁定與解綁方式

    這篇文章主要介紹了Vue中的事件綁定與解綁方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue element upload實(shí)現(xiàn)圖片本地預(yù)覽

    vue element upload實(shí)現(xiàn)圖片本地預(yù)覽

    這篇文章主要為大家詳細(xì)介紹了vue element upload實(shí)現(xiàn)圖片本地預(yù)覽,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • 使用Bootstrap + Vue.js實(shí)現(xiàn)添加刪除數(shù)據(jù)示例

    使用Bootstrap + Vue.js實(shí)現(xiàn)添加刪除數(shù)據(jù)示例

    本篇文章主要介紹了使用Bootstrap + Vue.js實(shí)現(xiàn) 添加刪除數(shù)據(jù)示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。
    2017-02-02
  • 解決vant-UI庫(kù)修改樣式無(wú)效的問(wèn)題

    解決vant-UI庫(kù)修改樣式無(wú)效的問(wèn)題

    這篇文章主要介紹了解決vant-UI庫(kù)修改樣式無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • 詳解Vue 事件修飾符capture 的使用

    詳解Vue 事件修飾符capture 的使用

    capture事件修飾符的作用是給元素添加一個(gè)監(jiān)聽(tīng)器,當(dāng)元素發(fā)生冒泡時(shí),先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用,需要的朋友參考下吧
    2017-12-12

最新評(píng)論