utils-lib-js

介绍

JavaScript工具函数，封装的一些常用的js函数

软件架构

软件架构说明

安装教程

1. pnpm i
2. pnpm build

使用说明

1. pnpm build（构建）
2. pnpm debug（调试源码）

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

功能

接口：

export type IKey = string | symbol | number

对象类型

export interface IObject { [key: IKey]: T | IObject }

export interface IPromise extends IObject { promise: Promise resolve: (res: any) => unknown reject: (err: any) => unknown }

export type IInstance = { _instance: Function } & T

export type IDemoteArray = Array<IDemoteArray | T>

base

/**产生区间随机数

• @param {number} min 最小区间
• @param {number} max 最大区间
• @param {boolean} bool 包含最大值
• @return {number} 随机数 **/

export type IRandomNum = (min: number, max: number, bool?: boolean) => number

/**获取url的参数

• @param {string} url 待截取的地址
• @return {object} 参数对象 **/

export type IUrlSplit = (url: string) => IObject

/**添加url的参数

• @param {string} url 待添加参数的地址
• @param {object} query 待添加的参数
• @return {string} 添加参数后的url **/

export type IUrlJoin = (url: string, query: object) => string

/**获取数据类型

• @param {any} data 待检测数据
• @return {string} 数据类型 **/

export type IGetType = (data: any) => typeof data | T[keyof T] | "null";

/**批量判断数据类型

• @param {any} data 待检测数据
• @param {any} whiteList 数据类型名单
• @return {boolean} 是否在白名单中 **/

export type IGetTypeByList = (data: any, whiteList: string[]) => boolean;

object

/**lodash中的 _.get()，获取对象某级属性

• @param {IObject} object 目标对象
• @param {string} key 对象层级
• @param {any} defaultValue 未取得时默认值
• @return {IObject[IKey]} 对象某个属性 **/

export type IGetValue = <T, U = IObject | IObject[IKey]>(object: U, key: string, defaultValue?: any) => U

/**lodash中的 _.set()，赋值对象某级属性

• @param {IObject} object 目标对象
• @param {string} key 对象层级
• @param {any} value 需要赋的值
• @return {IObject} 目标对象 **/

export type ISetValue = (object: IObject, key: string, value?: any) => IObject

/**对象混入

• @param {IObject} target 目标对象
• @param {string} source 需要混入的对象集合
• @param {boolean} overwrite 是否重写覆盖原有属性
• @return {IObject} 目标对象 **/

export type IMixIn = <U extends IObject>(target?: U, source?: IObject, overwrite?: boolean) => U

/**枚举值反向映射

• @param {IObject} target 目标对象
• @return {IObject} 目标对象 **/

export type IEnumInversion = (target: IObject) => IObject

/**对象复制

• @param {IObject} target 目标对象
• @return {IObject} 目标对象 **/

export type ICloneDeep = (target?: any) => any

/**生成 对象 类型的初始值

• @param {string} type 数据类型
• @param {any} __init 初始值
• @return {any} 目标对象 **/

export type ICreateObjectVariable = (type: string, source?: any) => any

/**Object.create 根据源对象产出新对象

• @param {Function|Object} source 源对象
• @return {Function|Object} 对象产物 **/

export type ICreateObject = <T, U extends T>(source: T) => U

/**类的继承

• @param {Function} source 源对象
• @return {Function} 继承产物 **/

export type IInherit = (source: T, target?: Function) => Function

/**生成类的实例单例

• @param {Function} classProto 类
• @param {Boolean} overwrite 是否覆盖已有单例
• @param {any[]} params 构造函数的参数
• @return {IObject} 实例化的单例 **/

export type IGetInstance = (classProto: IInstance, overwrite?: boolean, ...params: any[]) => Function

/**通过装饰器将属性混入类中

• @param {IObject} params 混入的属性
• @return {ClassDecorator} 装饰器钩子函数 **/

export type IClassDecorator = (params: IObject) => (target: TFunction) => void

/**JSON.parse封装

• @param {string} target 字符串
• @return {IObject} 对象 **/

export type IStringToJson = (target: string) => IObject

/**JSON.stringify封装

• @param {IObject} target 对象
• @return {string} 字符串 **/

export type IJsonToString = (target: IObject) => string

function

/**节流(throttle):高频事件触发，但在 n 秒内只会执行一次

• @param {Function} fn 节流处理的函数
• @param {number} time 执行间隔/毫秒
• @return {Function} 处理后的函数 **/

export type IThrottle = (fn: Function, time: number) => (...args: any[]) => void

/**防抖(debounce):触发高频事件后 n 秒内函数只会执行一次

• @param {Function} fn 防抖处理的函数
• @param {number} time 允许运行函数间隔/毫秒
• @return {Function} 处理后的函数 **/

export type IDebounce = (fn: Function, time: number) => (...args: any[]) => void

/**

• Promise扁平化，避免Promise嵌套
• @param {number} timer 超时
• @returns {Promise,resolve,reject} */ export type IDefer = (timer: number) => IPromise

/**await与try catch 捕获异常处理方法

• @param {Promise} defer 延迟函数
• @returns {Promise} [error, result] */

export type ICatchAwait<T extends Promise> = (defer: T) => T

array

/**数组乱序

• @param {Array} arr 目标数组
• @returns {Array} 乱序后的数组 */

export type IArrayRandom<T extends any[]> = (arr: T) => T

/**数组数组去重

• @param {Array} arr 目标数组
• @returns {Array} 去重后的数组 */

export type IArrayUniq<T extends any[]> = (arr: T) => T

/**数组扁平化

• @param {Array} arr 目标数组
• @returns {Array} 扁平化的数组 */

export type IArrayDemote<T extends IDemoteArray> = (arr: T, result?: T) => T

element

/**IElementParams

• @param {string} ele 标签类型
• @param {CSSStyleDeclaration} style 样式
• @param {Attr} attr 属性
• @param {object} parent 父元素 */

interface IElementParams { ele: T | string style: CSSStyleDeclaration attr: Attr parent: T }

/**新增标签，设置属性及样式

• @param {IElementParams} params 配置
• @return {ElementObject} 生成的标签 */

export type ICreateElement<T = HTMLElement> = (params: IElementParams) => T

event

/**浏览器事件

• @param {Document} ele 标签
• @param {string} type 事件类型
• @param {(e: Event) => void} handler 事件回调
• @return {void} */

export type IAddHandler = (ele: T, type: string, handler: (e: Event) => void) => void

/**取消事件冒泡

• @param {Event} e 浏览器事件对象
• @return {void} */

export type IStopBubble = (e: Event) => void

/**取消默认事件

• @param {Event} e 浏览器事件对象
• @return {void} */

export type IStopDefault = (e: Event) => void

/**取消浏览器事件

• @param {Document} ele 标签
• @param {string} type 事件类型
• @param {(e: Event) => void} handler 事件回调
• @return {void} */

export type IRemoveHandler = (ele: T, type: string, handler: (e: Event) => void) => void

/**取消默认事件

• @param {Event} e 浏览器事件对象
• @return {void} */

export type IDispatchEvent = (ele: T, data: any) => void

log

/** 单行输出

• @param {string} str 输出字符
• @param {boolean} overwrite 覆盖前面的输出
• @param {boolean} warp 最后一行换行
• @return {void} */ export type ILogOneLine = (str: string, overwrite?: boolean, warp?: boolean) => void

/** 循环输出某个队列

• @param {string[]} loopList 输出的字符队列
• @param {number} index 第几个字符
• @param {boolean} isStop 控制暂停循环
• @param {number} timer 两个相隔时间间隔 */ export type ILogLoopParams = { loopList?: string[] index?: number isStop?: boolean timer?: number } export type ILogLoop = (opts?: ILogLoopParams) => ILogLoopParams | void

request

export type IRequestParams = T | IObject | null

// 请求路径

export type IUrl = string

// 环境判断

export type IEnv = 'Window' | 'Node'

// fetch返回取值方式

export type IDataType = "text" | "json" | "blob" | "formData" | "arrayBuffer"

// 请求方式

export type IRequestMethods = "GET" | "POST" | "DELETE" | "PUT" | "OPTION"

// body结构

export type IRequestBody = IRequestParams

// heads结构

export type IRequestHeaders = IRequestParams

// 请求基础函数

export type IRequestBaseFn = (url: IUrl, opts: IRequestOptions) => Promise

// 请求函数体

export type IRequestFn = (url?: IUrl, query?: IObject, body?: IRequestBody, opts?: IRequestOptions) => Promise

// 请求参数

export type IRequestOptions = { method?: IRequestMethods query?: IRequestParams<IObject> body?: IRequestBody headers?: IRequestHeaders controller?: AbortController timeout?: number timer?: number | unknown | null [key: string]: any }

// 拦截器

export type IInterceptors = { use(type: "request" | "response" | "error", fn: Function): void get reqFn(): Function get resFn(): Function get errFn(): Function }

// 公共函数

export type IRequestBase = { readonly origin: string chackUrl: (url: IUrl) => boolean envDesc: () => IEnv errorFn: <Err = any, R = Function>(reject: R) => (err: Err) => R clearTimer: (opts: IRequestOptions) => void initAbort: <T = IRequestOptions>(opts: T) => T requestType: () => IRequestBaseFn fixOrigin: (fixStr: string) => string fetch: IRequestBaseFn http: IRequestBaseFn getDataByType: (type: IDataType, response: Response) => Promise }

// 初始化参数

export type IRequestInit = { initDefaultParams: (url: IUrl, opts: IRequestOptions) => any initFetchParams: (url: IUrl, opts: IRequestOptions) => any initHttpParams: (url: IUrl, opts: IRequestOptions) => any }

// 请求主体类

export type IRequest = { GET: IRequestFn POST: IRequestFn DELETE: IRequestFn PUT: IRequestFn OPTIONS: IRequestFn HEAD: IRequestFn PATCH: IRequestFn } & IRequestBase

// 消息中心 export declare interface Handlers { [key: string]: Array } export declare interface IMessageCenter { events: Handlers _instance?: IMessageCenter on: (type: string, handler: Function) => this emit: (type: string, data?: any) => this un: (type: string, handler?: Function) => this once: (type: string, handler: Function) => this clear: () => this has: (type: string) => boolean handlerLength: (type: string) => number watch: (type: string, handler: Function) => this invoke: (type: string, data?: any) => Promise }

https://gitee.com/DieHunter/message-center

/**

• 单条队列
• defer: 待运行的异步函数
• params?: defer的参数，也可以用bind直接传递

/ export interface IQueue { defer: Function name?: string } /*

• 队列参数
• children: 队列列表
• name: 队列唯一标识
• result: 运行完成后的结果

/ export interface IQueues { children: Array name: string result?: any[] } /*

• 队列缓存 / export type IQueueTemp = { [key: string]: IQueues } /*
• 系统队列 / export type IQueueList = Array /*
• 队列状态 idle:空闲 pending:等待 fulfilled:完成 rejected:失败 / export type IState = "idle" | "pending" | "fulfilled" | "rejected" /*
• 任务队列参数 / export type ITaskQueueProps = { maxLen: number } /*
• 任务队列 */ export type ITaskQueue = { readonly fix: string props: ITaskQueueProps queueTemp: IQueueTemp queues: IQueueList state: IState push: (queue: IQueues) => Promise unshift: (length: number) => IQueueList run: (reject: any) => unknown clear: () => void }

https://gitee.com/DieHunter/task-queue

/** 单行输出

• @param {string} str 输出字符
• @param {boolean} overwrite 覆盖前面的输出
• @param {boolean} warp 最后一行换行
• @return {void} */ export function logOneLine(str: string): void export function logOneLine(str: string, overwrite?: boolean): void export function logOneLine(str: string, overwrite?: boolean, warp?: boolean): void

// animate

/**

• 动画类
• 参考：https://gitee.com/DieHunter/myCode/tree/master/%E5%89%8D%E7%AB%AF%E5%8A%A8%E7%94%BB/js

*/ export type IAnimateFrame = { id: number | null // 动画索引 duration: number // 帧数控制 isActive: boolean// 激活控制 fn(timer: number): void start(duration: number): void stop(): void animate(timer: number): void } declare var IAnimateFrame: { new(fn: (timer: number) => void): IAnimateFrame prototype: IAnimateFrame }