什么是駝峰化的函數(shù)呢？其實(shí)該命名是我參考源碼函數(shù)名camelize翻譯過(guò)來(lái)的，該函數(shù)的作用就是把一個(gè)形如"info-case-main"的類(lèi)似字符串轉(zhuǎn)換為駝峰寫(xiě)法。

下面就來(lái)看一下源碼：

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

const camelizeRE = /-(\w)/g;
const camelize = cached((str) => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '');
});

源碼也是相當(dāng)?shù)睾?jiǎn)潔，畢竟是vue里面的源碼，都是大神的手法。下面說(shuō)一下個(gè)人的閱讀理解，如有不對(duì)的地方，還希望各位童鞋能下方留言告知。
相信大家第一眼就看到了這條核心實(shí)現(xiàn)語(yǔ)句：

str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')

stringObject.replace的第二個(gè)參數(shù)為函數(shù)時(shí)

眾說(shuō)周知js字符串對(duì)象的replace方法用于將一些字符替換另一些字符，簡(jiǎn)單的替換即第二個(gè)參數(shù)傳字符串，但這里傳函數(shù)是什么鬼？查了一下文檔才知第二個(gè)參數(shù)可以傳一個(gè)生成替換文本的函數(shù)，但最令人迷惑的還是該函數(shù)的一些參數(shù)。于是通過(guò)查文檔得知該函數(shù)的參數(shù)解釋：
1.該函數(shù)的第一個(gè)參數(shù)是匹配模式的字符串。
2.接下來(lái)的參數(shù)是與模式中的子表達(dá)式匹配的字符串，可以有 0 個(gè)或多個(gè)這樣的參數(shù)。
3.接下來(lái)的參數(shù)是一個(gè)整數(shù)，即在 目標(biāo)字符串 中出現(xiàn)的位置索引。
子表達(dá)式：'()' 代表一個(gè)子表達(dá)式，將其中的內(nèi)容視為一個(gè)整體進(jìn)行處理。

為了能直觀的看出這些理論說(shuō)了什么，下面是一個(gè)簡(jiǎn)單的示例：

var str = "info-case-main";
str.replace(/-(\w)/g, function(a, b, c) {
    console.log(a, b, c);
});

將以上代碼復(fù)制到控制臺(tái)，即可看到輸出：

-c c 4
-m m 9

那么(_, c) => c ? c.toUpperCase() : ''這句話就很好理解了，將'-'后面緊跟著的字母轉(zhuǎn)大寫(xiě)，如果匹配有的話。

cached函數(shù)

好了，核心實(shí)現(xiàn)看完了，那么cached又是怎樣的一個(gè)函數(shù)呢？顧名思義，是緩存之類(lèi)的操作。也就是說(shuō)，把運(yùn)算結(jié)果保存起來(lái)，如果再遇到相同的運(yùn)算時(shí)，即可從緩存對(duì)象拿了。
實(shí)現(xiàn)這種緩存機(jī)制，其實(shí)都大同小異，基本離不開(kāi)閉包，利用閉包分隔作用域，其實(shí)可以把const cache = Object.create(null)這個(gè)cache看成一個(gè)靜態(tài)變量，之后的閉包調(diào)用也就不會(huì)再去執(zhí)行const cache = Object.create(null)，所以cache的作用域得到了延長(zhǎng)。
接下來(lái)看看fn這個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)將str回調(diào)給我們自己去處理，也就是本文的核心實(shí)現(xiàn)匿名函數(shù)：

(str) => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '');
}

看來(lái)這個(gè)cached 函數(shù)可以服務(wù)于很多函數(shù)呢，以后大家可以多在項(xiàng)目中用用這種緩存機(jī)制，算是追求性能的一種方法吧。

最后，寫(xiě)上測(cè)試代碼：

camelize("info-case-main");    // infoCaseMain 
camelize("info-case-main");    // infoCaseMain 

完結(jié)撒花~