本周涉及内容

  • vue 插槽
  • 函数柯里化
  • 装饰者模式 && 装饰器
  • 函数式编程 && 命令式编程
  • proxy
  • css加速
  • cdn缓存

vue插槽slot

函数柯里化

  • 函数参数固定
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const curry2 = (fn) => {
      return function judge(...args) {
        if (args.length === fn.length) {
          return fn(...args)
        } else {
          return (...arg) => {
            return judge(...args, ...arg)
          }
        }
      }
    }
    const add2 = (a,b,c) => a + b + c;
    const curryAdd2 = curry2(add2)
    console.log(curryAdd2(1)(2)(3)) // 6
    console.log(curryAdd2(1, 2)(3)) // 6
    console.log(curryAdd2(1, 2)(3)(4)) // curryAdd2(...)(...) is not a function
  • 参数不固定
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

    const addFn = (...arr) => {
      console.log(arr, 'arr', Object.prototype.toString.call(arr));
      return arr.reduce((a,b) => a +b )
    } 
    const curry = (fn) => {
      let arr = []
      return function temp(...args) {
        if (args.length) {
          arr = [...arr, ...args]
          return temp
        } else {
          console.log(`arr`, arr);
          const val = fn.apply(this, arr)
          arr = []
          return val
        }
      }
    }
    const curryAdd = curry(addFn)
    const test1 = curryAdd(1)(2)(3)()
    const test2 = curryAdd(1, 2)(3)(4)()
    const test3 = curryAdd(1, 2)(3, 4)(5, 6)()
    console.log(test1) // 6
    console.log(test2) // 10
    console.log(test3); // 21

装饰者模式 && 装饰器(Decorator)