前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 源码解析之工具方法

Vue 源码解析之工具方法

作者头像
公众号---人生代码
发布2021-03-16 12:22:20
3980
发布2021-03-16 12:22:20
举报
文章被收录于专栏:人生代码

如何定义一个空对象

代码语言:javascript
复制
const emptyObject = Object.freeze({})

isUndef

检测 undefined, null

代码语言:javascript
复制
function isUndef (v) {
  return v === undefined || v === null
}

isDef

检测非 undefined, null

代码语言:javascript
复制
function isDef (v) {
  return v !== undefined && v !== null
}

isTrue

检测 true

代码语言:javascript
复制
function isTrue (v) {
  return v === true
}

isFalse

检测 false

代码语言:javascript
复制
function isFalse (v) {
  return v === false
}

isPrimitive

检测值是否是 Primitive

代码语言:javascript
复制
function isPrimitive (value) {
  return (
    typeof value === 'string' ||
    typeof value === 'number' ||
    // $flow-disable-line
    typeof value === 'symbol' ||
    typeof value === 'boolean'
  )
}

isObject

检测对象

代码语言:javascript
复制
export function isObject (obj) {
  return obj !== null && typeof obj === 'object'
}

toRawType

代码语言:javascript
复制
const _toString = Object.prototype.toString

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

isPlainObject

代码语言:javascript
复制
export function isPlainObject (obj) {
  return _toString.call(obj) === '[object Object]'
}

isRegExp

检测是否是正则表达式 export function isRegExp (v) { return _toString.call(v) === '[object RegExp]' }

isValidArrayIndex

检测数组下标是否越界

代码语言:javascript
复制
export function isValidArrayIndex (val) {
  const n = parseFloat(String(val))
  return n >= 0 && Math.floor(n) === n && isFinite(val)
}

isPromise

代码语言:javascript
复制
export function isPromise (val) {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}

toString

代码语言:javascript
复制
export function toString (val) {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
      ? JSON.stringify(val, null, 2)
      : String(val)
}

toNumber

代码语言:javascript
复制
export function toNumber (val) {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}

makeMap

代码语言:javascript
复制
export function makeMap (
  str,
  expectsLowerCase
) {
  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

代码语言:javascript
复制
export const isBuiltInTag = makeMap('slot,component', true)

isReservedAttribute

代码语言:javascript
复制
export const isReservedAttribute = makeMap('key,ref,slot,slot-scope,is')

remove

代码语言:javascript
复制
export function remove (arr, item) {
  if (arr.length) {
    const index = arr.indexOf(item)
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

hasOwn

代码语言:javascript
复制
const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn (obj, key) {
  return hasOwnProperty.call(obj, key)
}

cached

代码语言:javascript
复制
export function cached(fn) {
  const cache = Object.create(null)
  return (function cachedFn (str) {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }: any)
}

camelize

驼峰化

代码语言:javascript
复制
const camelizeRE = /-(\w)/g
export const camelize = cached((str) => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})

capitalize

代码语言:javascript
复制
export const capitalize = cached((str) => {
  return str.charAt(0).toUpperCase() + str.slice(1)
})

hyphenate

代码语言:javascript
复制
const hyphenateRE = /\B([A-Z])/g
export const hyphenate = cached((str) => {
  return str.replace(hyphenateRE, '-$1').toLowerCase()
})

bind

代码语言:javascript
复制
function polyfillBind (fn, ctx) {
  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
}

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

export const bind = Function.prototype.bind
  ? nativeBind
  : polyfillBind

toArray

将类似 array 转成真正的数组

代码语言:javascript
复制
export function toArray (list, start) {
  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

代码语言:javascript
复制
export function extend (to, _from) {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

toObject

/**

  • Merge an Array of Objects into a single Object. */
代码语言:javascript
复制
export function toObject (arr) {
  const res = {}
  for (let i = 0; i < arr.length; i++) {
    if (arr[i]) {
      extend(res, arr[i])
    }
  }
  return res
}

noop

占位函数

代码语言:javascript
复制
export function noop (a, b, c) {}

no

代码语言:javascript
复制
/**
 * Always return false.
 */
export const no = (a, b, c) => false

identity

代码语言:javascript
复制
/**
 * Return the same value.
 */
export const identity = (_) => _

once

代码语言:javascript
复制
/**
 * Ensure a function is called only once.
 */
export function once (fn: Function): Function {
  let called = false
  return function () {
    if (!called) {
      called = true
      fn.apply(this, arguments)
    }
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CryptoCode 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 如何定义一个空对象
  • isUndef
  • isDef
  • isTrue
  • isFalse
  • isPrimitive
  • isObject
  • toRawType
  • isPlainObject
  • isRegExp
  • isValidArrayIndex
  • isPromise
  • toString
  • toNumber
  • makeMap
  • isBuiltInTag
  • isReservedAttribute
  • remove
  • hasOwn
  • cached
  • camelize
  • capitalize
  • hyphenate
  • bind
  • toArray
  • extend
  • toObject
  • noop
  • no
  • identity
  • once
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档