npm 包 @fulldive/common 使用教程

简介

@fulldive/common 是一个前端常用工具库，使用 TypeScript 编写，主要封装一些常用的工具函数和类型定义。此包旨在提高开发效率和代码重用性。

安装和使用

使用 npm 安装：

npm install @fulldive/common --save

在代码中引入：

import { formatNumber } from '@fulldive/common';

工具函数

formatNumber

将数字格式化为指定格式的字符串。

formatNumber(number: number, decimals = 0, thousandsSep = ',', decPoint = '.'): string

• number：要格式化的数字。
• decimals：指定小数位数，默认为 0。
• thousandsSep：千分位分隔符号，默认为 ,。
• decPoint：小数点分隔符号，默认为 .。

示例代码：

formatNumber(1234.5678);  // '1,235'
formatNumber(1234.5678, 2);  // '1,234.57'
formatNumber(1234.5678, 2, ' ');  // '1 234.57'

throttle 和 debounce

throttle 和 debounce 是常用的函数节流和函数防抖方法，可以在高频率事件中控制函数的执行次数。

throttle(fn: Function, delay = 100): Function
debounce(fn: Function, delay = 100): Function

• fn：要节流或防抖的函数。
• delay：指定时间间隔，默认为 100ms。

示例代码：

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

window.addEventListener('resize', debounce(handleResize, 200));

类型定义

@fulldive/common 还提供了一些常用的类型定义，如 AnyFunction、PlainObject 等。

AnyFunction

用于描述任意函数的类型定义。

type AnyFunction = (...args: any[]) => any;

示例代码：

type Callback = AnyFunction<boolean, object>;

function onCallback(cb: Callback) {
    // ...
}

PlainObject

用于描述普通对象的类型定义。

type PlainObject = Record<string, any>;

示例代码：

function createStore(initialState: PlainObject) {
    // ...
}

总结

@fulldive/common 是一个实用的前端常用工具库，它可以大大提高前端开发的效率和代码重用性。我们可以方便地使用它提供的工具函数和类型定义，让我们的代码更加简洁和易于维护。

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