最近在读 Vue 源码,遇到了 cached 方法:
function
乍一看,就是一个高阶函数而已。但是仔细揣摩,方才发现尤大的用意,顿觉精妙。
高阶函数,简单的说一般都是一个函数,参数是函数,返回值也是函数。一般都用到了闭包作为公共变量或缓存。
实际上 cached 方法也就是这么做的。看一个示例:
// 将连字符为大驼峰
代码的作用很简单。就是执行 cached 后返回的 camelize 每次执行的参数都会被 cached 的参数执行,并且缓存在 hit 中。
作用很简单,只是什么要这么做。为什么要缓存起来呢?直接在需要的地方调用 replace 不行嘛?
答案是:可以,但是还有更好的方法。
我们来看一段测试代码:
console
上面的测试代码其实是比较了两种操作的执行时长,从结果可以发现:
对内存进行变量存取操作所需时长远小于 replace 方法的执行时长
因此如果我们要处理一个字符串,将其由连字符的形式变为大驼峰。对于可能要多次操作相同的字符串,最好的方法就是第一次处理完后将这个字符及结果缓存起来。下次再遇到执行读取操作要比再次执行字符串方法更加快速。
而这种处理方式在 Vue 源码中用到了很多,比如处理行间样式,处理 props 等。这里就不在展开了,有兴趣的可以直接翻看 Vue 源码。
最后不得不感慨,大神和吾等菜鸟的境界就是不一样,一个简简单单的方法就体现了对性能的极致追求。惭愧惭愧,值得学习。