lazy-js-utils
Version:
A collection of lazy-loaded JavaScript utilities for efficient development
192 lines (149 loc) • 6.91 kB
Markdown
<p align="center">
<img height="200" src="./assets/kv.png" alt="lazy-js-utils">
</p>
<h1 align="center">🚀 Lazy JS Utils</h1>
<p align="center">
<strong>🎯 专为现代开发者打造的轻量级 JavaScript 工具库</strong>
</p>
<p align="center">
<a href="https://www.npmjs.com/package/lazy-js-utils"><img src="https://img.shields.io/npm/v/lazy-js-utils?color=3fb883&label=npm" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/lazy-js-utils"><img src="https://img.shields.io/npm/dm/lazy-js-utils?color=orange" alt="Downloads"></a>
<a href="https://github.com/Simon-He95/lazy-js-utils"><img src="https://img.shields.io/github/stars/Simon-He95/lazy-js-utils?style=social" alt="GitHub stars"></a>
<a href="https://github.com/Simon-He95/lazy-js-utils/blob/main/license"><img src="https://img.shields.io/npm/l/lazy-js-utils?color=blue" alt="License"></a>
</p>
<p align="center">
<a href="https://lazy-js-utils.netlify.app/">📖 在线文档</a> •
<a href="./README_en.md">English</a> •
<a href="#快速开始">快速开始</a> •
<a href="#特色功能">特色功能</a>
</p>
---
## ✨ 为什么选择 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', '<div>新内容</div>')
```
## 🎯 特色功能
### 🎪 DOM 操作更简单
```typescript
// 传统方式 😵
const container = document.querySelector('#container')
const newElement = document.createElement('div')
newElement.innerHTML = 'Hello World'
container?.appendChild(newElement)
// Lazy JS Utils 方式 😎
insertElement('#container', '<div>Hello World</div>')
```
### 🎮 事件管理更智能
```typescript
// 自动清理的事件监听
const stop = useEventListener(window, 'resize', () => {
console.log('窗口大小改变')
})
// 页面卸载时自动调用 stop(),无需手动清理!
```
### 🎬 动画更流畅
```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 ✅ |
## 🤝 参与贡献
我们欢迎任何形式的贡献!
- 🐛 [报告 Bug](https://github.com/Simon-He95/lazy-js-utils/issues)
- 💡 [提出新功能](https://github.com/Simon-He95/lazy-js-utils/issues)
- 📖 [改进文档](https://github.com/Simon-He95/lazy-js-utils/pulls)
- ⭐ 给项目点个 Star
## 📚 相关链接
- 📖 [完整文档](https://lazy-js-utils-docs.netlify.app/)
- 🎮 [在线演示](./playground/index.html)
- 💬 [讨论区](https://github.com/Simon-He95/lazy-js-utils/discussions)
- ☕ [请作者喝咖啡](https://github.com/Simon-He95/sponsor)
## 📄 License
[MIT](./license) © 2024 Simon He
---
<p align="center">
<a href="https://cdn.jsdelivr.net/gh/Simon-He95/lazy-js-utils@master/.github-contributors/Simon-He95_lazy-js-utils.svg">
<img src="https://cdn.jsdelivr.net/gh/Simon-He95/lazy-js-utils@master/.github-contributors/Simon-He95_lazy-js-utils.svg" />
</a>
</p>
<p align="center">
<sub>Built with ❤️ by <a href="https://github.com/Simon-He95">Simon He</a></sub>
</p>