您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue cached怎么創(chuàng)建的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇Vue cached怎么創(chuàng)建文章都會有所收獲,下面我們一起來看看吧。
創(chuàng)建一個純函數(shù)的緩存版本
主要用途:優(yōu)化性能;對于之前運算過一次的內(nèi)容,利用閉包原理,緩存起來,避免重復(fù)調(diào)用,造成性能的浪費
/** * 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處!這就顯得這個函數(shù)很重要了
fn
:(函數(shù)類型)
用于執(zhí)行需要緩存的方法
str
:字符串類型
傳入函數(shù)fn中的參數(shù)
類型為:函數(shù)類型
首先通過Object.create
創(chuàng)建一個干凈的空對象出來
然后直接返回一個函數(shù)(cachedFn
)
函數(shù)內(nèi)首先定義變量,通過傳入的參數(shù)str去訪問創(chuàng)建出來的cache
對象
若hit擊中了目標,即不為undefined——直接返回,不再調(diào)用函數(shù)
若未擊中,則訪問傳入的fn
函數(shù),并把函數(shù)返回值賦值給cache
對象
這樣可能比較抽象,我們直接做一個實驗,同樣直接在瀏覽器中做
這一次,我們直接在瀏覽器的源代碼中做——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"),"第一次訪問") console.log(capitalize("abc"),"第二次訪問")
直接打一個斷點,看看會發(fā)生什么
執(zhí)行第一次
在第一次運行時,發(fā)現(xiàn)cache是一個空的object,然后直接進入了立即執(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ù)就是對應(yīng)capitalize
中的function,將str的參數(shù)傳進來
執(zhí)行的結(jié)果就是Abc
右邊執(zhí)行完成后,賦值給左側(cè)的cache[str]
這里的代碼可以翻譯成,或許更好理解
cache[str] = "Abc"
也就是說,這里相當(dāng)于通過方括號屬性訪問器,創(chuàng)建了一個不存在的屬性abc
,對應(yīng)的值是fn返回的Abc
在右側(cè)監(jiān)視的cache
也明顯的多出了一個屬性abc
執(zhí)行第二次
此時我們看見,cache此時是具有屬性abc
的,因此hit的值不再是undefined
第二次時,很明顯的我們可以看見執(zhí)行過程,沒有再次調(diào)用fn函數(shù),也就是說沒有調(diào)用capitalize
中的函數(shù),而是直接獲取的緩存。
從而也就做到了對性能的優(yōu)化。
為什么cache是有效的,每次調(diào)用函數(shù)的時候不都創(chuàng)建了新的嗎?
這里其實使用的是閉包的特性。
在調(diào)用cached函數(shù)時,會在當(dāng)前函數(shù)創(chuàng)建一個cache對象
也就是說,其實cache對象是屬于當(dāng)前示例中的capitalize
這個我們可以直接在屬性中看出來
我們重新debug一次,這一次關(guān)注capitalize
中的值
第一次執(zhí)行時
第二次執(zhí)行時
在運行完cache[str] = fn(str)
后,發(fā)現(xiàn)的確這里的值增加了一個
因此,我們可以得出結(jié)論。
小結(jié):
在每一次調(diào)用cached
時,由于閉包函數(shù)的特性,使得cached中的變量值不會被清空,而且這個值是在對應(yīng)的處理方法中的。
因為cache對象是在內(nèi)部創(chuàng)建的,所以每次調(diào)用cached都將是不同的object
各自擁有獨立的緩存空間,而不是全局共用一個
關(guān)于“Vue cached怎么創(chuàng)建”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“Vue cached怎么創(chuàng)建”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。