# 纯函数

props 数据-分隔改成驼峰，有下面的代码

/**
 * Create a cached version of a pure function.
 * 创建纯函数的缓存版本
 */
export function cached<F: Function> (fn: F): F {
  const cache = Object.create(null)
  return (function cachedFn (str: string) {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }: any)
}

/**
 * Camelize a hyphen-delimited string.
 * 对-分隔的字符串进行驼峰处理
 */
const camelizeRE = /-(\w)/g
export const camelize = cached((str: string): string => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})

name = camelize(val)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

其中包含两个知识点

replace
纯函数

# repace

# 第一种，两个参数都是字符串

const str = '参数123字符串'.replace('123', '啊啊啊')
// 参数啊啊啊字符串

1
2

# 第二种，第一个参数正则，第二个参数字符串

const str = '参数123字符串'.replace(/\d+/g, '啊啊啊')
// 参数啊啊啊字符串

1
2

# 第三种，第一个参数正则，第二个参数带$号字符串

const str = '参数123字符串456新增'.replace(/(\d+)(\D)/g, '$1')
// "参数123符串456增"
// 正则里面 =>  (第一个)(第二个) 替换为 (第一个)
//             (123)(字) 替换为 (123)
// 记住要加括号

1
2
3
4
5

# 第四种，第一个参数正则，第二个参数函数

// 不加括号
const str = '参数123字符串456新增'.replace(/\d+/g, function(arg1, arg2, arg3) {
  console.log('arg1:', arg1)
  console.log('arg2:', arg2)
  console.log('arg3:', arg3)
  return '*'
})
// "参数*字符串*新增"

arg1: 123                  // 第一个匹配的字符串
arg2: 2                    // 第一个匹配的字符串的位置
arg3: 参数123字符串456新增   // 原字符串
arg1: 456                 // 第二个匹配的字符串
arg2: 8                   // 第二个匹配的字符串的位置
arg3: 参数123字符串456新增  // 原字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 加括号
const str = '参数123字符串456新增'.replace(/(\d+)(\D)/g, function(arg1, arg2, arg3, arg4, arg5) {
  console.log('arg1:', arg1)
  console.log('arg2:', arg2)
  console.log('arg3:', arg3)
  console.log('arg4:', arg4)
  console.log('arg5:', arg5)
  return '*'
})
// "参数*符串*增"

arg1: 123字  // 第一个匹配的字符串
arg2: 123   // 第一个匹配的字符串第一个括号匹配内容
arg3: 字    // 第一个匹配的字符串第二个括号匹配内容
arg4: 2    // 第一个匹配的字符串的位置
arg5: 参数123字符串456新增  // 原字符串

arg1: 456新
arg2: 456
arg3: 新
arg4: 8
arg5: 参数123字符串456新增

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

回到代码中

TIP

str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') 这里用的是repace第四种加括号

# 纯函数

TIP

纯函数是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。

源码改下

function cached(fn){
  const cache = Object.create(null)
  return function cachedFn (str) {
    const hit = cache[str]
    if (hit) {
      console.log(str + '取缓存')
      return hit
    } else {
      console.log(str + '执行fn')
      cache[str] = fn(str)
      return cache[str]
    }
  }
}

const camelizeRE = /-(\w)/g
const camelize = cached(str => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})

const str1 = camelize('abc-def-g')
console.log('str1:', str1)
const str2 = camelize('abc-def-g')
console.log('str2:', str2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

结果

abc-def-g执行fn
str1: abcDefG
abc-def-g取缓存
str2: abcDefG

1
2
3
4

参考 https://segmentfault.com/a/1190000008787668
参考 https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch3.html#%E8%BF%BD%E6%B1%82%E2%80%9C%E7%BA%AF%E2%80%9D%E7%9A%84%E7%90%86%E7%94%B1

← 简单双向绑定