什么是驼峰化的函数呢?其实该命名是我参考源码函数名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
完结撒花~