CandyBag
candy-bag,一个javascript
工具库。用了都说香。
安装:
使用npm
或yarn
包管理工具安装:
npm install candy-bag
在node
项目中使用CommonJS
导入方式:
const { firstUpperCase } = require('candy-bag')
在webpack
或vite
构建项目中使用ESM导入方式:
import { firstUpperCase } from 'candy-bag'
在html
静态页面中使用cdn
方式导入,同过该方式导入,将暴露一个全局对象CandyBag
所有的方法均可以从该对象中取出:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/candy-bag"></script>
<script>
const { firstUpperCase } = CandyBag
console.log(firstUpperCase('hello'))
</script>
</body>
</html>
快速使用:
"Array" Methods:
import { numArraySum } from 'candy-bag'
console.log(numArraySum([99, -1, 20]))
"String" Methods:
import { firstUpperCase } from 'candy-bag'
console.log(firstUpperCase('hello'))
"Higher" Methods:
-
防抖函数:debounce
Arguments:
fn: Function
:需要被执行的函数体, 必传
delay: Number
:每次触发函数延时多久,单位ms(毫秒),必传
immed: Boolean
:是否在首次立即执行,可选
resultCallback: Function
:执行后的回调函数,(result) => void
可从回调函数中拿到执行函数的返回值
Returns:
Promise <any>
:返回Promise
,从then()
中可取出函数执行结果
Example:
import { debounce } from 'candy-bag'
const foo = () => {
console.log('foo 函数被执行');
};
const fooDebounce = debounce(foo, 500, true);
fooDebounce().then((res) => {
console.log(res);
});
-
节流函数:throttle
Arguments:
fn: Function
:需要被执行的函数体, 必传
interval: Number
:每次触发间隔市场,单位ms(毫秒),必传
options: { leading: Boolean; trailing: Boolean; resultCallback?: (result: any) => void)}
:选项,可选。
Returns:
Promise <any>
:返回Promise
,从then()
中可取出函数执行结果
Example:
import { throttle } from 'candy-bag'
const foo = () => {
return 'foo 函数被执行';
};
const fooThrottle = throttle(foo, 1000, {
leading: true,
trailing: false
});
fooThrottle().then(res => {
console.log(res)
})
关于:
本项目基于tools-base开发。
另招募大佬一起维护本项目。一起造轮子,我们不仅制造轮子,我们还要做轮子的搬运工
联系方式:wx:coder7915
觉得还不戳的话请留下一个star吧~
日志:
v0.0.3 更新于 2022/07/18: