Bonjour, je m'appelle Haroon, un développeur Full Stack senior. Aujourd'hui, je vais partager quelques fonctions JavaScript incroyablement utiles que vous pouvez utiliser dans presque tous les projets

1. Suit la visibilité d'un élément dans la fenêtre

Cet utilitaire utilise l'API Intersection Observer pour suivre la visibilité d'un élément dans la fenêtre. Il appelle une fonction de rappel avec une valeur booléenne indiquant si l'élément est visible ou non.

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. Points d'arrêt de la fenêtre d'affichage réactive

Cet utilitaire vous permet de définir des points d'arrêt et d'être averti lorsque la largeur de la fenêtre traverse ces points d'arrêt. Il appelle une fonction de rappel avec la valeur actuelle du point d'arrêt.

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. API du Presse-papiers réactif

Cet utilitaire écoute les événements de copie et lit le texte copié dans le presse-papiers, appelant une fonction de rappel avec le texte copié.

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. API d'orientation d'écran réactive

Cet utilitaire écoute les changements d'orientation de l'écran et appelle une fonction de rappel avec le type d'orientation actuel.

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

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

5. État réactif pour indiquer si la souris quitte la page

Cet utilitaire suit le moment où la souris quitte ou entre dans la page et appelle une fonction de rappel avec une valeur booléenne indiquant si la souris a quitté la page.

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`);
});

Chacun de ces utilitaires exploite des écouteurs d'événements et des API modernes pour fournir un comportement réactif dans vos applications JavaScript.

Merci d'avoir pris le temps d'explorer ces puissants utilitaires JavaScript avec moi. J'espère que vous les trouverez aussi utiles et passionnants que moi. N'hésitez pas à expérimenter ces fonctions dans vos projets et voyez comment elles peuvent améliorer votre processus de développement. Si vous avez des questions ou souhaitez partager vos propres conseils, veuillez les écrire dans les commentaires. Bon codage !