@gaopeng123/utils.function
TypeScript icon, indicating that this package has built-in type declarations

1.1.15 • Public • Published

function

缓存函数

memoized: (...arg: any): Array

缓存函数返回值,fn可为多参函数,但第一个参数会作为缓存对象的key

const fn= (x,y)=> x * y;
const cacheFn = memoized(fn);
cacheFn(4,2); // [4, {4: 8}]

asyncMemoized: (arg: string): Promise<Array>

缓存异步函数的返回值,fn可为多参async函数,但第一个参数会作为缓存对象的key

/**
 * 获取本地json数据
 * @param path
 */
export const loadLocalJson = asyncMemoized(async (path: string) => {
	const res = await fetch(path);
	const json = await res.clone().json();
	return json;
});

export const menuData = loadLocalJson('/json/menus.json');

monad

ResponseMonad

Response响应值处理

ResponseMonad.of({
	states: 200,
	data: {
		code: '',
		data: null, message: ''
	},
	message: ''
}).effect((data) => {// 返回 true获false 结果为正确是返回
	return data.states === 200;
})
    .map((v) => v.data)
    .map((v) => v.data)
    .map((v) => v.data)
    .map((v) => v.data)
    .chain((d) => {
	console.log('d', d);
})
 // 捕获异常错误type为0时为 effect结果不满足报错  type为1是为map解构出错
    .catch((type, msg) => {
	console.log('e', e, msg);
})

curry

curry:(fn: Curry)

将函数转为柯理化函数

type Curry = (...args: Array<any>) => any;
curry((args1)=> {return (args2)=> args1 + args2);

partial

将函数转换为偏应用函数

const afterTenSeconds = partial(setTimeout, undefined, 10);

afterTenSeconds(() => {
	console.log(`10秒后打印`)
});

compose

compose

合并函数

compose((a)=> a+a,(b)=> b*b, (c)=> c/c); // a(b(c()));

pipe

合并函数

compose((a)=> a+a,(b)=> b*b, (c)=> c/c); // c(b(a()));

composePromises:(promises: Promises, initialValue?: any): Promise

合并promise,将上一次的结果,作为下一个promise的参数

const p1 = async (t) => {
	console.log(t); // 8
	return await new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve(t + 1);
		}, 1000)
	});
};


const p2 = async (t) => {
	console.log(t); // 9
	return await new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve(t + 1);
		}, 1000)
	});
};


composePromises([p1, p2], 8).then((res) => {
	console.log('res', res); // res 10
})

fullscreen

fullscreen: (el: Element,options: FullscreenOptions): Promise

进入全屏

fullscreen(document.getElementById(''))

exitFullscreen: ():Promise

退出全屏

exitFullscreen()

autoFullscreen:(el: Element, options: FullscreenOptions, callBack: (args: AutoFullscreenCallBack) => void):Promise

如果非全屏模式,则进入全屏,如果是全屏状态,则退出全屏

autoFullscreen(document.getElementById(''), null, ({type})=> {
    //fullscreen 进入全屏
	//noFullscreen 退出全屏
})

isFullscreen: ():boolean

判断是否是全屏状态

isFullscreen(); // true or false

windowSize(): WindowSize

窗口尺寸

type WindowSize = {
	availWidth: number; // 可视化宽度
	availHeight: number; // 可视化高度
	width: number; // 浏览器宽度
	height: number; // 浏览器宽度
	screenWidth: number; // 分辨率宽度
	screenHeight: number; // 分辨率高度
}
windowSize(); //

debounce/throttle

debounce

函数防抖

type DebounceOptions = {
     // 第一时间是否立即执行 后续在去抖  默认为false
	leading: boolean;
    // 在去抖过程中 有一些非去抖处理 可以添加此参数
	notDebounce?: (...arg: any) => any; 
}

debounce(()=> {
    // 200ms的防抖
}, 200, {notDebounce:()=> {
	// 无防抖
}});

throttle

函数节流

type ThrottleOptions = {
	type: 1 | 2; // 1 时间戳记录 2 setTimeout版本 默认为1

}
throttle(()=> {}, 200, {type: 1});

delay

delay

函数延迟执行

// 第一次参数是个函数,第二个参数是延迟时间 第三个参数是传给函数的参数
delay((...args)=> {}, 200, [1,2,3]);

asyncDelay

延迟异步函数执行

// 第一个参数是个promise
// 第二个参数是延迟时间
// 第三个参数是传递给promise的参数
asyncDelay(async (...args)=> {}, 200, [1,2,3])

operate

hasOperate

监听是否长时间未操作dom

type OperateConfig = {
    wait?: number,  // 多长时间未操作,到期触发callBack 默认一个小时  单位 毫秒
    interval?: number // 每隔多长时间检测一次 默认1分钟 单位 毫秒
}
hasOperate(()=> {}, {wait: 5000, interval: 1000});

retry

retry New

promise 重试

export type RetryConfig = {
    max?: number; // 重试次数默认 3
    timeout?: number; // 延时时间 默认 0
}
type Retry = (fn: any, config?: RetryConfig) => Promise<unknown>;
const testFn = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('res');
        }, 1000);
    })
}

retry(testFn, { timeout: 3000, max: 3 }).then((res) => {
    console.log(3, res);
}).catch((err) => {
    console.log(2, err);
});

easing

easingFuncs

常用的缓动函数

type EasingType = 'linear' | 'quadraticIn' | 'quadraticOut' | 'quadraticInOut'
    | 'cubicIn' | 'cubicOut' | 'cubicInOut' | 'quarticIn' | 'quarticOut' | 'quarticInOut'
    | 'quinticIn' | 'quinticOut' | 'quinticInOut' | 'sinusoidalIn' | 'sinusoidalOut'
    | 'sinusoidalInOut' | 'exponentialIn' | 'exponentialOut' | 'exponentialInOut'
    | 'circularIn' | 'circularOut' | 'circularInOut' | 'elasticIn' | 'elasticOut'
    | 'elasticInOut' | 'backIn' | 'backOut' | 'backInOut' | 'bounceIn' | 'bounceOut'
    | 'bounceInOut';

easingFuncs.linear(x); // number

animate

创建一个js动画

/**
 * 添加动画能力
 **/
type AnimateConfig = {
    duration?: number; // 执行时长 默认1000ms
    easing?: EasingType | any; // 动画类型
    afterAnimate: ()=> void; // 动画执行完成后回调
}

type AnimateFnReturn = {
    clear: ()=> void;
}
// v为从0到1的值
animate(callBack: (v: number)=> void, config: AnimateConfig): AnimateFnReturn;

overload

addMethod New

jQuery中重栽函数的实现

const testObj: any = {};

addMethod(testObj, 'fn', ()=> {
    console.log('没有参数')
})

addMethod(testObj, 'fn', (str: number)=> {
    console.log('一个参数')
})

addMethod(testObj, 'fn', (str1: number, str2: number)=> {
    console.log('2个参数')
})

testObj.fn()
testObj.fn(1)
testObj.fn(1, 2)

createOverload New

创建重栽函数

const overload = createOverload();


overload.addMethod(null, ()=> {
    console.log('没有参数')
})

overload.addMethod('string', (str: string)=> {
    console.log('string')
})

overload.addMethod('number', 'number', (num: number)=> {
    console.log('number')
})

overload()
overload('12')
overload(1, 2)

Readme

Keywords

none

Package Sidebar

Install

npm i @gaopeng123/utils.function

Weekly Downloads

19

Version

1.1.15

License

MIT

Unpacked Size

131 kB

Total Files

24

Last publish

Collaborators

  • gaopeng123