🚀 Lazy JS Utils
🎯 专为现代开发者打造的轻量级 JavaScript 工具库
📖 在线文档 •
English •
快速开始 •
特色功能
✨ 为什么选择 Lazy JS Utils?
🎯 告别繁琐 - 200+ 精选函数,解决 90% 的日常开发需求
⚡ 开箱即用 - 零配置,直接在任何 JS 环境中使用
🧩 按需引入 - Tree-shaking 友好,只打包你用到的代码
🛡️ 类型安全 - 完整的 TypeScript 支持,IDE 智能提示
🔄 自动清理 - 智能内存管理,告别内存泄漏烦恼
🚀 快速开始
npm install lazy-js-utils
import {
insertElement,
useEventListener,
useMutationObserver,
} from 'lazy-js-utils'
const stopListening = useEventListener('#button', 'click', () => {
console.log('点击了按钮!')
})
useMutationObserver('#container', (mutations) => {
console.log('容器内容发生变化:', mutations)
})
insertElement('#container', '<div>新内容</div>')
🎯 特色功能
🎪 DOM 操作更简单
const container = document.querySelector('#container')
const newElement = document.createElement('div')
newElement.innerHTML = 'Hello World'
container?.appendChild(newElement)
insertElement('#container', '<div>Hello World</div>')
🎮 事件管理更智能
const stop = useEventListener(window, 'resize', () => {
console.log('窗口大小改变')
})
🎬 动画更流畅
useRaf(
(timestamp) => {
updateAnimation(timestamp)
},
{
delta: 1000,
autoStop: true,
},
)
📦 核心模块
🎯 DOM | 元素操作、选择器 | insertElement , removeElement |
🎮 Events | 事件监听、自动清理 | useEventListener , useMutationObserver |
🎬 Animation | 动画帧、缓动函数 | useRaf , useInterval |
🔧 Utils | 工具函数、类型判断 | deepCompare , throttle , debounce |
📝 String | 字符串处理 | camelCase , kebabCase |
🔢 Math | 数学计算 | clamp , random |
🎨 实际应用场景
useEventListener(
window,
'resize',
throttle(() => {
updateLayout()
}, 300),
)
useMutationObserver('.image-container', (mutations) => {
mutations.forEach((mutation) => {
lazyLoadImages(mutation.addedNodes)
})
})
insertElement(
'.form-container',
createFormField({
type: 'input',
placeholder: '请输入内容',
}),
)
📈 性能对比
事件监听清理 | 手动管理 | 自动清理 | ⚡ 100% |
DOM 操作 | 10+ 行代码 | 1 行代码 | 🚀 90% |
内存使用 | 容易泄漏 | 智能管理 | 💾 80% |
🎯 Browser Support
Chrome ✅ | Firefox ✅ | Safari ✅ | Edge ✅ |
🤝 参与贡献
我们欢迎任何形式的贡献!
📚 相关链接
📄 License
MIT © 2024 Simon He
Built with ❤️ by Simon He