qyh_utils

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

安装

``javascript
$ npm i qyh_utils
`
**


EventBus

`javascript
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)
`

$3

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

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


`javascript
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);
`


$3

| Name | Type | Default | Description |
| :------------------: | ------------ | --------- | -------------------------------------------------------------------------------- |
| file | File Blob | "" | (必传项) 文件 |
| quality | number | 0.8 | 自定义配置压缩比 |
| mimeType | string | | 输出图片类型 |
| convertSize | number | 2048000 | png转jpeg阈值 |
| width | number | | 宽度 |
| height | number | | 高度 |
| maxWidth | number | | 最大宽度 |
| maxHeight | number | | 最大高度 |
| minWidth | number | | 最小宽度 |
| minHeight | number | | 最小高度 |
| redressOrientation | boolean | | 是否矫正jpeg方向 |
| loose | boolean | true | 是否宽松模式（控制当压缩的图片 size 大于源图片，输出源图片，否则输出压缩后图片） |
**


otherfunction

$3

`javascript
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)
`

$3

`javascript
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)
`

$3

`javascript
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' },
// }
`

$3

`javascript
import {deepClone} from "qyh_utils"
let info = { item: 1 };
let obj: Record = {
key1: info,
key2: info,
list: [1, 2]
};

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


$3


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

$3

`javascript
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)
``