唐霜的博客

受reselect启发，实际上，对于某类特定函数——输入相同的情况下，输出一定相同的纯函数，实际上，对于相同的输入参数，没有必要进行多次计算，而是可以将结果缓存起来，在识别到相同的参数时，直接取出该参数对应的结果即可。因此，我编写了computex：

/**
 * 创建一个可缓存的纯函数。
 * 使用场景：纯函数，相同的参数永远得到相同的结果。
 * @param {*} fn 原始纯函数
 * @param {*} expire 缓存过期时间
 * @example
 * const fn = computex((state) => {
 *   return state.name + ':' + state.age
 * })
 * var a1 = fn({})
 * var a2 = fn({})
 * // a1 === a2 // 因为参数相同，所以结果使用了缓存，因此也相同（引用相同）
 */
export function computex(fn, expire = 60000) {
  const cache = {}

  // 创建一个循环任务，检查缓存是否过期，如果过期，则删除缓存，释放内存
  const recycle = () => {
    const keys = Object.keys(cache)
    keys.forEach((key) => {
      const { time } = cache[key]
      if (time + expire <= Date.now()) {
        delete cache[key]
      }
    })
    setTimeout(recycle, 1000)
  }

  // 如果expire设置为0，则缓存永久生效
  if (expire) {
    recycle()
  }

  return function(...args) {
    const hash = getObjectHash(args)
    if (hash in cache) {
      const item = cache[hash]
      return item.result
    }

    const result = fn.apply(this, args)
    const time = Date.now()
    cache[hash] = { result, time }

    return result
  }
}

其中computex本身是一个函数，它接收一个函数，返回一个函数，返回的函数是接收到函数的复刻版，运行它得到的结果和运行传入函数是一样的。这样就可以做到缓存计算过程。

/**
 * 创建一个在同一个同步进程中只获取一次的函数。
 * 使用场景：反复调用一个函数，而该函数在本批次运行时，实际执行结果应该相同。
 * @param {*} fn
 * @param {number} expire 缓存过期时间，根据实际的情况来看，如果一个运算比较大，可以设大一点
 * @example
 * const get = getx(() => Date.now())
 * var a1 = get()
 * var a2 = get()
 * // a1 === a2 // 在同步进程中，直接使用缓存
 */
export function getx(fn, expire = 10) {
  var iscalling = false
  var cache = null
  var timer = null

  return function() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      iscalling = false
      cache = null
    }, expire)

    if (iscalling) {
      return cache
    }

    iscalling = true

    const result = fn.call(this)
    cache = result
    return result
  }
}

getx是另外一个逻辑。当在同一个同步进程中，我们可能会反复调用一个函数，而这些函数在这一次反复调用时，实际上是执行了同一个过程，所以，得到的结果也是一样的，但是在执行过程中消耗了资源。因此，我们可以将这些结果缓存起来，在这一个同步进程结束后再清理掉即可。

/**
 * 创建一个缓存Promise的异步函数
 * @param {*} fn
 * @param {*} expire 缓存的过期时间，不设置的时候，当Promise结束缓存就会被清空，而如果设置了expire，完全按照expire清空缓存，而不会依赖Promise的结束
 */
export function asyncx(fn, expire = 0) {
	const cache = {}

	// 创建一个循环任务，检查缓存是否过期，如果过期，则删除缓存，释放内存
	const recycle = () => {
		const keys = Object.keys(cache)
		keys.forEach((key) => {
			const { time } = cache[key]
			if (time + expire <= Date.now()) {
				delete cache[key]
			}
		})
		setTimeout(recycle, 1000)
	}

	// 如果expire设置为0，则缓存永久生效
	if (expire > 0) {
		recycle()
	}

	return function(...args) {
		const hash = getObjectHash(args)
		if (hash in cache) {
			const item = cache[hash]
			return item.deferer
		}

		const deferer = new Promise((resolve, reject) => {
			Promise.resolve().then(() => fn.apply(this, args)).then(resolve).catch(reject).then(() => {
				if (expire > 0) {
					return
				}
				delete cache[hash]
			})
		})
		const time = Date.now()
		cache[hash] = { deferer, time }

		return deferer
	}
}

而对于基于Promise的异步操作，则通过asyncx来实现缓存。缓存的并非Promise最终返回的结果，而是缓存Promise本身，在一个Promise进行中的时候，如果再次调用这个函数，得到的会是未结束的Promise，而非重新发起一个Promise。这有助于解决短时间内反复请求某个api接口的情况。

因为项目的一个小组件里面需要对类似html属性字符串进行解析，找了很久没有找到对应的库来做，干脆自己写一个。

function parseAttrs(source) {
	let separator = /\s/;
	let cursor = '';

	let str = source.trim().replace(/\n+/g, ' ').replace(/\s+/g, ' ');
	let length = str.length;

	let attrs = [];

	let current = null;
	let type = 'key';
	let reset = () => {
		current = {
			key: '',
			value: ''
		};
		cursor = '';
	};
	reset();

	for (let i = 0; i < length; i ++) {
		let char = str.charAt(i);
		let needPush = true;

		// 遇到引号
		if (char === '"' || char === "'") {
			// 引号开始
			if (!cursor) {
				cursor = char;
				type = 'value';
				needPush = false;
			}
			// 引号结束
			else if (cursor === char) {
				cursor = '';
				type = 'key';
				needPush = false;
			}
		}

		if (char === '=' && type === 'key') {
			needPush = false;
		}

		if (/[\w\W]/.test(char) && needPush) {
			current[type] += type === 'key' && char === ' ' ? '' : char;
		}

		// 遇到分隔符
		if ((separator.test(char) && cursor === '') || i === length - 1) {
			attrs.push(current);
			reset();
		}
	}

	return attrs;
}

思路非常简单，就是遍历整个字符串，遇到特殊标记就记录下来，再遇到特殊标记就结束一个属性的查找，最后得到一个数组。