封装常用的工具函数助力业务开发（含react hooks/vue hooks）

哈喽，我是柠檬酱👏

工欲善其事必先利其器,咱们来扒一扒开源库 qiankun/micro app/icestark/wujie/ahooks/hooks等用到的一些工具函数

数据类型判断

基本数据类型除了null都可以通过typeof判断

Object.toString.call可以判断所有的数据类型

判断所有的数据类型

typescript 复制代码

type AllTypes =
  | 'Number'
  | 'Object'
  | 'BigInt'
  | 'Boolean'
  | 'Undefined'
  | 'Null'
  | 'Array'
  | 'Symbol'
  | 'Math'
  | 'JSON'
  | 'Date'
  | 'RegExp'
  | 'Error'
  | 'Window'
  | 'HTMLDocument';

const checkTypes = (type: AllTypes) => <T>(value: unknown): value is T => Object.prototype.toString.call(value).slice(8, -1) === type;

是否为字符串

csharp 复制代码

 function isString (target: unknown): target is string {
  return typeof target === 'string'
}

是否为null

csharp 复制代码

function isNull (target: unknown): target is null {
  return target === null
}

是否为undefined

javascript 复制代码

function isUndefined (target: unknown): target is undefined {
  return target === undefined
}

是否为布尔值

vbnet 复制代码

function isBoolean (target: unknown): target is boolean {
  return typeof target === 'boolean'
}

是否为数字类型

csharp 复制代码

function isNumber (target: unknown): target is Number {
  return typeof target === 'number'
}

是否为函数

vbnet 复制代码

function isFunction (target: unknown): target is Function {
  return typeof target === 'function'
}

是否为对象

vbnet 复制代码

function isObject (target: unknown): target is Object {
  return typeof target === 'object'
}

是否为promise

typescript 复制代码

const toString = Object.prototype.toString
function isPromise (target: unknown): target is Promise<unknown> {
  return toString.call(target) === '[object Promise]'
}

是否为plainObject

plainObject和普通对象有什么区别？

通过对象字面量或new Object创建的对象叫plainObject

typeof null === object但是它不是plainObject

typescript 复制代码

// micro app中isPlainObject判断
const toString = Object.prototype.toString
function isPlainObject <T = Record<PropertyKey, unknown>> (target: unknown): target is T {
  return toString.call(target) === '[object Object]'
}

// react中plainObject判断
function isPlainObject(target){
 if(target ===null || typeof target !== object){
   return false
 }
}

是否为构造函数

拆解下面的正则表达式:

matlab 复制代码

/^function\s+[A-Z]/.test(targetStr)

\s是[ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符,记忆：s代表space，空格
+为量词表示{1,},至少出现1次
$A-Z\]表示大写字母A到Z$

arduino 复制代码

/^class\s+/.test(targetStr)

这段正则表明以class开头命名，至少有一个空格的字符串

typescript 复制代码

function isConstructor (target: unknown): boolean {
  // 构造函数的前提：它本身是一个函数
  if (isFunction(target)) {
    // 函数转字符串
    const targetStr = target.toString()
    return (
      target.prototype?.constructor === target &&
      Object.getOwnPropertyNames(target.prototype).length > 1
    ) ||
      /^function\s+[A-Z]/.test(targetStr) ||
      /^class\s+/.test(targetStr)
  }
  // 不是函数返回false
  return false
}

浏览器检测

检测浏览器类型通过navigator.userAgent判断即可

是否为谷歌浏览器

javascript 复制代码

function isChomre():boolean{
 return /Chrome/.test(navigator.userAgent)
}

是否为safari浏览器

javascript 复制代码

function isSafari (): boolean {
  return /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
}

是否为火狐浏览器

arduino 复制代码

function isFireFox (): boolean {
  return navigator.userAgent.indexOf('Firefox') > -1
}

文件类型判断

是否为内联js

php 复制代码

function isInlineScript (address: string): boolean {
  return address.startsWith('inline-')
}

shadowDOM判断

csharp 复制代码

function isShadowRoot (target: unknown): target is ShadowRoot {
  return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot
}

link标签

csharp 复制代码

function isLinkElement (target: unknown): target is HTMLLinkElement {
  return (target as HTMLLinkElement)?.tagName?.toUpperCase() === 'LINK'
}

style标签

csharp 复制代码

function isStyleElement (target: unknown): target is HTMLStyleElement {
  return (target as HTMLStyleElement)?.tagName?.toUpperCase() === 'STYLE'
}

script标签

csharp 复制代码

function isScriptElement (target: unknown): target is HTMLScriptElement {
  return (target as HTMLScriptElement)?.tagName?.toUpperCase() === 'SCRIPT'
}

iframe标签

csharp 复制代码

 function isIFrameElement (target: unknown): target is HTMLIFrameElement {
  return (target as HTMLIFrameElement)?.tagName?.toUpperCase() === 'IFRAME'
}

是否为div元素

csharp 复制代码

function isDivElement (target: unknown): target is HTMLDivElement {
  return (target as HTMLDivElement)?.tagName?.toUpperCase() === 'DIV'
}

是否为img元素

csharp 复制代码

function isImageElement (target: unknown): target is HTMLImageElement {
  return (target as HTMLImageElement)?.tagName?.toUpperCase() === 'IMG'
}

是否为URL

php 复制代码

function isURL (target: unknown): target is URL {
  return target instanceof URL || !!(target as URL)?.href
}

是否支持scope css

javascript 复制代码

// qiankun写法
export type FrameworkConfiguration = QiankunSpecialOpts & ImportEntryOpts & StartOpts;
function isEnableScopedCSS(sandbox: FrameworkConfiguration['sandbox']) {
  if (typeof sandbox !== 'object') {
    return false;
  }

  if (sandbox.strictStyleIsolation) {
    return false;
  }

  return !!sandbox.experimentalStyleIsolation;
}

URL处理

给url增加协议名

globalThis是通用的写法（兼容浏览器和Node），浏览器环境使用window.location.protocol即可

typescript 复制代码

function addProtocol (url: string): string {
  return url.startsWith('//') ? `${globalThis.location.protocol}${url}` : url
}

查询对象转字符串

用途：http请求处理

csharp 复制代码

function stringifyQuery (queryObject: LocationQueryObject): string {
  let result = ''

  for (const key in queryObject) {
    const value = queryObject[key]
    if (isNull(value)) {
      result += (result.length ? '&' : '') + key
    } else {
      const valueList: LocationQueryValue[] = isArray(value) ? value : [value]

      valueList.forEach(value => {
        if (!isUndefined(value)) {
          result += (result.length ? '&' : '') + key
          if (!isNull(value)) result += '=' + value
        }
      })
    }
  }

  return result
}

去空格

typescript 复制代码

 function trim (str: string): string {
  return str ? str.replace(/^\s+|\s+$/g, '') : ''
}

nextTick

javascript 复制代码

function nextTick(cb: () => any): void {
  Promise.resolve().then(cb);
}

sleep

面试官：实现一个sleep函数，要求等待指定的时机再执行

javascript 复制代码

// ms为毫秒数
function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

执行钩子函数

plugins为多个钩子函数（数组），遍历plugins，保留plugin[hookName]存在的且为函数类型的，将传参arg传入单个plugin依次执行

scss 复制代码

function execHooks(plugins: Array<plugin>, hookName: string, ...args: Array<any>): void {
  try {
    if (plugins && plugins.length > 0) {
      plugins
        .map((plugin) => plugin[hookName])
        .filter((hook) => isFunction(hook))
        .forEach((hook) => hook(...args));
    }
  } catch (e) {
    error(e);
  }
}

requestIdleCallback

兼容处理

javascript 复制代码

// wujie写法
 const requestIdleCallback = window.requestIdleCallback || ((cb: Function) => setTimeout(cb, 1));

函数柯里化