Abreviaciones para acceder a elementos dom
Son útiles para hacer que tu código sea más limpio y compacto. Vamos a desglosar lo que hacen:
const $ = el => document.querySelector(el);
const titulo = $('#titulo'); // Selecciona el elemento con id "titulo"
querySelector(el)selecciona el primer elemento que coincida con el selector CSS que le pases (por ejemplo, una clase, un id, o una etiqueta).- La función
eles el parámetro que defines para pasar un selector, como".clase","#id", o"p".
const $$ = el => document.querySelectorAll(el);
const parrafos = $$('p');
querySelectorAll(el)selecciona todos los elementos que coincidan con el selector CSS que le pases.- La diferencia con
querySelectores que devuelve una NodeList, es decir, una lista de elementos.
Abreviación para addEventListener
const $ = el => document.querySelector(el);
const on = (el, ev, fn) => el.addEventListener(ev, fn);
on($('#miBoton'), 'click', () => alert('Botón clicado'));
el: el elemento al que quieres añadir el evento.ev: el tipo de evento (por ejemplo,"click","mouseover").fn: la función que se ejecutará cuando ocurra el evento.
Abreviación para setTimeout
const delay = (fn, ms) => setTimeout(fn, ms);
delay(() => console.log('Ejecutado después de 2 segundos'), 2000);
fn: la función que quieres ejecutar.ms: la cantidad de milisegundos que quieres esperar antes de ejecutarla.
Abreviación para localStorage
const setLS = (key, value) => localStorage.setItem(key, JSON.stringify(value));
const getLS = key => JSON.parse(localStorage.getItem(key));
setLS('usuario', { nombre: 'Juan', edad: 30 });
const usuario = getLS('usuario');
console.log(usuario.nombre); // "Juan"
Abreviación para seleccionar múltiples eventos
const $ = el => document.querySelector(el);
const onMultiple = (el, evs, fn) => evs.forEach(ev => el.addEventListener(ev, fn));
onMultiple($('#miBoton'), ['click', 'mouseover'], () => console.log('Evento activado'));
evs: un array de eventos.fn: la función que se ejecutará.
Abreviación para eliminar clases de múltiples elementos
const $$ = el => document.querySelectorAll(el);
const removeClass = (els, cls) => els.forEach(el => el.classList.remove(cls));
removeClass($$('.mi-clase'), 'activo'); // Elimina la clase "activo" de todos los elementos con la clase "mi-clase"
Abreviación para fetch simplificada
const getJSON = url => fetch(url).then(res => res.json());
getJSON('https://api.example.com/data').then(data => console.log(data));
Abreviación para el operador ternario o condicional corto
const ifElse = (condition, ifTrue, ifFalse) => condition ? ifTrue : ifFalse; let esAdulto = ifElse(edad >= 18, 'Adulto', 'Menor de edad'); console.log(esAdulto); // "Adulto" si edad >= 18
Abreviación para obtener el valor de un input
const val = el => document.querySelector(el).value;
let nombre = val('#nombreInput');
console.log(nombre); // Imprime el valor del input con id "nombreInput"
Abreviación para crear elementos HTML
const createEl = (tag, props = {}) => Object.assign(document.createElement(tag), props);
let nuevoDiv = createEl('div', { id: 'miDiv', className: 'contenedor', textContent: 'Hola Mundo' });
document.body.appendChild(nuevoDiv); // Añade el nuevo div al body
tag: el tipo de etiqueta HTML que deseas crear (por ejemplo,'div','p').props: un objeto con propiedades comoid,className,textContent, etc.
Abreviación para console.log
const log = console.log.bind(console);
log('Esto es un log más corto');
Abreviación para obtener la longitud de una lista de nodos
const count = el => document.querySelectorAll(el).length;
let totalParrafos = count('p'); // Número de párrafos en la página
console.log(totalParrafos);
Abreviación para convertir NodeList a Array
const $$ = el => document.querySelectorAll(el);
const toArray = nodeList => Array.from(nodeList);
let parrafos = toArray($$('p'));
parrafos.map(p => console.log(p.textContent)); // Itera sobre los párrafos
Abreviación para copiar al portapapeles
const copyToClipboard = str => navigator.clipboard.writeText(str);
copyToClipboard('Texto copiado al portapapeles');
Abreviación para desestructurar objetos profundamente
const deepGet = (obj, keys) => keys.reduce((acc, key) => acc && acc[key], obj);
let persona = { nombre: { primer: 'Juan', apellido: 'Pérez' } };
let primerNombre = deepGet(persona, ['nombre', 'primer']); // 'Juan'
Abreviación para eliminar duplicados de un array
const unique = arr => [...new Set(arr)]; let numeros = [1, 2, 3, 3, 4, 5, 5]; let sinDuplicados = unique(numeros); // [1, 2, 3, 4, 5]
¿Te ha resultado útil??
0 / 0
#abreviaciones #JavaScript