简介:simple-stack-common 是一个用于构建 Web 应用程序的 npm 包,它提供了一组常用的前端工具函数和组件,可用于加速开发过程。
安装
使用 npm 进行安装:
npm install simple-stack-common --save
使用
引入 simple-stack-common:
import SimpleStackCommon from 'simple-stack-common';
常用工具函数
formatSecond(second: number)
将秒数转换为 hh:mm:ss 形式的时间字符串。
const timeString = SimpleStackCommon.formatSecond(3661); // '01:01:01'
deepClone(obj: any)
对 obj 进行深拷贝,返回一个全新的对象。
const obj = { a: 1, b: { c: 2, d: [3, 4] } }; const newObj = SimpleStackCommon.deepClone(obj);
debounce(fn: Function, delay: number)
对函数进行防抖操作,等待 delay 毫秒后执行 fn。
const fn = () => console.log('debounce'); const debouncedFn = SimpleStackCommon.debounce(fn, 500); document.addEventListener('scroll', debouncedFn);
throttle(fn: Function, interval: number)
对函数进行节流操作,每隔 interval 毫秒执行一次 fn。
const fn = () => console.log('throttle'); const throttledFn = SimpleStackCommon.throttle(fn, 500); document.addEventListener('scroll', throttledFn);
常用组件
Loading 组件
用于显示加载中状态。默认不显示,当 show 属性传入 true 时显示。
<Loading show={isLoading} />
Image 组件
用于显示图片,并在图片加载过程中显示 loading。可支持自定义占位图和错误图。
<Image src={imageUrl} placeholderUrl={placeholderUrl} errorUrl={errorUrl} style={{ width: '100px', height: '100px' }} />
结语
simple-stack-common 提供了一组常用的前端工具函数和组件,通过 npm 安装并引入后即可使用。在使用过程中,建议多参考官方文档并自行测试。如果你有更好的想法或发现了已知问题,请提交 issues 或 pull requests。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/75979