README_en.md

🚀 Lazy JS Utils

🎯 Lightweight JavaScript utility library crafted for modern developers

📖 Documentation • 中文 • Quick Start • Features

---

✨ Why Choose Lazy JS Utils?

🎯 Say Goodbye to Boilerplate - 200+ curated functions solving 90% of daily development needs ⚡ Ready to Use - Zero config, works in any JavaScript environment 🧩 Import on Demand - Tree-shaking friendly, bundle only what you use 🛡️ Type Safe - Full TypeScript support with intelligent IDE hints 🔄 Auto Cleanup - Smart memory management, no more memory leaks

🚀 Quick Start

# Install
npm install lazy-js-utils

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

// 🎯 One-liner event listener with auto cleanup
const stopListening = useEventListener('#button', 'click', () => {
  console.log('Button clicked!')
})

// 🔍 Monitor DOM changes without refs
useMutationObserver('#container', (mutations) => {
  console.log('Container content changed:', mutations)
})

// ➕ Simple element manipulation
insertElement('#container', '<div>New content</div>')

🎯 Key Features

🎪 Simplified DOM Operations

// Traditional way 😵
const container = document.querySelector('#container')
const newElement = document.createElement('div')
newElement.innerHTML = 'Hello World'
container?.appendChild(newElement)

// Lazy JS Utils way 😎
insertElement('#container', '<div>Hello World</div>')

🎮 Smart Event Management

// Auto-cleanup event listeners
const stop = useEventListener(window, 'resize', () => {
  console.log('Window resized')
})

// Automatically calls stop() on page unload, no manual cleanup needed!

🎬 Smooth Animations

// High-performance animation frame control
useRaf(
  (timestamp) => {
    // Animation that runs once per second
    updateAnimation(timestamp)
  },
  {
    delta: 1000,
    autoStop: true, // Auto-stop after one execution
  },
)

📦 Core Modules

Module	Features	Examples
🎯 DOM	Element manipulation, selectors	insertElement, removeElement
🎮 Events	Event listeners, auto cleanup	useEventListener, useMutationObserver
🎬 Animation	Animation frames, easing functions	useRaf, useInterval
🔧 Utils	Utility functions, type checking	deepCompare, throttle, debounce
📝 String	String processing	camelCase, kebabCase
🔢 Math	Mathematical calculations	clamp, random
🎤 Speech	Voice analysis, TTS	analyzeUserVoice, VoiceAnalyzer

🎨 Real-world Use Cases

// 📱 Responsive design
useEventListener(
  window,
  'resize',
  throttle(() => {
    // Throttled window resize handling
    updateLayout()
  }, 300),
)

// 🖼️ Image lazy loading
useMutationObserver('.image-container', (mutations) => {
  mutations.forEach((mutation) => {
    // Auto-handle newly added image elements
    lazyLoadImages(mutation.addedNodes)
  })
})

// 🎪 Dynamic forms
insertElement(
  '.form-container',
  createFormField({
    type: 'input',
    placeholder: 'Enter content',
  }),
)

// 🎤 Voice analysis
const { result, controller } = await analyzeUserVoice({
  duration: 5000,
  onProgress: progress => console.log(`Progress: ${progress * 100}%`),
})

📈 Performance Comparison

Scenario	Vanilla JS	Lazy JS Utils	Performance Gain
Event cleanup	Manual management	Auto cleanup	⚡ 100%
DOM operations	10+ lines of code	1 line of code	🚀 90%
Memory usage	Prone to leaks	Smart management	💾 80%

🎯 Browser Support

Chrome ✅	Firefox ✅	Safari ✅	Edge ✅

🎤 Voice Analysis Features

One of the unique features of Lazy JS Utils is the built-in voice analysis capabilities:

import { VoiceAnalyzer, analyzeUserVoice } from 'lazy-js-utils'

// Quick voice analysis
const { result, controller } = await analyzeUserVoice({
  duration: 5000,
  onProgress: progress => console.log(`Recording: ${progress * 100}%`),
  onVolumeChange: volume => updateVolumeIndicator(volume),
})

// Get analysis results
const analysis = await result
if (analysis) {
  console.log('Voice characteristics:', analysis.characteristics)
  console.log('TTS suggestions:', analysis.suggestions)
}

// Advanced usage with custom analyzer
const analyzer = new VoiceAnalyzer()
analyzer.setAnalysisConfig({
  minFundamentalFreq: 70,
  maxFundamentalFreq: 900,
  enableVoiceClassification: true,
})

🤝 Contributing

We welcome contributions of all kinds!

• 🐛 Report Bug
• 💡 Request Feature
• 📖 Improve Documentation
• ⭐ Star the project

📚 Related Links

• 📖 Full Documentation
• 🎮 Live Demo
• 💬 Discussions
• ☕ Buy me a coffee

📄 License

MIT © 2024 Simon He

---

_{Built with ❤️ by Simon He}