qyh_utils v1.0.26

• 安装
• EventBus
  • Typescript
• ImageCompressor
  • 配置项
• otherfunction
  • array2Tree
  • tree2Array
  • arrMapObj
  • deepClone
  • observerImg
  • control

安装

$ npm i qyh_utils

EventBus

import {EventBus} from "qyh_utils"
const emmiter=new EventBus()
// 监听事件
emitter.on('foo', e => console.log('foo', e) )

// 派发事件
emitter.emit('foo', { a: 'b' })

// 清除所有事件
emitter.off()

// 清除同名事件
emitter.off("foo")

// 清除指定事件
emitter.off("foo",onFoo)

Typescript

interface Events {
  foo: string
  bar?: number
}
const emitter = new EventBus<Events>()

emitter.on('foo', (e) => {}) // 'e' has inferred type 'string'

emitter.emit('foo', 42) // Error: Argument of type 'number' is not assignable to parameter of type 'string'. (2345)

ImageCompressor

import {ImageCompressor} from "qyh_utils"
import type {ImageCompressorOptions,IFile} from "qyh_utils"

const options:ImageCompressorOptions = {
  file: file,
  quality: 0.6,
  mimeType: 'image/jpeg',
  maxWidth: 500,
  maxHeight: 500,
  width: 200,
  height: 200,
  minWidth: 100,
  minHeight: 100,
  convertSize: Infinity,
  loose: true,
  redressOrientation: true,
  // 图片绘画前
  beforeDraw: function (ctx:CanvasRenderingContext2D) {
    console.log('准备绘图...');
    ctx.filter = 'grayscale(100%)';
  },

  // 图片绘画后
  afterDraw: function (ctx:CanvasRenderingContext2D, canvas:HTMLCanvasElement) {
    ctx.restore();
    console.log('绘图完成...');
    ctx.fillStyle = '#fff';
    ctx.font = (canvas.width * 0.1) + 'px microsoft yahei';
    ctx.fillText("qyh", 10, canvas.height - 20);
  },
  // 压缩前回调
  beforeCompress: function (result:IFile) {
    console.log('压缩之前图片尺寸大小: ', result.size);
    console.log('mime 类型: ', result.type);
  },

  // 压缩成功回调
  success: function (result:IFile) {
    const url = URL.createObjectURL(result)
    console.log('压缩之后图片尺寸大小: ', result.size);
    console.log('mime 类型: ', result.type);
    console.log('实际压缩率： ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%');
  },

  // 发生错误
  error: function (msg:string) {
    console.error(msg);
  }
};

new ImageCompressor(options);

配置项

otherfunction

array2Tree

import {array2Tree} from "qyh_utils"
const arr = [
  {
    name: '中国',
    id: 1,
    al: 'xx',
    parentId: 0,
  },
  {
    name: '北京',
    al: 'xx',
    id: 2,
    parentId: 1,
  },
  {
    name: '上海',
    al: 'xx',
    id: 3,
    parentId: 2,
  },
  {
    name: '台湾',
    al: 'xx',
    id: 4,
    parentId: 3,
  },
  {
    name: '钓鱼岛',
    id: 5,
    al: 'xx',
    parentId: 4,
  },
]
const tree=array2Tree(arr)

tree2Array

import {tree2Array} from "qyh_utils"
const tree = {
  name: '中国',
  id: 1,
  al: 'xx',
  parentId: 0,
  children: [
    {
      name: '北京',
      al: 'xx',
      id: 2,
      parentId: 1,
      children: [
        {
          name: '上海',
          al: 'xx',
          id: 3,
          parentId: 2,
          children: [
            {
              name: '台湾',
              al: 'xx',
              id: 4,
              parentId: 3,
              children: [
                {
                  name: '钓鱼岛',
                  id: 5,
                  al: 'xx',
                  parentId: 4,
                },
              ],
            },
          ],
        },
      ],
    },
  ],
}
const array=array2Tree(tree)

arrMapObj

import {arrMapObj} from "qyh_utils"
const arr=[{ id: '1', name: 'zs' }, { id: '2', name: 'ls' }]
const obj= arrMapObj(arr,"id")
//  {
//     1: { id: '1', name: 'zs' },
//     2: { id: '2', name: 'ls' },
//  }

deepClone

import {deepClone} from "qyh_utils"
  let info = { item: 1 };
  let obj: Record<string, any> = {
    key1: info,
    key2: info,
    list: [1, 2]
  };

  // 循环引用深拷贝示例
  obj.key3 = obj;
  let cloneObj = deepClone(obj);
  console.log("obj", obj);
  console.log("cloneObj", cloneObj);

observerImg

import {observerImg} from "qyh_utils"
// 图片懒加载 IntersectionObserver
  observerImg()

control

import {control} from "qyh_utils"
// 控制最大并发
   function task1() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve("task1");
        console.log("task1")
      })
    });
  }
  function task2() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve("task2");
        console.log("task2")
      }, 1000);
    });
  }
  function task3() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve("task3");
        console.log("task3")
      }, 20);
    });
  }
  function task4() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve("task4");
        console.log("task4")
      }, 500);
    });
  }
  function task5() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve("task5");
        console.log("task5")
      }, 2000);
    });
  }
  const tasks = [task1, task2, task3, task4, task5];
  control(tasks, 2)