JavaScript es la parte más crítica del desarrollo web, y acelerar el desarrollo de JS significa acelerar el tiempo libre.

El artículo contiene fragmentos de código que no tienen efectos secundarios y se pueden copiar y utilizar de forma segura.

1. Verifica que un elemento esté dentro del área visible

Al desarrollar páginas web, a menudo es necesario saber si un elemento está en la ventana gráfica, es decir, si el usuario puede verlo o no. Esto se puede hacer usando la API de IntersectionObserver.

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` 是 dom 元素
      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);

El parámetro de opciones personaliza el comportamiento del observador. La propiedad de umbral se usa generalmente y define el porcentaje de elementos que deben estar visibles en el área visible cuando se activa el observador.

2. Dispositivos de identificación

Usualmente usamos window.navigator.userAgent para obtener los detalles del dispositivo actual para identificación.

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

3. Elementos ocultos

Hay dos métodos habituales para que CSS oculte elementos.

• La visibilidad del elemento se puede alternar usando style.visibility.
• Si desea eliminar el elemento de todo el flujo de representación, utilice la propiedad style.display.

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

Si no elimina elementos del flujo de renderizado y simplemente oculta la visibilidad, los elementos aún se dibujarán y ocuparán espacio de visualización.

Al renderizar listas largas, use la propiedad style.display para ocultar los elementos que no están en el área visible, junto con la API de IntersectionObserver anterior, puede mejorar en gran medida el rendimiento de renderizado.

4. Obtenga el parámetro de consulta en la URL

Se recomienda utilizar el objeto URL. La interfaz de URL se usa para analizar, construir, normalizar y codificar URL, y es fácil obtener los parámetros de consulta en los enlaces.

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

5. Copia profunda simple

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

Y ahí lo tiene. ¡Gracias por leer!