麦谷 | 第17组 | 第24期 | vue2工具函数

今天来学习 Vue 2 工具函数 初学者也能看懂的 Vue2 源码中那些实用的基础工具函数

关于如何下载Vue 2 的源码，我这里就不多说了，其实Vue 2 的工具函数源码很简单。

如何一个冻结一个对象

// 冻结一个空对象
export const emptyObject = Object.freeze({})

判断是否是undefined

// 判断是否是undefined
export function isUndef (v: any): boolean %checks {
  return v === undefined || v === null
}

判断是否是未定义

// 判断是否是未定义
export function isDef (v: any): boolean %checks {
  return v !== undefined && v !== null
}

判断是否为true

// 判断是否为true
export function isTrue (v: any): boolean %checks {
  return v === true
}

判断是否是false

// 判断是否是false
export function isFalse (v: any): boolean %checks {
  return v === false
}

判断是否是除了 null 以外的原始值

// 判断是否是除了 null 以外的原始值
export function isPrimitive (value: any): boolean %checks {
  return (
    typeof value === 'string' ||
    typeof value === 'number' ||
    // $flow-disable-line
    typeof value === 'symbol' ||
    typeof value === 'boolean'
  )
}

判断是否为 object 或 null

// 判断是否为 object 或 null
export function isObject (obj: mixed): boolean %checks {
  return obj !== null && typeof obj === 'object'
}

获取 Object.prototype.toString

// 获取 Object.prototype.toString
const _toString = Object.prototype.toString

通用的类型判断 判断类型可以达到14种

// 通用的类型判断 判断类型可以达到14种
export function toRawType (value: any): string {
  return _toString.call(value).slice(8, -1)
}

判断 obj 类型是否为对象

// 判断 obj 类型是否为对象
export function isPlainObject (obj: any): boolean {
  return _toString.call(obj) === '[object Object]'
}

判断是否 v 是 正则表达式

// 判断是否 v 是 正则表达式
export function isRegExp (v: any): boolean {
  return _toString.call(v) === '[object RegExp]'
}

判断数组的索引

// 判断数组的索引
export function isValidArrayIndex (val: any): boolean {
  const n = parseFloat(String(val))
  return n >= 0 && Math.floor(n) === n && isFinite(val)
}

判断是否为 Promise 对象

// 判断是否为 Promise 对象
export function isPromise (val: any): boolean {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}

将 val 装换为 string 类型

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

将 string 类型的数装换为数字，如果是字符串就直接返回，否则就返回对应的数字

// 将 string  类型的数装换为数字，如果是字符串就直接返回，否则就返回对应的数字
export function toNumber (val: string): number | string {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}

传入一个以逗号分隔的字符串，生成一个 map(键值对)，并且返回一个函数检测 key 值在不在这个 map 中

//传入一个以逗号分隔的字符串，生成一个 map(键值对)，并且返回一个函数检测 key 值在不在这个 map 中。第二个参数是小写选项。
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]
}

是否是内置的 tag

//是否是内置的 tag
export const isBuiltInTag = makeMap('slot,component', true)

是否是保留的属性

// 是否是保留的属性
export const isReservedAttribute = makeMap('key,ref,slot,slot-scope,is')

移除数组中的中一项

//移除数组中的中一项
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)
    }
  }
}

检测是否是自己的属性 不包括原型链上的属性

 // 检测是否是自己的属性 不包括原型链上的属性
const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn (obj: Object | Array<*>, key: string): boolean {
  return hasOwnProperty.call(obj, key)
}

利用闭包特性，缓存数据

// 利用闭包特性，缓存数据
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)
}

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

连字符转小驼峰

// 将当前字符转为大驼峰
export const capitalize = cached((str: string): string => {
  return str.charAt(0).toUpperCase() + str.slice(1)
})

小驼峰转连字符

// 小驼峰转连字符
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) {
    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
}

让fn的this指向ctx

// 让fn的this指向ctx
function nativeBind (fn: Function, ctx: Object): Function {
  return fn.bind(ctx)
}

重写Function上的bindF方法

// 重写Function上的bindF方法
export const bind = Function.prototype.bind
  ? nativeBind
  : polyfillBind

将一个类数组装换为数组

// 将一个类数组装换为数组
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
}

从一个对象中拷贝值到另一个对象中,合并

// 从一个对象中拷贝值到另一个对象中,合并
export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

转换为对象

// 转换为对象
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
}

空函数

// 空函数
export function noop (a?: any, b?: any, c?: any) {}

一直返回false

// 一直返回false
export const no = (a?: any, b?: any, c?: any) => false

返回参数本身

// 返回参数本身
export const identity = (_: any) => _

生成静态属性

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

宽松相等

// 宽松相等
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
  }
}

宽松的indexOf

// 宽松的indexOf
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
}

确保只执行一次

// 确保只执行一次
export function once (fn: Function): Function {
  let called = false
  return function () {
    if (!called) {
      called = true
      fn.apply(this, arguments)
    }
  }
}

Vue 2 中的工具函数很简单，希望未来可以在项目中用到这些工具函数。