vue源码之纯函数缓存

先欣赏一段大神解释

函数缓存的目的在于：将处理过的数据缓存，减少函数执行次数，提升前端程序性能。

最关键代码：return cache[str]; || (cache[str] = fn(str))

传统的数据处理，每次都需要经过函数。

function tradition(str){
  return str.charAt(0).toUpperCase() + str.slice(1)
}

var foo = tradition("Frank")
var bar = tradition("Kai")
var baz = tradition("Kai")

缓存的数据处理，只有当缓存中没有时才经过函数处理。

/**
 * Create a cached version of a pure function.
 */
function cached (fn) {
  var cache = Object.create(null);
  return (function cachedFn (str) {
    var hit = cache[str];
    return hit || (cache[str] = fn(str))
  })
}
var capitalize = cached(function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
});
//未缓存
var lastName = capitalize("Frank")
var firstName = capitalize("Kai")
//已缓存
var secondName = capitalize("Kai")

建议采用Chrome控制台的开发面板进行测试，6个变量命名处打断点，采用setp into(F11)的形式，去查看每个变量命名时的完整调用过程，对比未缓存和已缓存处的call stack，就会立刻理解函数缓存的原理。

努力成为优秀的前端工程师！