vue面試必背知識(shí)點(diǎn)？1.理解Vu前端編譯器babel的緩存機(jī)制是怎么做的？babel介紹babel是一個(gè)js編譯器。我們通常使用react、vue等框架編譯成瀏覽器可以執(zhí)行的代碼。個(gè)人感覺巴別塔是前

vue面試必背知識(shí)點(diǎn)？

1.理解Vu

前端編譯器babel的緩存機(jī)制是怎么做的？

babel介紹babel是一個(gè)js編譯器。我們通常使用react、vue等框架編譯成瀏覽器可以執(zhí)行的代碼。個(gè)人感覺巴別塔是前端建筑中最低最核心的部分。沒有它，前端肯定會(huì)回到刀耕火種的時(shí)代。

既然是編譯器，當(dāng)然會(huì)操作很多文件。在babel/core中，它讀取包括babelrc、pkgjson、插件、預(yù)置等在內(nèi)的大部分文件。，所以緩存操作文件的結(jié)果是必不可少的！

巴別塔 的緩存機(jī)制假設(shè)我們正在處理一個(gè)文件。對(duì)象和數(shù)組通常被用作js中的緩存容器。babel使用了es6提供的map，但它實(shí)際上是一個(gè)對(duì)象，只是它的鍵是任意的(不限于字符串)。

好了，現(xiàn)在我們有了一個(gè)緩存容器(map)，那么關(guān)鍵是什么呢？用來(lái)標(biāo)記一個(gè)文件，一般可以選擇使用文件的路徑和文件名的md5值，babel使用的是前者。

處理文件的過(guò)程可以定義一個(gè)handle方法，文件路徑是handle的一個(gè)參數(shù)。有時(shí)候只有一個(gè)文件路徑不能滿足業(yè)務(wù)邏輯，還需要傳入其他參數(shù)，所以handle還有第二個(gè)參數(shù)。

這里babel封裝了第二個(gè)參數(shù)，使之成為具有狀態(tài)管理能力的對(duì)象，所以handle的第二個(gè)參數(shù)就是這個(gè)對(duì)象。

句柄處理后，你會(huì)得到這次一個(gè)文件的處理結(jié)果值。是否要現(xiàn)在保存地圖中的值？對(duì)不起，它 不是的！

CacheConfigurator是一個(gè)具有狀態(tài)管理能力的對(duì)象，可以用在句柄處理的過(guò)程中。來(lái)修改狀態(tài)。得到value的值后，需要識(shí)別CacheConfigurator的狀態(tài)。

CacheConfigurator有三種狀態(tài):

紅色字體的有效項(xiàng)是check函數(shù)never，不需要緩存。

永遠(yuǎn)，你需要緩存，但是下次處理這個(gè)文件的時(shí)候，跳過(guò)驗(yàn)證部分，直接返回值。

有效，下次處理這個(gè)文件時(shí)，需要通過(guò)驗(yàn)證邏輯有效。

那么這個(gè)檢查邏輯是怎么來(lái)的呢？

那個(gè) 沒錯(cuò)，它是在處理CacheConfigurator時(shí)由handle傳入的。

下次處理這個(gè)文件的時(shí)候，優(yōu)先考慮緩存的邏輯，只有通過(guò)驗(yàn)證后，才直接返回值！

整體思路是這樣的，蒙大拿的思路還是很微妙的。這個(gè)思路在其他業(yè)務(wù)中也可以參考！

喜歡我的回答就關(guān)注我。有問(wèn)題可以評(píng)論。讓 讓我們一起學(xué)習(xí)，一起成長(zhǎng)！