【源码学习】Radash（五）Curry

1
import { chain } from 'radash'
2

3
const add = (y: number) => (x: number) => x + y
4
const mult = (y: number) => (x: number) => x * y
5
const addFive = add(5)
6
const double = mult(2)
7

8
const chained = chain(addFive, double)
9

10
chained(0) // => 10
11
chained(7) // => 24

1
import { chain } from 'radash'
2

3
type Deity = {
4
  name: string
5
  rank: number
6
}
7

8
const gods: Deity[] = [
9
  { rank: 8, name: 'Ra' },
10
  { rank: 7, name: 'Zeus' },
11
  { rank: 9, name: 'Loki' },
12
]
13

14
const getName = (god: Deity) => item.name
15
const upperCase = (text: string) => text.toUpperCase() as Uppercase<string>
16

17
const getUpperName = chain(getName, upperCase)
18

19
getUpperName(gods[0]) // => 'RA'
20
gods.map(getUpperName) // => ['RA', 'ZEUS', 'LOKI']

1
export function chain<T1 extends any[], T2, T3>(
2
  f1: (...arg: T1) => T2,
3
  f2: (arg: T2) => T3
4
): (...arg: T1) => T3
5
// ... 省略 按个数堆上去的函数重载
6
export function chain(...funcs: ((...args: any[]) => any)[]) {
7
  // 函数返回一个新的函数，这个新函数也接受任意数量的参数 args。
8
  return (...args: any[]) => {
9
    // 在返回的新函数内部，使用 reduce 方法将 funcs 数组中的函数按顺序组合起来。
10
    return funcs.slice(1).reduce(
11
      // reduce 方法的第一个参数是一个累加器 acc，第二个参数是 funcs 数组中的当前函数 fn。
12
      // reduce 方法会从 funcs 数组的第二个元素开始（即 funcs.slice(1)），依次将每个函数应用于前一个函数的返回值上，最终返回最后一个函数的结果。
13
      (acc, fn) => fn(acc),
14
      // 初始值：reduce 方法的初始值是 funcs 数组的第一个元素 funcs[0](...args)，
15
      // 即首先执行第一个函数，并将它的返回值作为后续函数的输入。
16
      funcs[0](...args)
17
    )
18
  }
19
}

1
import { compose } from 'radash'
2

3
const useZero = (fn: any) => () => fn(0)
4
const objectize = (fn: any) => (num: any) => fn({ num })
5
const increment =
6
  (fn: any) =>
7
  ({ num }: any) =>
8
    fn({ num: num + 1 })
9
const returnArg = (arg: any) => (args: any) => args[arg]
10

11
const composed = compose(useZero, objectize, increment, increment, returnArg('num'))
12

13
composed() // => 2

1
export function compose<F1Result, F1Args extends any[], F1NextArgs extends any[], LastResult>(
2
  f1: (next: (...args: F1NextArgs) => LastResult) => (...args: F1Args) => F1Result,
3
  last: (...args: F1NextArgs) => LastResult
4
): (...args: F1Args) => F1Result
5
// 同上，略
6
// 参数展开：compose 函数使用了 TypeScript 的剩余参数语法 ...funcs，这意味着它可以接受任意数量的函数作为参数
7
export function compose(...funcs: ((...args: any[]) => any)[]) {
8
  // 函数反转：使用 funcs.reverse() 将传入的函数数组反转，这样在后续的 reduce 操作中，函数的调用顺序是从最后一个函数开始，依次向前。
9
  // 函数组合：使用 reduce 方法对反转后的函数数组进行迭代。reduce 方法接受两个参数：一个累加器 acc 和当前值 fn。在每次迭代中，将 acc 作为参数传递给 fn，并将 fn(acc) 的结果赋值给 acc。这样，最终 reduce 返回的 acc 就是组合后的函数
10
  return funcs.reverse().reduce((acc, fn) => fn(acc))
11
}

1
import { debounce } from 'radash'
2

3
const makeSearchRequest = event => {
4
  api.movies.search(event.target.value)
5
}
6

7
// 基本用法
8
input.addEventListener('change', debounce({ delay: 100 }, makeSearchRequest))
9

10
// 取消 - debounce 返回的函数有一个 cancel 方法，调用该方法时将永久停止源函数被 debounce。
11
const debounced = debounce({ delay: 100 }, api.feed.refresh)
12
// ... sometime later
13
debounced.cancel()
14

15
// flush
16
// debounce返回的函数有一个flush方法，调用时会直接调用源函数。
17
// const debounced = debounce({ delay: 100 }, api.feed.refresh)
18
// ... sometime later
19
debounced.flush(event)
20

21
// 待处理 - isPending
22
// debounce 返回的函数有一个 isPending 方法，如果有任何挂起的调用，则调用该方法时将返回源函数。
23
debounced.isPending()

1
export type DebounceFunction<TArgs extends any[]> = {
2
  (...args: TArgs): void
3
  /**
4
   * Cancels the debounced function
5
   */
6
  cancel(): void
7
  /**
8
   * Checks if there is any invocation debounced
9
   */
10
  isPending(): boolean
11
  /**
12
   * Runs the debounced function immediately
13
   */
14
  flush(...args: TArgs): void
15
}
16
export const debounce = <TArgs extends any[]>(
17
  // 接收一个包含 delay 属性的对象，delay 表示延迟时间，单位为毫秒
18
  { delay }: { delay: number },
19
  // 接收一个函数 func，该函数接收任意类型的参数 TArgs，并返回任意类型的结果
20
  func: (...args: TArgs) => any
21
) => {
22
  let timer: NodeJS.Timeout | undefined = undefined
23
  let active = true
24

25
  const debounced: DebounceFunction<TArgs> = (...args: TArgs) => {
26
    if (active) {
27
      // 如果 active 为 true，则清除之前的定时器（如果存在），并设置一个新的定时器。
28
      // 定时器在延迟时间后执行 func(...args)，并将 timer 设置为 undefined
29
      clearTimeout(timer)
30
      timer = setTimeout(() => {
31
        active && func(...args)
32
        timer = undefined
33
      }, delay)
34
    } else {
35
      // 如果 active 为 false，则直接执行函数
36
      func(...args)
37
    }
38
  }
39
  debounced.isPending = () => {
40
    return timer !== undefined
41
  }
42
  debounced.cancel = () => {
43
    active = false
44
  }
45
  debounced.flush = (...args: TArgs) => func(...args)
46

47
  return debounced
48
}

1
import { throttle } from 'radash'
2

3
const onMouseMove = () => {
4
  rerender()
5
}
6

7
addEventListener('mousemove', throttle({ interval: 200 }, onMouseMove))

1
// 首先定义了一个类型 ThrottledFunction，它是一个函数类型，接受任意数量的参数并返回 void
2
export type ThrottledFunction<TArgs extends any[]> = {
3
  (...args: TArgs): void
4
  // 此外，它还包含一个 isThrottled 方法，用于检查当前是否有节流操作正在进行
5
  isThrottled(): boolean
6
}
7

8
export const throttle = <TArgs extends any[]>(
9
  // 函数接受两个参数：一个包含 interval 属性的对象
10
  { interval }: { interval: number },
11
  // 另一个需要被节流的函数 func
12
  func: (...args: TArgs) => any
13
) => {
14
  // 函数内部维护了一个 ready 标志
15
  // 和一个 timer 定时器。
16
  let ready = true
17
  let timer: NodeJS.Timeout | undefined = undefined
18

19
  // 节流逻辑：当 throttled 函数被调用时，
20
  const throttled: ThrottledFunction<TArgs> = (...args: TArgs) => {
21
    // 首先检查 ready 标志。如果 ready 为 false，表示当前有节流操作正在进行，函数直接返回，不执行 func。
22
    if (!ready) return
23

24
    // 如果 ready 为 true，则执行 func，
25
    func(...args)
26
    // 并将 ready 设置为 false，表示当前有节流操作正在进行
27
    ready = false
28
    // 然后设置一个定时器，在指定的时间间隔后，将 ready 设置为 true，表示可以再次执行 func。
29
    timer = setTimeout(() => {
30
      ready = true
31
      timer = undefined
32
    }, interval)
33
  }
34
  // 检查节流状态：isThrottled 方法通过检查 timer 是否为 undefined 来判断当前是否有节流操作正在进行
35
  throttled.isThrottled = () => {
36
    return timer !== undefined
37
  }
38
  return throttled
39
}

1
import { partial } from 'radash'
2

3
const add = (a: number, b: number) => a + b
4
const addFive = partial(add, 5)
5

6
addFive(2) // => 7

1
// 这个类型的作用是从一个数组 TItems 中移除 TItemsToRemove 数组中的元素。具体实现原理如下：
2
// 如果条件为真，则返回 TRest，即移除了 TItemsToRemove 中的元素后的剩余部分。
3
// 如果条件为假，则返回 TItems，即原数组不变。
4
type RemoveItemsInFront<
5
  TItems extends any[],
6
  TItemsToRemove extends any[]
7
  // TItems extends [...TItemsToRemove, ...infer TRest]：这是一个条件类型，用于检查 TItems 是否可以扩展为 TItemsToRemove 后面跟着任意元素（TRest）。
8
> = TItems extends [...TItemsToRemove, ...infer TRest]
9
  ? // 如果条件为真，则返回 TRest，即移除了 TItemsToRemove 中的元素后的剩余部分。
10
    TRest
11
  : // 如果条件为假，则返回 TItems，即原数组不变。
12
    TItems
13

14
// T：表示原始函数的参数类型数组
15
// TA：表示部分应用的参数类型数组，它是 T 的子集
16
// R：表示原始函数的返回类型
17
export const partial = <T extends any[], TA extends Partial<T>, R>(
18
  // 原始函数，它接受一个参数数组 T 并返回一个值 R
19
  fn: (...args: T) => R,
20
  // 部分应用的参数，类型为 TA
21
  ...args: TA
22
) => {
23
  // 返回一个新的函数，这个新函数接受剩余的参数（类型为 RemoveItemsInFront<T, TA>）
24
  // 然后将所有参数合并后调用原始函数 fn
25
  return (...rest: RemoveItemsInFront<T, TA>) => fn(...([...args, ...rest] as T))
26
}

1
import { partob } from 'radash'
2

3
const add = (props: { a: number; b: number }) => props.a + props.b
4

5
const addFive = partob(add, { a: 5 })
6

7
addFive({ b: 2 }) // => 7

1
export const partob = <T, K, PartialArgs extends Partial<T>>(
2
  // 参数 fn：这是一个函数，它接受一个类型为 T 的参数，并返回一个类型为 K 的值
3
  fn: (args: T) => K,
4
  // 参数 argobj：这是一个对象，它的类型是 PartialArgs，即 T 的部分类型
5
  argobj: PartialArgs
6
) => {
7
  // partob 函数返回一个新的函数，这个新函数接受一个类型为
8
  // Omit<T, keyof PartialArgs> 的参数，并返回一个类型为 K 的值
9
  return (restobj: Omit<T, keyof PartialArgs>): K =>
10
    // 实现：新函数在调用时，会使用 argobj 和传入的剩余参数来调用 fn
11
    // 它会将 argobj 和剩余参数合并成一个完整的 T 类型的对象，然后传递给 fn
12
    fn({
13
      ...(argobj as Partial<T>),
14
      ...(restobj as Partial<T>),
15
    } as T)
16
}

1
import { proxied } from 'radash'
2

3
type Property = 'name' | 'size' | 'getLocation'
4

5
const person = proxied((prop: Property) => {
6
  switch (prop) {
7
    case 'name':
8
      return 'Joe'
9
    case 'size':
10
      return 20
11
    case 'getLocation'
12
      return () => 'here'
13
  }
14
})
15

16
person.name // => Joe
17
person.size // => 20
18
person.getLocation() // => here

1
export const proxied = <T, K>(
2
  // handler 是一个函数，接受一个类型为 T 的参数，并返回一个类型为 K 的值
3
  handler: (propertyName: T) => K
4
): Record<string, K> => {
5
  // 代理对象：proxied 函数返回一个通过 Proxy 创建的代理对象。这个代理对象拦截对它的属性访问
6
  return new Proxy(
7
    {},
8
    // 拦截器：代理对象的 get 拦截器会调用 handler 函数，并将被访问的属性名作为参数传递给 handler
9
    // handler 函数的返回值将作为代理对象属性的值。
10
    {
11
      get: (target, propertyName: any) => handler(propertyName),
12
    }
13
  )
14
}