npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wave-utils

v0.0.13-0

Published

🔨 一些常用工具类函数的集合

Downloads

3

Readme

Wave-utils

🔨 一些常用工具类函数的集合 CurrentVersion: 0.0.12-0

UpdatedAt: 2021/11/8上午10:41:17


Array

array2tree

/**
 * 将一个数组转换为树结构的数组
 *
 *  eg:
 *  arr: [ { prov_name: "浙江省", prov_code: 330000, city_name: "杭州市", city_code: 330100, coun_name: "钱塘区", coun_code: 330114 } ]
 *  path: [
 *      [ "prov_name", "prov_code" ],
 *      [ "city_name", "city_code" ],
 *      [ "coun_name", "coun_code" ],
 *  ]
 *  return [
 *    {
 *      "prov_name": "浙江省",
 *      "prov_code": "330000",
 *      "children": [
 *        {
 *          "city_name": "杭州市",
 *          "city_code": "330100",
 *          "children": [
 *            {
 *              "coun_name": "钱塘区",
 *              "coun_code": "330114",
 *              "children": []
 *            }
 *          ]
 *        }
 *      ]
 *    }
 * ]
 * @param arr: 源数组,二维数组,每一行
 * @param path 每一层的变量 key 组成的数组,如果需要多个变量,可以使用数组
 * @param childrenKey 指定生成的 子节点 的 key 名称
 * @returns
 */
export declare const array2tree: (arr: Array<Record<string, any>>, path: Array<string | Array<string>>, childrenKey?: string) => Record<string, any>;

json2matrix

/**
 * 将json数组转换为矩阵
 * @param  srcJson json 数组
 * @param emptyValue 为空时填充值
 * @param headers 指定 headers
 * @returns {Array<Array<string | number>>} 二维数组
 */
export declare const json2matrix: (srcJson: Array<Record<string, string | number>>, emptyValue?: any, headers?: Array<string>) => Array<Array<string | number>>;

matrix2json

/**
 * 将二维矩阵转换为 json 数组
 * @param matrix
 * @param firstRowAsHeader
 */
export declare const matrix2json: (matrix: Array<Array<string | number>>, firstRowAsHeader?: boolean) => Array<Record<string, string | number>>;

minimizeMatrix

/**
 * 🔪 剔除矩阵为空  的边
 * eg:
 * [
 *    ["", "", "", ""],
 *    ["", "1", "2", ""],
 *    ["", "3", "4", ""],
 *    ["", "", "", ""],
 * ]
 * =>
 * =>
 * =>
 * [
 *    ["1", "2"],
 *    ["3", "4"],
 * ]
 * @param matrix 传入矩阵
 */
export declare const minimizeMatrix: (matrix: Array<Array<any>>) => Array<Array<any>>;

Base

createObjByPath

/**
 * 根据路径动态生成对象
 * @param path
 * @param value
 * @param base
 */
export declare const createObjByPath: (path: string, value: any, base?: {}) => any;

createRandomString

/**
 * 创建一个随机字符串
 * @param {number} len 指定字符串的长度
 * @param {boolean} unique 是否确保唯一(简单使用时间戳来计算)
 * @returns
 */
export declare const createRandomString: (len?: number, unique?: boolean) => string;

fillString

/**
 * 使用指定的字符补全目标字符串
 * @param {string} srcString * 原始字符串
 * @param {number} totalLength  * 预期总长度
 * @param {string} fillSymbol [填充的符号][默认"0"]
 * @param {boolean} suffix [后缀模式][默认 false]
 * @returns {string}
 */
export declare const fillString: (srcString: string, totalLength: number, fillSymbol?: string, suffix?: boolean) => string;

getValueInObjectByPath

/**
 * 根据路径, 从对象中获取对应的值
 * @param srcObj 源对象
 * @param path 路径, 使用 "/" 分割
 * @returns
 */
export declare const getValueInObjectByPath: <T>(srcObj: Record<string, any>, path: string) => T;

number2letter

/**
 * 将数字排序转换为 字母排序,
 * 如: 1 => A,  27 => AA
 * @param number
 * @returns
 */
export declare const number2letter: (number: number) => string;

roughlyToPlain

/**
 * 简单的深拷贝
 * @param obj
 * @returns
 */
export declare const roughlyToPlain: <T>(obj: T) => T;

sleep

/**
 * 阻塞指定的时间,单位 ms
 * @param timeout
 * @returns
 */
export declare const sleep: (timeout?: number) => Promise<void>;

Browser

copyText2Clipboard

/**
 * 复制文本到剪切板,
 * 优先使用 navigator.clipboard, 如果不可用,向下兼容使用 document.execCommand
 * @param {string} text
 * @returns
 */
export declare const copyText2Clipboard: (text: string) => Promise<unknown>;

syncListItemWidth

/**
 * 统一调整目标节点数组的长度,按最长的长度,将所有节点的宽度调整为最长节点的宽度
 * @param nodeList 要调整的节点数组
 * @param fillWithMargin 使用 margin 进行填充 而不是 直接设置 总宽度
 * @param gap 元素之间的间距(px)
 * @returns
 */
export declare const syncListItemWidth: (nodeList: Array<HTMLElement>, fillWithMargin?: boolean, gap?: number) => void;

Debug

style-log

/**
 *
 */
export declare class StyleLog {
    private _baseStyle;
    private _normalStyle;
    private _tag;
    /**
     * 输出一个 tag
     * @param text 文本内容
     * @param bgColor  背景颜色
     * @param frColor 字体颜色
     * @param customStyles 自定义样式(css语法)
     */
    tag(text: string, bgColor: string, frColor: string, customStyles?: string[]): void;
    /**
     * 输出带前缀标签的 tag
     * @param label 前缀的文本
     * @param text 文本内容
     * @param bgColor 背景颜色
     * @param frColor 前景颜色
     * @param customStyles 自定义样式
     */
    tagPrefix(label: string, text: string, bgColor: string, frColor: string, customStyles?: string[]): void;
    /**
     * 输出 危险 标签 🏷️(红色)
     * @param text 标签文字
     */
    danger(text: string): void;
    /**
     * 输出 带危险前缀 的文本内容
     * @param text 文本内容
     * @param tagLabel 标签内容
     */
    dangerPrefix(text: string, tagLabel?: string): void;
    /**
     * 输出 成功 标签 🏷️(绿色)
     * @param text 标签文字
     */
    success(text: string): void;
    /**
     * 输出 带成功前缀 的文本内容
     * @param text 文本内容
     * @param tagLabel 标签内容
     */
    successPrefix(text: string, tagLabel?: string): void;
    /**
     * 输出 警告 标签 🏷️(黄色)
     * @param text 标签文字
     */
    warn(text: string): void;
    /**
     * 输出 带警告前缀 的文本内容
     * @param text 文本内容
     * @param tagLabel 标签内容
     */
    warnPrefix(text: string, tagLabel?: string): void;
    /**
     * 输出 普通 标签 🏷️(蓝色)
     * @param text 标签文字
     */
    normal(text: string): void;
    /**
     * 输出 带普通前缀 的文本内容
     * @param text 文本内容
     * @param tagLabel 标签内容
     */
    normalPrefix(text: string, tagLabel?: string): void;
}
/**
 * StyleLog 的实例对象
 */
export declare const styleLog: StyleLog;

Tree

flattenTree

/**
 * 平铺树结构,
 * 可选: 同时生成路径
 * @param {Array[Tree] | Tree} tree 树结构对象
 * @param childrenKey 子节点的 key
 * @param genPath 是否生成路径
 * @param pathLabelKey 路径标签的 key
 * @param pathKey 最后添加路径 key
 * @param pathSepreator 路径分割符
 * @param results 结果数组,默认为 [],
 * @param path 路径的结果数组,默认为 [], 如需要前缀,可添加如:["prefix"]
 * @returns
 */
export declare const flattenTree: <T>(tree: T, childrenKey?: string, genPath?: boolean, pathLabelKey?: string, pathKey?: string, pathSepreator?: string, results?: any[], path?: any[]) => Partial<T>[];

getNodePath

/**
 * 获取指定树节点在整颗树中的路径
 * * 传入的节点必须是合法的树节点
 * @param node
 * @param res
 * @param parentKey
 * @param nameKey
 * @returns
 */
export declare const getNodePath: (node: Record<string, any>, res?: Array<string>, parentKey?: string, nameKey?: string) => Array<string>;

Type

getType

/**
 * 获取变量的数据类型
 * @param val
 * @returns
 */
export declare const getType: (val: any) => string;

isArray

/**
 * 判断是否为数组
 * @param val
 * @returns
 */
export declare const isArray: (val: any) => boolean;

isFunction

/**
 * 判断是否是 Function
 * @param val
 * @returns
 */
export declare const isFunction: (val: any) => boolean;

isNumber

/**
 * 判断是否是数字
 * @param val
 * @returns
 */
export declare const isNumber: (val: any) => boolean;

isObject

/**
 * 判断是否为对象
 * @param val
 * @returns
 */
export declare const isObject: (val: any) => boolean;

isString

/**
 * 判断是否是字符串
 * @param val
 * @returns
 */
export declare const isString: (val: any) => boolean;

isUndefined

/**
 * 判断是否为 undefined
 * @param val
 * @returns
 */
export declare const isUndefined: (val: any) => boolean;