源码地址 github.com/vuejs/vue/b…

源码解析

emptyObject

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

通过冻结对象可以返回一个不可修改的对象。

export const emptyObject = Object.freeze({})

isUndef

校验这个值是否未定义或者为空

export function isUndef (v: any): boolean %checks{
  return v === undefined || v === null
}

isDef

校验参数值是否非定义切不为空

export function isDef (v: any): boolean %checks {
  return v !== undefined && v !== null
}

isTure

校验参数值是否等于真布尔值

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

isTure

校验参数值是否等于 isFalse

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

isPrimitive

检测值的类型是否为原始类型

/**
 * Check if value is primitive.
 */
export function isPrimitive (value: any): boolean %checks {
  return (
    typeof value === 'string' ||
    typeof value === 'number' ||
    // $flow-disable-line
    typeof value === 'symbol' ||
    typeof value === 'boolean'
  )
}

isObject

检测值的类型是否为对象切不为空

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

toRawType

获取一个值的原始类型字符串，例如 [object Object]。

const _toString = Object.prototype.toString

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

isPlainObject

严格的对象类型检查。仅对纯JavaScript对象返回true。

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

isRegExp

校验当前值的类型是否是正则表达式

const _toString = Object.prototype.toString
export function isRegExp (v: any): boolean {
  return _toString.call(v) === '[object RegExp]'
}

isValidArrayIndex

检查 val 是否为有效的数组索引

该全局 isFinite() 函数用来判断被传入的参数值是否为一个有限数值（finite number）。在必要情况下，参数会首先转为一个数值。

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

isPromise

检测该值是否存在并检测该值的属性中是否存在 .then 和 .catch 函数

export function isPromise (val: any): boolean {
  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 | void {
  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]
}

isBuiltInTag

检查标签是否为内置标签。

在 vue2 中组件如果携带 slot和component俩种属性的话那么则认定他为vue组件

export const isBuiltInTag = makeMap('slot,component', true)

isReservedAttribute

检查属性是否为保留属性。

检测该对象中是否有这些保留属性 key,ref,slot,slot-scope,is

export const isReservedAttribute = makeMap('key,ref,slot,slot-scope,is')

remove

移除数组中的指定移项

先校验是否为数组切能找到该值在数组中的索引并移除

export function remove (arr: Array<any>, item: any): Array<any> | void {
  if (arr.length) {
    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<*>, key: string): boolean {
  return hasOwnProperty.call(obj, key)
}

cached

创建一个缓存对象的函数

通过闭包方式的方式来进行缓存

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

将一个由连字符分隔的字符串转换为驼峰式命名。

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

capitalize

将字符串转为大驼峰

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

hyphenate

连字符化一个camelCase字符串。

把匹配到的字符都转为小写

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

polyfillBind

代理bind 函数

给函数填充一下参数并返回新函数

function polyfillBind (fn: Function, ctx: Object): Function {
  function boundFn (a) {
    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
}

nativeBind

原生绑定函数

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

bind

如果该函数上存在bind返回原生bind否则则使用代理bind

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: Object, _from: ?Object): Object {
  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
}

noop

不执行任何操作。

为了让 Flow 正常工作而进行的存根参数，避免使用 ...rest 留下无用的转译代码

export function noop (a?: any, b?: any, c?: any) {}

no

不管传递什么就是返回 false

export const no = (a?: any, b?: any, c?: any) => false

identity

返回一个相同的数据

export const identity = (_: any) => _

genStaticKeys

生成一个包含编译器模块静态键的字符串。

export function genStaticKeys (modules: Array<ModuleOptions>): string {
  return modules.reduce((keys, m) => {
    return keys.concat(m.staticKeys || [])
  }, []).join(',')
}

looseEqual

检查两个值是否松散相等 - 即，如果它们是普通对象，则它们是否具有相同的属性？

export function looseEqual (a: any, b: any): boolean {
  if (a === b) return true
  const isObjectA = isObject(a)
  const isObjectB = isObject(b)
  if (isObjectA && isObjectB) {
    try {
      const isArrayA = Array.isArray(a)
      const isArrayB = Array.isArray(b)
      if (isArrayA && isArrayB) {
        return a.length === b.length && a.every((e, i) => {
          return looseEqual(e, b[i])
        })
      } else if (a instanceof Date && b instanceof Date) {
        return a.getTime() === b.getTime()
      } else if (!isArrayA && !isArrayB) {
        const keysA = Object.keys(a)
        const keysB = Object.keys(b)
        return keysA.length === keysB.length && keysA.every(key => {
          return looseEqual(a[key], b[key])
        })
      } else {
        /* istanbul ignore next */
        return false
      }
    } catch (e) {
      /* istanbul ignore next */
      return false
    }
  } else if (!isObjectA && !isObjectB) {
    return String(a) === String(b)
  } else {
    return false
  }
}

looseIndexOf

解析某个值是是否在数组中真实存在

export function looseIndexOf (arr: Array<mixed>, val: mixed): number {
  for (let i = 0; i < arr.length; i++) {
    if (looseEqual(arr[i], val)) return i
  }
  return -1
}

once

将函数包装成只会执行一次的函数

通过闭包方式缓存起状态值

export function once (fn: Function): Function {
  let called = false
  return function () {
    if (!called) {
      called = true
      fn.apply(this, arguments)
    }
  }
}

结语

深刻理解了 vue2 中的工具函数的封装

并了解了提前封装的意义在后续工作中可以进行更方便的调用

「源码共读」 第24期 | vue2工具函数

源码解析

emptyObject

isUndef

isDef

isTure

isTure

isPrimitive

isObject

toRawType

isPlainObject

isRegExp

isValidArrayIndex

isPromise

toString

toNumber

makeMap

isBuiltInTag

isReservedAttribute

remove

hasOwn

cached

camelize

capitalize

hyphenate

polyfillBind

nativeBind

bind

toArray

extend

toObject

noop

no

identity

genStaticKeys

looseEqual

looseIndexOf

once

结语

「源码共读」第24期 | vue2工具函数