[源码学习]前端缓存工具fast-memoize和nano-memoize

至今天(2018年9月7日)，这2个工具的实现源码思想是极其类似的，基本上，只要阅读了其中一个源码，也就了解了另一个的实现。

fast-memoize导图:

初识

大概说说它们的实现思路：

1. 定义缓存结构，其中fast使用了无prototype的对象，nano使用了普通对象。
2. 定义序列化方法：当检测到是单参数时，都是选择JSON.stringify，而多个参数，二者有不一样（后面再说）。
3. 定义策略：也就是缓存的具体方法，其实很简单，就是对当前缓存结构查找，找到就返回，找不到就从新运行，
   二者都使用了bind方法注入参数，能够省去运行时再去查找参数。

接着分析二者的异同：

相同处：

• 都使用了JSON.stringify做为序列化方法，由于它是原生的。
• 都对返回的缓存函数进行了参数注入（这是一个极大提高性能的方法）。
• 对单参数仍是多参数的判断都是使用func.length(形参的数量判断)，由于func.length比arguments.length这种动态判断性能会好不少。

不一样点：

• fast使用了无prototype的对象，nano使用了普通对象(这一点性能上相差很少)。
• 当遇到多个参数时，fast仍是继续对arguments进行序列化，而nano则复杂一点，它经过用数组将每一次多个参数保存起来，

后续经过遍历每一个参数进行全等对比===，判断是否从缓存调取结果。

• 一样是多个参数，nano增长了一个参数max，可让用户自定义须要进行对比参数的长度。

深刻

接着看下第二点不一样点的源码：
主要看nano-memoize：

function multiple(f,k,v,eq,change,max=0,...args) {
      // 用来储存i(当前对比的参数索引)和缓存值
      const rslt = {};
      // k是一个专门存放多个参数的数组 格式相似
      // [[...args],[...args],[...args]...]
      for(let i=0;i<k.length;i++) { // an array of arrays of args
        let key = k[i];
        // 判断是否须要使用max
        if(max) { key = key.slice(0,max); }
        // 当前长度相等或者有max值，开始进行对比
        if(key.length===args.length || (max && key.length<args.length)) {
          // 获取长度
          const max = key.length - 1;
          for(let j=0;j<=max;j++) {
            // 若是发现不等，直接跳出
            if(!eq(key[j],args[j])) { break; } // go to next key if args don't match
            // 当到了最后一项都没跳出 说明参数相同
            if(j===max) { // the args matched
              // 记录当前索引
              rslt.i = i;
              // 调用当前参数的缓存
              rslt.v = v[i]; // get the cached value
            }
          }
        }
      }
      // 若是有i 说明是调用缓存，若是没有i，则添加缓存
      const i = rslt.i>=0 ? rslt.i : v.length;
      if(change) { change(i); }
      // 若是缓存不存在就执行func，存在直接返回缓存
      return typeof rslt.v === "undefined" ? v[i] = f.call(this,...(k[i] = args)) : rslt.v;
    }

能够看出，这是经过2次遍历，对 [[...args],[...args],[...args]...]这样一种结构比较，外层遍历判断length，
length相等才会进入内层遍历，内层遍历就是逐个判断了。

// 注入参数，提高性能
f = multiple.bind(
        this,
        fn,
        k,
        v,
        // 逐个判断方式默认为 ===
        equals || ((a,b) => a===b), // default to just a regular strict comparison
        (maxAge ? change.bind(this,v): null), // turn change logging on and bind to arg cache v
        maxArgs
      );

上面一段则是参数注入方式和默认的对比方式。

总结

一个表格总结二者最大不一样，假设：

• 忽略===的执行时间
• 使用的参数分为 引用相同 和 引用不一样(可是深比较都为true)
  例如：{x:1}和{x:1}

耗时操做	多个参数(引用相同)		多个参数(引用不一样)
状态	首次运行	后续运行	首次运行	后续运行
fast	序列化+运行函数	序列化比较	序列化+运行函数	序列化比较
nano	运行函数	0(===比较)	运行函数	运行函数(===比较失败)

---

源码(带注释)仓库