# 纯函数
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
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
2
# 第二种,第一个参数正则,第二个参数字符串
const str = '参数123字符串'.replace(/\d+/g, '啊啊啊')
// 参数啊啊啊字符串
1
2
2
# 第三种,第一个参数正则,第二个参数带$号字符串
const str = '参数123字符串456新增'.replace(/(\d+)(\D)/g, '$1')
// "参数123符串456增"
// 正则里面 => (第一个)(第二个) 替换为 (第一个)
// (123)(字) 替换为 (123)
// 记住要加括号
1
2
3
4
5
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
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
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
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
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
← 简单双向绑定