源码共读 vue2工具函数

我正在参与掘金会员专属活动-源码共读第一期，点击参与

前言

从易到难开始学习源码。学习源码不是为了面试，只是想揭开别人造的轮子背后的神秘面纱。同时也希望在此过程中提升自己的能力和开拓视野。

准备工作

首页克隆一份 vue2源码 到我们本地，找到vue2工具函数文件路径 src/shared/util.js

安装依赖 pnpm install

安装完成依赖之后，我们先测试下，单元测试

pnpm test:unit

看到上面的输入之后，证明我们环境正常了

阅读源码

我在这里直接下载的最新版的代码，最新版vue2在工具函数里使用的是 typeScript 语法，若川建议大家也可以直接看打包后的源代码。我感觉我的 typeScript 还行（不行就现学呗），所以直接阅读的是 src/shared/util.js 文件。

emptyObject 返回一个空对象且不可修改

export const emptyObject: Record<string, any> = Object.freeze({})

Record：是 ts 中用来用来映射对象的key 和 value

isArray 判断是否是数组类型

export const isArray = Array.isArray

isUndef 判断是否是 undefined 或者 null 类型

export function isUndef(v: any): v is undefined | null {
  return v === undefined || v === null
}

isDef 判断不是 undefined 并且不是 null

export function isDef<T>(v: T): v is NonNullable<T> {
  return v !== undefined && v !== null
}

isTrue 判断是true

export function isTrue(v: any): boolean {
  return v === true
}

isFalse 判断是false

export function isFalse(v: any): boolean {
  return v === false
}

isPrimitive 判断是否为原始值

export function isPrimitive(value: any): boolean {
  return (
    typeof value === 'string' ||
    typeof value === 'number' ||
    // $flow-disable-line
    typeof value === 'symbol' ||
    typeof value === 'boolean'
  )
}

isFunction 判断是否为 function 类型

export function isFunction(value: any): value is (...args: any[]) => any {
  return typeof value === 'function'
}

isObject 判断是否为 object 类型

export function isObject(obj: any): boolean {
  return obj !== null && typeof obj === 'object'
}

_toString 获取值的原始类型字符串

const _toString = Object.prototype.toString

toRawType 返回原始类型的值

export function toRawType(value: any): string {
  return _toString.call(value).slice(8, -1)
}

isPlainObject 判断是否为 object 类型

export function isPlainObject(obj: any): boolean {
  return _toString.call(obj) === '[object Object]'
}

isRegExp 判断是否为 正则 类型

export function isRegExp(v: any): v is RegExp {
  return _toString.call(v) === '[object RegExp]'
}

isValidArrayIndex 判断是否为有值的数组

export function isValidArrayIndex(val: any): boolean {
  const n = parseFloat(String(val))
  return n >= 0 && Math.floor(n) === n && isFinite(val)
}

isPromise 判断是否为 Promise 类型

export function isPromise(val: any): val is Promise<any> {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}

toString 将值转成字符串类型

export function toString(val: any): string {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
    ? JSON.stringify(val, null, 2)
    : String(val)
}

toNumber 将值转成数字类型

export function toNumber(val: string): number | string {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}

makeMap 将字符串转成小写

export function makeMap(
  str: string,
  expectsLowerCase?: boolean
): (key: string) => true | undefined {
  const map = Object.create(null)
  const list: Array<string> = str.split(',')
  for (let i = 0; i < list.length; i++) {
    map[list[i]] = true
  }
  return expectsLowerCase ? val => map[val.toLowerCase()] : val => map[val]
}

remove 删除数组中的某一项

export function remove(arr: Array<any>, item: any): Array<any> | void {
  const len = arr.length
  if (len) {
    // fast path for the only / last item
    if (item === arr[len - 1]) {
      arr.length = len - 1
      return
    }
    const index = arr.indexOf(item)
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

hasOwn 检查对象下是否有某个属性

const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn(obj: Object | Array<any>, key: string): boolean {
  return hasOwnProperty.call(obj, key)
}

cached 闭包缓存，可用于缓存版本

export function cached<R>(fn: (str: string) => R): (sr: string) => R {
  const cache: Record<string, R> = Object.create(null)
  return function cachedFn(str: string) {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }
}

camelize 将字符串改成小驼峰

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

capitalize 字符串转成大写

export const capitalize = cached((str: string): string => {
  return str.charAt(0).toUpperCase() + str.slice(1)
})

hyphenate 小驼峰转成连字符

const hyphenateRE = /\B([A-Z])/g
export const hyphenate = cached((str: string): string => {
  return str.replace(hyphenateRE, '-$1').toLowerCase()
})

bind 重新bind, 使其兼容低版本

function polyfillBind(fn: Function, ctx: Object): Function {
  function boundFn(a: any) {
    const l = arguments.length
    return l
      ? l > 1
        ? fn.apply(ctx, arguments)
        : fn.call(ctx, a)
      : fn.call(ctx)
  }

  boundFn._length = fn.length
  return boundFn
}

function nativeBind(fn: Function, ctx: Object): Function {
  return fn.bind(ctx)
}

// @ts-expect-error bind cannot be `undefined`
export const bind = Function.prototype.bind ? nativeBind : polyfillBind

toArray 将类数组对象转换为真实数组

export function toArray(list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}

extend 将两个对象合并

export function extend(
  to: Record<PropertyKey, any>,
  _from?: Record<PropertyKey, any>
): Record<PropertyKey, any> {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

toObject 将数组转成对象

export function toObject(arr: Array<any>): object {
  const res = {}
  for (let i = 0; i < arr.length; i++) {
    if (arr[i]) {
      extend(res, arr[i])
    }
  }
  return res
}

单元测试

在准备工作环节，运行了vue内部的单元测试，这里我们写个单元测试文件，测试下上面的工具函数

第一步：创建文件 src/test/utils/modules/index.spec.ts

第二步：写个单元测试实例

import { isUndef, isDef } from "shared/util.ts"

describe('utils-test', () => {
  it('test isUndef and isDef', () => {
    expect(isUndef(null)).toEqual(true)
    expect(isDef(null)).toEqual(false)
  })
})

第三步：在 package.json 文件中创建一条命令

"test:utils": "vitest run test/utils",

第四步：运行命令 pnpm test:utils

出现上面绿色的信息代表单元测试通过

总结

本文通过阅读 vue2 工具函数文件学到很多实用的函数，也学到了关于函数命名的一些规则

工具函数命名一定要规范、其次在封装函数的时候，要明确函数的功能（功能一定单一切不能掺杂到业务逻辑）

关于以上代码的实现，我也会持续学习，有机会拿到项目上，根据项目业务场景使用。

以上是我对本节学习和理解，如果有什么不对的地方，还请指正！