नमस्कार, मैं हारून, एक वरिष्ठ पूर्ण स्टैक डेवलपर हूं। आज, मैं कुछ अविश्वसनीय रूप से उपयोगी जावास्क्रिप्ट फ़ंक्शंस साझा करूंगा जिनका उपयोग आप लगभग हर प्रोजेक्ट में कर सकते हैं

1. व्यूपोर्ट के भीतर किसी तत्व की दृश्यता को ट्रैक करता है

यह उपयोगिता व्यूपोर्ट के भीतर किसी तत्व की दृश्यता को ट्रैक करने के लिए इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करती है। यह एक बूलियन मान के साथ कॉलबैक फ़ंक्शन को कॉल करता है जो दर्शाता है कि तत्व दिखाई दे रहा है या नहीं।

function onVisibilityChange(element, callback) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => callback(entry.isIntersecting));
  });
  observer.observe(element);
}

// Example usage:
const targetElement = document.querySelector('#target');
onVisibilityChange(targetElement, (isVisible) => {
  console.log(`Element is ${isVisible ? 'visible' : 'not visible'}`);
});

2. प्रतिक्रियाशील व्यूपोर्ट ब्रेकप्वाइंट

यह उपयोगिता आपको ब्रेकप्वाइंट को परिभाषित करने और व्यूपोर्ट की चौड़ाई इन ब्रेकप्वाइंट को पार करने पर सूचित करने की अनुमति देती है। यह वर्तमान ब्रेकप्वाइंट मान के साथ कॉलबैक फ़ंक्शन को कॉल करता है।

function onBreakpointChange(breakpoints, callback) {
  const mediaQueries = breakpoints.map(bp => window.matchMedia(`(max-width: ${bp}px)`));

  function checkBreakpoints() {
    const breakpoint = breakpoints.find((bp, i) => mediaQueries[i].matches);
    callback(breakpoint || 'default');
  }

  mediaQueries.forEach(mq => mq.addListener(checkBreakpoints));
  checkBreakpoints();
}

// Example usage:
onBreakpointChange([600, 900, 1200], (breakpoint) => {
  console.log(`Current breakpoint: ${breakpoint}`);
});

3. रिएक्टिव क्लिपबोर्ड एपीआई

यह उपयोगिता कॉपी किए गए इवेंट को सुनती है और क्लिपबोर्ड से कॉपी किए गए टेक्स्ट को पढ़ती है, कॉपी किए गए टेक्स्ट के साथ कॉलबैक फ़ंक्शन को कॉल करती है।

function onClipboardChange(callback) {
  document.addEventListener('copy', async () => {
    const text = await navigator.clipboard.readText();
    callback(text);
  });
}

// Example usage:
onClipboardChange((text) => {
  console.log(`Copied text: ${text}`);
});

4. रिएक्टिव स्क्रीन ओरिएंटेशन एपीआई

यह उपयोगिता स्क्रीन ओरिएंटेशन में परिवर्तनों को सुनती है और वर्तमान ओरिएंटेशन प्रकार के साथ कॉलबैक फ़ंक्शन को कॉल करती है।

function onOrientationChange(callback) {
  window.addEventListener('orientationchange', () => {
    callback(screen.orientation.type);
  });
}

// Example usage:
onOrientationChange((orientation) => {
  console.log(`Current orientation: ${orientation}`);
});

5. प्रतिक्रियाशील स्थिति यह दिखाने के लिए कि माउस पृष्ठ छोड़ता है या नहीं

यह उपयोगिता तब ट्रैक करती है जब माउस पेज छोड़ता है या प्रवेश करता है और बूलियन मान के साथ कॉलबैक फ़ंक्शन को कॉल करता है जो दर्शाता है कि माउस ने पेज छोड़ दिया है या नहीं।

function onMouseLeavePage(callback) {
  document.addEventListener('mouseleave', () => {
    callback(true);
  });

  document.addEventListener('mouseenter', () => {
    callback(false);
  });
}

// Example usage:
onMouseLeavePage((hasLeft) => {
  console.log(`Mouse has ${hasLeft ? 'left' : 'entered'} the page`);
});

इनमें से प्रत्येक उपयोगिता आपके जावास्क्रिप्ट अनुप्रयोगों में प्रतिक्रियाशील व्यवहार प्रदान करने के लिए इवेंट श्रोताओं और आधुनिक एपीआई का लाभ उठाती है।

मेरे साथ इन शक्तिशाली जावास्क्रिप्ट उपयोगिताओं का पता लगाने के लिए समय निकालने के लिए धन्यवाद। मुझे आशा है कि आप भी उन्हें मेरी तरह ही उपयोगी और रोमांचक पाएंगे। बेझिझक अपनी परियोजनाओं में इन कार्यों का प्रयोग करें और देखें कि वे आपकी विकास प्रक्रिया को कैसे बढ़ा सकते हैं। यदि आपके कोई प्रश्न हैं या आप अपनी युक्तियाँ साझा करना चाहते हैं, तो कृपया टिप्पणियों में लिखें। हैप्पी कोडिंग!