Vue源码阅读与分享（一）

好久没写博客，今天开始看了点儿vue源码，心血来潮想写一点儿东西。
话不多说，进入正题。

我在src/shared/util.js里看到了一个叫cached的方法，写得很有意思。

// 我做了略微的改动，没有改变原意（因为它好像用了ts的语法）
function cached(fn) {
 		const cache = {}
	return str => {
	    const hit = cache[str]
	  	return hit || (cache[str] = fn(str))
	}
}

这里运用了很多基础知识

1. 闭包，这里是一个非常典型的闭包满足了闭包2要素
   • 父函数的返回结果为函数
   • 返回的子函数中使用了父函数中定义的变量
2. 穿透赋值，|| 这个运算符以及 = 运算符的使用
   • || 前值为真则取前值且不计算后值，前值为假则计算后值并返回
   • = 赋值运算，并返回=右侧的结果

因为我读代码时是从上往下读的，所以刚开始并不知道这个方法在哪用的，也不太清楚该怎么用，往下继续看时，直接让我叹为观止。

使用示例：将中划线字符串转换为驼峰字符串，如将“position-absolute”转换为“positionAbsolute”。

通常情况我们能想到的方法大概就这样的：

const camelizeRE = /-(\w)/g
function myCamelize (str) {
	return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
}
// test
myCamelize('abc-cba') // abcCba

但是大师会怎样写呢？
用上cached方法，因为他们想得更加深远，或者说，他们经历过惨痛的教训，使得他们想得深远。

const camelize = cached(str => str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : ''))
// test
camelize('abc-cba') // abcCba

倘若我们不知道大神的写法，自己写出了myCamelize方法后还可能自鸣得意，甚至还想推广给其他小伙伴用。

如果有人不服的话，这里有测试代码

function testCamelize() {
  console.time('testCamelize')
  for(let i = 0; i < 1000000; i ++) {
    camelize('absolute-position')
  }
  console.timeEnd('testCamelize')
}
function testMyCamelize() {
  console.time('testMyCamelize')
  for(let i = 0; i < 1000000; i ++) {
    myCamelize('absolute-position')
  }
  console.timeEnd('testMyCamelize')
}
testCamelize() // 7.301ms
testMyCamelize() // 487.809ms

在用户量极大的软件产品（如某宝）中使用一个方法就有这么大的差距，那么这个差距最终带来的必然是收入的多少。

我大概知道自己收入这么少的原因了。。。

本次分享就到这里，感谢阅读