🚀 Lazy JS Utils

🎯 专为现代开发者打造的轻量级 JavaScript 工具库

📖 在线文档 •
English •
快速开始 •
特色功能

---

✨ 为什么选择 Lazy JS Utils？

🎯 告别繁琐 - 200+ 精选函数，解决 90% 的日常开发需求
⚡ 开箱即用 - 零配置，直接在任何 JS 环境中使用
🧩 按需引入 - Tree-shaking 友好，只打包你用到的代码
🛡️ 类型安全 - 完整的 TypeScript 支持，IDE 智能提示
🔄 自动清理 - 智能内存管理，告别内存泄漏烦恼

🚀 快速开始

``bash


安装


npm install lazy-js-utils
`

`typescript
import {
insertElement,
useEventListener,
useMutationObserver,
} from 'lazy-js-utils'

// 🎯 一行代码添加事件监听，自动清理
const stopListening = useEventListener('#button', 'click', () => {
console.log('点击了按钮！')
})

// 🔍 监听 DOM 变化，无需 ref
useMutationObserver('#container', (mutations) => {
console.log('容器内容发生变化:', mutations)
})

// ➕ 简单的元素操作
insertElement('#container', '

')
`

🎯 特色功能

$3

`typescript
// 传统方式 😵
const container = document.querySelector('#container')
const newElement = document.createElement('div')
newElement.innerHTML = 'Hello World'
container?.appendChild(newElement)

// Lazy JS Utils 方式 😎
insertElement('#container', '

')
`

$3

`typescript
// 自动清理的事件监听
const stop = useEventListener(window, 'resize', () => {
console.log('窗口大小改变')
})

// 页面卸载时自动调用 stop()，无需手动清理！
`

$3

`typescript
// 高性能动画帧控制
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 |

🎨 实际应用场景

`typescript
// 📱 响应式设计
useEventListener(
window,
'resize',
throttle(() => {
// 节流处理窗口缩放
updateLayout()
}, 300),
)

// 🖼️ 图片懒加载
useMutationObserver('.image-container', (mutations) => {
mutations.forEach((mutation) => {
// 自动处理新增的图片元素
lazyLoadImages(mutation.addedNodes)
})
})

// 🎪 动态表单
insertElement(
'.form-container',
createFormField({
type: 'input',
placeholder: '请输入内容',
}),
)
``

📈 性能对比

| 场景 | 原生 JS | Lazy JS Utils | 性能提升 |
| ------------ | ---------- | ------------- | -------- |
| 事件监听清理 | 手动管理 | 自动清理 | ⚡ 100% |
| DOM 操作 | 10+ 行代码 | 1 行代码 | 🚀 90% |
| 内存使用 | 容易泄漏 | 智能管理 | 💾 80% |

🎯 Browser Support

| !Chrome | !Firefox | !Safari | !Edge |
| :-------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: |
| Chrome ✅ | Firefox ✅ | Safari ✅ | Edge ✅ |

🤝 参与贡献

我们欢迎任何形式的贡献！

- 🐛 报告 Bug
- 💡 提出新功能
- 📖 改进文档
- ⭐ 给项目点个 Star

📚 相关链接

- 📖 完整文档
- 🎮 在线演示
- 💬 讨论区
- ☕ 请作者喝咖啡

📄 License

MIT © 2024 Simon He

---

_{Built with ❤️ by Simon He}