vue3部分工具函数

Vue3 的部分工具函数

JavaScript 的模块化标准有 cjs、esm、amd，umd，iife。

cjs -> CommonJS，只能在 NodeJS 上运行，使用 require("module") 读取并加载模块，不支持浏览器

esm -> ECMAScript Module，现在vue3使用的模块方案，使用 import export 来管理依赖，浏览器直接通过<script type="module"> 即可使用该写法。NodeJS 可以通过使用 mjs 后缀或者在 package.json 添加 "type": "module" 来使用。

// 移除数组的一项
export const remove = <H>(arr: H[], el: H) => {
  const i = arr.indexOf(el)
  if (i > -1) {
    arr.splice(i, 1)
  }
};
// 判断一个属性是否属于某个对象
const hasOwnProperty = Object.prototype.hasOwnProperty
export const hasOwn = (
  val: object,
  key: string | symbol
): key is keyof typeof val => hasOwnProperty.call(val, key)
// 判断是否数字
export const isNumber = (val: unknown): val is number => typeof val === 'number';
// 判断是否字符串
export const isString = (val: unknown): val is string => typeof val === 'string';
// 判断是否Symbol
export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol';
// 判断是否函数
export const isFunction = (val: unknown): val is Function => typeof val === 'function';
// 判断数组
export const isArray = Array.isArray;
// 判断是否对象（不包括 null）
export const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object';
// 对象转字符串
export const objectToString = Object.prototype.toString;
export const toTypeString = (value: unknown): string => objectToString.call(value);
// 判断是否 Map 对象
export const isMap = (val: unknown): val is Map<any, any> => toTypeString(val) === '[object Map]';
// 判断是否 Set 对象
export const isSet = (val: unknown): val is Set<any> => toTypeString(val) === '[object Set]';
// 判断是否 Promise
export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
  return isObject(val) && isFunction(val.then) && isFunction(val.catch)
};
// 对象转字符串，截取第八位到倒数第二位
export const toRawType = (value: unknown): string => {
  // extract "RawType" from strings like "[object RawType]"
  return toTypeString(value).slice(8, -1)
};
// 判断是否为普通对象
export const isPlainObject = (val: unknown): val is object => toTypeString(val) === '[object Object]';
// 判断值是否有变化
const hasChanged = (value: any, oldValue: any): boolean => !Object.is(value, oldValue);
// 定义一个不可枚举的对象
export const def = (obj: object, key: string | symbol, value: any) => {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: false,
    value
  })
}
// 转为数字
export const toNumber = (val: any): any => {
    const n = parseFloat(val)
    return isNaN(n) ? val : n
 }
// 缓存字符串的函数
const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
  const cache: Record<string, string> = Object.create(null)
  return ((str: string) => {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }) as any
}

Tip

const babelParserDefaultPlugins = ['bigInt'] as const 语法叫 const 断言，它可以创建完整的 readonly 对象（只读状态），编译器可以通过 as const 推断出可用于的最具体的表达类型。

猜你喜欢