js设计模式-备忘录模式

备忘录模式的基础

定义：在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。这样就可以将该对象恢复到原先保存的状态
作用：在我们的开发中偶尔会遇到这样一种情况，需要对用户的行为进行撤销。要想实现撤销，首先需要保存软件系统的历史状态，当用户执行撤销时用之前的状态覆盖当前状态。本节介绍的备忘录模式提供了一种状态恢复的实现机制，使得用户可以方便的回到一个特定的历史步骤。备忘录模式在js中经常用于数据缓存。
使用场景：分页控件、撤销组件

分页控件

var Page = function(){
	let page = 1,
		cache = {},
		data;
	return function( page ){
		if ( cache[ page ] ){
				data =  cache[ page ];
				render( data );
		}else{
				Ajax.send( 'cgi.xx.com/xxx', function( data ){
				   cache[ page ] = data;
				   render( data );
				});
		}
	}
}();

分页控件, 从服务器获得某一页的数据后可以存入缓存。以后再翻回这一页的时候，可以直接使用缓存里的数据而无需再次请求服务器。

高阶函数实现缓存(备忘模式)

var add = function(a) {
    return a + 1;
}

每次运行add(1)的时候都会输出2，但是输入1每次还是会计算一下1+1，如果是开销很大的操作的话就比较消耗性能了，这里其实可以对这个计算进行一次缓存。
所以这里可以利用高阶函数的思想来实现一个简单的缓存，我可以在函数内部用一个对象存储输入的参数，如果下次再输入相同的参数，那就比较一下对象的属性，把值从这个对象里面取出来。

const memorize = function(fn) {
  const cache = {}
  return function(...args) {
    const _args = JSON.stringify(args)
    return cache[_args] || (cache[_args] = fn.apply(fn, args))
  }
}
const add = function(a) {
  return a + 1
}
const adder = memorize(add)
adder(1)    // 2    cache: { '[1]': 2 }
adder(1)    // 2    cache: { '[1]': 2 }
adder(2)    // 3    cache: { '[1]': 2, '[2]': 3 }

用JSON.stringify把传给 adder 函数的参数变成了字符串，并且把它当做 cache 的 key，将 add 函数运行的结果当做 value 传到了 cache 里面，这样 memorize 的匿名函数运行的时候会返回cache[_args]，如果cache[_args]不存在的话就返回fn.apply(fn,args)，把fn.apply(fn, arguments)赋值给cache[_args]并返回。
注意：cache不可以是Map，因为Map的键是使用===比较的，[1]！==[1]，因此即使传入相同的对象或者数组，那么还是被存为不同的键。

const memorize = function(fn) {        //  X 错误示范
  const cache = new Map()
  return function(...args) {
    return cache.get(args) || cache.set(args, fn.apply(fn, args)).get(args)
  }
}
const add = function(a) {
  return a + 1
}
const adder = memorize(add)
adder(1)    // 2    cache: { [ 1 ] => 2 }
adder(1)    // 2    cache: { [ 1 ] => 2, [ 1 ] => 2 }
adder(2)    // 3    cache: { [ 1 ] => 2, [ 1 ] => 2, [ 2 ] => 3 }