Esto es algo así como una extensión de los 7 Killer One-Liners en JavaScript de la semana pasada . Si aún no ha leído el artículo, le recomendamos encarecidamente que lo haga.

1. Comprobar si un elemento está visible en la ventana gráfica

IntersectionObserveres una excelente manera de verificar si un elemento está visible en la ventana gráfica .

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` is the dom element
      console.log(`${entry.target.id} is visible`);
    }
  });
};
const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);

2. Detectar dispositivo

Puede usar navigator.userAgentpara obtener información detallada y detectar el dispositivo que ejecuta la aplicación

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ? "Mobile"
    : "Desktop";
console.log(detectDeviceType());

Simplemente puede alternar la visibilidad de un elemento usando la style.visibilitypropiedad y, en caso de que quiera eliminarlo del flujo de procesamiento , puede usar la style.displaypropiedad.

const hideElement = (element, removeFromFlow = false) => {
  removeFromFlow
    ? (element.style.display = "none")
    : (element.style.visibility = "hidden");
};

4. Obtenga los parámetros de la URL

JavaScript hace que obtener el parametersdesde cualquier dirección sea un paseo por el parque usando el URLobjeto.

const url = new URL(window.location.href);
const paramValue = url.searchParams.get("paramName");
console.log(paramValue);

Puede convertir deep copycualquier objeto en una cadena y volver a convertirlo en un objeto .

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

JavaScript se entrega con una setTimeoutfunción, pero no devuelve un Promiseobjeto, lo que dificulta su uso en async functions. Así que tenemos que escribir nuestra propia función wait/ sleep.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const asyncFunc = async () => {
  await wait(1000);
  console.log("async");
};
asyncFunc();

Sígueme para conocer novedades semanales sobre el dominio de la tecnología .

¿ Necesita un freelancer de desarrollo front-end mejor calificado para eliminar sus problemas de desarrollo? Contáctame en Upwork

¿Quieres ver en qué estoy trabajando? Consulta mi sitio web personal y GitHub

¿Quieres conectarte? Ponte en contacto conmigo en LinkedIn

Soy un freelancer que empezará como Nómada Digital a mediados de 2022. ¿Quieres tomar el viaje? Sígueme en Instagram