vue cached方法的使用

知识点：闭包、replace的使用、正则表达式
完整代码

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

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

驼峰转换的主要原理，主要是replace方法的使用（以下内容主要针对当前例子，详细使用见：W3school：JavaScript replace() 方法或MDN：String.prototype.replace()）

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

第一个参数camelizeRE为正则表达式 /-(\w)/g 。\w：匹配包括下划线的任何单词字符，等价于 [A-Za-z0-9_]。正则表达式中有全局标志g，replace方法将替换所有匹配的子串，该表达式将匹配出所有字符串-后面带有字母的字符串，例如'-1','-s'等等

第二个参数是一个函数，主要是将匹配到的两个字符串 转换 保留后一个字符串且将后一个字符串使用toUppserCase方法转换成大写，
该函数的第一个参数_为匹配到的字符串，此例子中repalce方法第一个参数是一个RegExp 对象，此时第二个参数为正则表达式中括号匹配到的字符，即-字符后的字符（详见replace第二个参数为函数的情况）。而函数的返回值会将匹配到的字符串替换掉。

匹配到的字符串应该会有两个字符的，c应该是有值的，为什么还要判断第二参数是否存在，再使用toUpperCase，暂时还不理解。

以正常使用为例
hellow-word => helloWord
中间的匹配到的字符串 -w 转换成一个字符串 W
以上为

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

这次段代码的原理，接下来说明cached的作用

function cached(fn) {
    // 创建一个空对象
    var cache = Object.create(null);
    return (function cachedFn(str) {
        // 获取缓存对象str属性的值
        var hit = cache[str];
        // 如果该值存在，直接返回，不存在调用一次fn，然后将结果存放到缓存对象中
        return hit || (cache[str] = fn(str))
    })
}

cached方法接受一个参数为函数，其会将该传入的函数的运行结果缓存
创建一个cache对象用于缓存运行fn的运行结果
返回一个函数cachedFn，函数内部先获取调用该函数cachedFn传入的参数str在缓存对象cache中的的值，如果在缓存对象cache中有值，直接返回该值，否则调用cached函数中传入的方法fn，然后将运行结果存到cache中。这样如果cachedFn调用两次，第一次要执行一次fn，并将其运行结果缓存起来，当第二次调用cachedFn并且参数str与之前调用过的一致的时候，直接从缓存对象cache中获取结果，这样就不用再一次调用fn方法，节省一次函数的运行。

camelize('hello-world');
运行结果为helloWorld;并且cache对象中增加一个属性'hello-world'，对应值为'helloWorld'
再次运行camelize('hello-world')
执行
var hit = cache[str]
的时候
cache['hello-world']中已经存有值helloWorld，此时hit为helloWorld
return hit || (cache[str] = fn(str))
直接返回hit的值，而不用再次调用fn(str)
cached方法主要使用场景都是对字符串的处理运行结果进行缓存此外还有

// 首字母大写
var capitalize = cached(function (str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
});