@sinoui/utils

sinoui 工具库。

• @sinoui/utils
  • API
    • debounce
    • animate
  • 本地开发
    • yarn start
    • yarn build
    • yarn lint
    • yarn format
    • yarn test

API

debounce

0.1.0

防抖函数的简易实现。与 lodash/debounce 类似。

import { debounce } from '@sinoui/utils';

const callback = () => console.log('update');
const debounced = debounce(callback);

// 执行
debounced();
// 取消执行
debounced.cancel();

方法类型：

function debounce(func: Function, [wait = 166]): Function;

参数：

| 参数名称 | 说明 | | -------- | -------------------------------------- | | func | 执行的回调函数 | | wait | 等待时长。单位是毫秒。默认为 166ms。 |

返回值：

返回包装后的函数。此函数还有一个 cancel 属性，执行 cancel()，可以取消 func 的执行。

animate

0.2.0

简单的动画执行函数。

import { animate } from '@sinoui/utils';

const handleUpdate = (currentValue) => console.log(currentValue);
const cancel = animate(0, 1000, 250, handleUpdate);

// 取消动画的执行
cancel();

方法类型：

function animate(
  start: number,
  end: number,
  duration: number,
  onUpdate: (currentValue: number) => void,
  easingFunction = linear,
): () => void;

参数：

| 参数名称 | 说明 | | -------------- | ------------------------------------------------------------------------------------------------------------------------------- | | start | 开始值 | | end | 结束值 | | duration | 动画时长 | | onUpdate | 动画过程中值发生变更的回调函数 | | easingFunction | 缓动函数。默认为线性缓动函数。可以在 js-easing-functions 找到更多缓动函数。 |

返回值：

返回可以取消动画执行的函数。执行此函数，则结束动画。

本地开发

项目中有以下可用的命令。

yarn start

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

yarn build

打包，并将打包文件放在dist文件夹中。使用 rollup 对代码做优化并打包成多种格式（Common JS，UMD和ES Module）。

yarn lint

yarn lint会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

yarn format

yarn format可以自动调整整个项目的代码风格问题。

yarn test

yarn test以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。