Package Exports

@vavt/util
@vavt/util/lib/cjs/index.cjs
@vavt/util/lib/es/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vavt/util) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vavt-util

一个 JavaScript 工具库

yarn add @vavt/util
# or
npm i @vavt/util

使用

deepClone

深克隆，支持大部分基础引用类型

const newObj = deepClone({ a: 1 });

debounce

函数防抖，默认延迟 200 毫秒

const handler = debounce(() => {
  // 做点什么
}, 100);

linkTo

模拟跳转

linkTo('https://github.com/imzbf/vavt-util', {
  // 是否新窗口打开，默认true
  _blank: false,
  // 是否可访问opener，默认true
  nofollow: false
});

download

基础下载，仅支持get，同时支持下载base64为图片

download('https://github.com/imzbf/vavt-util/archive/refs/tags/v1.0.0.zip', 'v1.0.0.zip');

download('data:image/svg+xml,xxxxx', 'v1.0.0.png');

smoothScroll

平滑滚动至指定高度

smoothScroll(
  // 滚动元素
  document.documentElement,
  // 滚动至100px高度
  100,
  // 滚动结束回调
  () => {
    console.log('滚动结束');
  },
  // 是否延迟执行滚动结束回调，默认100毫秒
  50
);

创建独立的滚动方法

import { createSmoothScroll } from '@vavt/util';
const smoothScroll = createSmoothScroll();

throttle

函数节流，默认延迟 200 毫秒

const handler = throttle(() => {
  // 做点什么
}, 100);

searchToObj

将location.search转换为对象结构

searchToObj('?age=18&name=lili&h=1&h=2');
// { age: 18, name: 'lili', h: [1, 2] }

objToSearch

将对象转换为location.search结构

objToSearch({ age: 18, name: 'lili', h: [1, 2] });
// 'age=18&name=lili&h=1&h=2'

objectSort

将对象数组进行关键词排序

objectSort(
  [
    { name: 'F', age: 25 },
    { name: 'D', age: null },
    { name: 'E', age: 20 },
    { name: 'H', age: 30 },
    { name: 'A', age: undefined },
    { name: 'J', age: 'b' },
    { name: 'K', age: 'c' },
    { name: 'I', age: 'a' },
    { name: 'B', age: undefined },
    { name: 'G', age: 25 },
    { name: 'C', age: undefined }
  ],
  (item) => item.age
);
// [
//   { name: 'A', age: undefined },
//   { name: 'B', age: undefined },
//   { name: 'C', age: undefined },
//   { name: 'D', age: null },
//   { name: 'E', age: 20 },
//   { name: 'F', age: 25 },
//   { name: 'G', age: 25 },
//   { name: 'H', age: 30 },
//   { name: 'I', age: 'a' },
//   { name: 'J', age: 'b' },
//   { name: 'K', age: 'c' }
// ];

draggingScroll

按住元素时，拖拽滚动元素

const removeListener = draggingScroll(document.getElementById('id'));

// removeListener()

randomId

生成一串随机字符

console.log(randomId());
// lmsimogsk7pukfcia4

isNumber

判断一个字符串是否是数字，科学计数法也会被认为是数字

console.log(isNumber('0.23e-1'));
// true

deepMerge

深度合并对象，只有对象会被合并，其他类型均会被新的值替换

const a = { a: 1, b: { c: 2, d: 3 }, e: 4 };
const b = { a: 1, b: { c: 5, f: 6 }, e: 4 };

console.log(deepMerge(a, b));
// { a: 1, b: { c: 5, d: 3, f: 6 }, e: 4 }

getRootOffset

获取相对位置，默认获取到 html 标签的 offsetTop, offsetLeft

isMobile

判断当前设备是否为移动端设备。依据：userAgent 包含移动端信息并且支持触摸事件，否则降级为使用屏幕宽度判断。

入参描述：

interface MobileCheckOptions {
  /**
   * 是否强制使用屏幕宽度检查。
   * 默认为 false。
   */
  forceScreenWidth?: boolean;

  /**
   * 自定义的屏幕宽度阈值（单位为像素）。
   * 默认为 768 像素。
   */
  threshold?: number;

  /**
   * 当 User-Agent 检查结果为 false 时，是否自动降级使用屏幕宽度检查。
   * 默认为 true。
   */
  fallbackToScreenWidth?: boolean;
}

...更多待更新

开发

yarn dev

构建

# 同时构建es\cjs\umd版本
yarn build

# 构建指定版本
yarm build:es

文件夹说明

/dev             // 开发调试代码
/packages        // 组件库源码
  /xxx           // 工具
  /index.ts      // 统一导出