NPM 包 generic-util 使用教程

简介

前端开发中常使用一些常见的功能库，比如操作数组、格式化日期、验证数据等等。这时候我们可以使用一些已经封装好了的工具包来简化我们的开发，省去不必要的时间和精力。而 generic-util 就是这样一款非常优秀的工具包，它包含了很多常用的工具函数，能够非常方便地处理各种数据。

安装和使用

安装 generic-util 只需要执行下面的命令即可：

npm install generic-util --save

然后在代码中引入（以 TypeScript 为例）：

import * as genericUtil from 'generic-util';

API 文档

generic-util 中包含了众多工具函数，这里只列出常用函数。

数组操作相关

chunk(arr: T[], size: number): T[][]

将一个数组拆分成多个数组，每个数组的长度为 size。

compact(arr: any[]): any[]

移除数组中的 false、null、0、""、undefined 和 NaN。

flatten(arr: any[]): any[]

将一个多维数组转成一位数组。

uniq(arr: any[]): any[]

将一个数组去重，返回新数组。

数据格式化相关

formatMoney(num: number, precision = 2): string

将一个数字按照千分位分隔符格式化，返回带有两位小数的字符串。

formatDate(date: Date, fmt: string): string

将一个日期对象格式化成指定格式的字符串。

parseDate(str: string, fmt: string): Date

将一个字符串解析成日期对象，需要指定字符串的格式。

其他相关

throttle(fn: Function, delay: number): Function

节流函数，限制 fn 在 delay 毫秒内只执行一次。

debounce(fn: Function, delay: number): Function

防抖函数，当 fn 不再被调用 delay 毫秒后再执行。

示例代码

使用 chunk 函数

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const result = genericUtil.chunk(arr, 3);
console.log(result); // [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]

使用 formatMoney 函数

const money = 12345.6789;
const result = genericUtil.formatMoney(money);
console.log(result); // 12,345.68

使用 throttle 函数

function handleScroll() {
  // ...
}

window.addEventListener('scroll', genericUtil.throttle(handleScroll, 100));

总结

generic-util 是一个非常好的工具包，使用它能够让我们的开发更加高效。当然，generic-util 并不是万能的，有些情况下我们需要自己封装函数。但可以使用 generic-util 来参考下如何编写高质量的工具函数。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaf81e8991b448dc416