什么是驼峰化的函数呢？其实该命名是我参考源码函数名camelize翻译过来的，该函数的作用就是把一个形如"info-case-main"的类似字符串转换为驼峰写法。
下面就来看一下源码：
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() : '');
});
源码也是相当地简洁，毕竟是vue里面的源码，都是大神的手法。下面说一下个人的阅读理解，如有不对的地方，还希望各位童鞋能下方留言告知。
相信大家第一眼就看到了这条核心实现语句：
str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
stringObject.replace的第二个参数为函数时
众说周知js字符串对象的replace方法用于将一些字符替换另一些字符，简单的替换即第二个参数传字符串，但这里传函数是什么鬼？查了一下文档才知第二个参数可以传一个生成替换文本的函数，但最令人迷惑的还是该函数的一些参数。于是通过查文档得知该函数的参数解释：
1.该函数的第一个参数是匹配模式的字符串。
2.接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。
3.接下来的参数是一个整数，即在 目标字符串 中出现的位置索引。
子表达式：'()' 代表一个子表达式，将其中的内容视为一个整体进行处理。
为了能直观的看出这些理论说了什么，下面是一个简单的示例：
var str = "info-case-main";
str.replace(/-(\w)/g, function(a, b, c) {
console.log(a, b, c);
});
将以上代码复制到控制台，即可看到输出：
-c c 4
-m m 9
那么(_, c) => c ? c.toUpperCase() : ''这句话就很好理解了，将'-'后面紧跟着的字母转大写，如果匹配有的话。
cached函数
好了，核心实现看完了，那么cached又是怎样的一个函数呢？顾名思义，是缓存之类的操作。也就是说，把运算结果保存起来，如果再遇到相同的运算时，即可从缓存对象拿了。
实现这种缓存机制，其实都大同小异，基本离不开闭包，利用闭包分隔作用域，其实可以把const cache = Object.create(null)这个cache看成一个静态变量，之后的闭包调用也就不会再去执行const cache = Object.create(null)，所以cache的作用域得到了延长。
接下来看看fn这个回调函数，该回调函数将str回调给我们自己去处理，也就是本文的核心实现匿名函数：
(str) => {
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '');
}
看来这个cached 函数可以服务于很多函数呢，以后大家可以多在项目中用用这种缓存机制，算是追求性能的一种方法吧。
最后，写上测试代码：
camelize("info-case-main"); // infoCaseMain
camelize("info-case-main"); // infoCaseMain
完结撒花~
网友评论