Breaking

Post Top Ad

Your Ad Spot

martes, 8 de octubre de 2019

Hoja de trucos para pasar de jQuery a JavaScript vainilla

Query sigue siendo una biblioteca útil y pragmática, pero es cada vez más probable que no dependa de usarla en sus proyectos para realizar tareas básicas como seleccionar elementos, diseñarlos, animarlos y obtener datos, cosas en las que jQuery fue excelente. Con una amplia compatibilidad con el navegador de ES6 ( más del 96% en el momento de la escritura), este es probablemente un buen momento para alejarse de jQuery.
Recientemente eliminé jQuery de este blog y me encontré buscando en Google algunos de los patrones una y otra vez. Para ahorrarle tiempo, he compilado esta guía práctica de referencia con algunos de los patrones jQuery más comunes y sus equivalentes en JavaScript. Cubriremos cómo pasar a JavaScript básico desde estos conceptos y funciones:
Seleccionar elementosEventos.css ()Documento listoClases.ajax ()Crear elementosHTML y texto

Seleccionar elementoshttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#selecting-elements

Seleccionar uno o varios elementos DOM para hacer algo es uno de los elementos más básicos de jQuery. El equivalente a $(), o jQuery()en JavaScript es querySelector()querySelectorAll()que, al igual que con jQuery, puede llamar con un selector CSS.
// jQuery, select all instances of .box
$(".box");

// Instead, select the first instance of .box
document.querySelector(".box");

// …or select all instances of .box  
document.querySelectorAll(".box");

Ejecutar una función en todos los elementos de una selecciónhttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#running-a-function-on-all-elements-in-a-selection

querySelectorAll()devuelve una NodeList que contiene todos los elementos que coinciden con la consulta. Mientras que puede ejecutar una función con jQuery en toda la selección de elementos simplemente llamando al método en el objeto jQuery, sin embargo, deberá iterar sobre la NodeList de elementos usando NodeList.forEach()JavaScript de vainilla:
// with jQuery
// Hide all instances of .box
$(".box").hide();

// Without jQuery
// Iterate over the nodelist of elements to hide all instances of .box
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" }

Encontrar un elemento dentro de otrohttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#finding-one-element-within-another

Un patrón común de jQuery es seleccionar un elemento dentro de otro elemento usando .find()Puede lograr el mismo efecto, definiendo la selección a los elementos secundarios de un elemento, llamando querySelectorquerySelectorAllen un elemento:
// With jQuery
// Select the first instance of .box within .container
var container = $(".container");
// Later...
container.find(".box");

// Without jQuery
// Select the first instance of .box within .container
var container = document.querySelector(".container");
// Later...
container.querySelector(".box");

Recorrer el árbol con parent()next()prev()https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#traversing-the-tree-with-parent-next-and-prev

Si desea recorrer el DOM para seleccionar un subling o un elemento principal en relación con otro elemento, puede acceder a ellos a través de nextElementSiblingpreviousElementSiblingparentElementen ese elemento:
// with jQuery
// Return the next, previous, and parent element of .box
$(".box").next();
$(".box").prev();
$(".box").parent();

// Without jQuery
// Return the next, previous, and parent element of .box
var box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;

Trabajar con eventoshttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#working-with-events

Hay una gran variedad de formas de escuchar eventos en jQuery, pero si usted está usando .on().bind().live.click(), podrás hacerlo con el equivalente de JavaScript .addEventListener:
// With jQuery
$(".button").click(function(e) { /* handle click event */ });
$(".button").mouseenter(function(e) {  /* handle click event */ });
$(document).keyup(function(e) {  /* handle key up event */  });

// Without jQuery
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

Escucha de eventos para elementos agregados dinámicamentehttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#event-listening-for-dynamically-added-elements

El .on()método de jQuery le permite trabajar con controladores de eventos "en vivo", donde escucha eventos en objetos que se agregan dinámicamente al DOM. Para lograr algo similar sin jQuery, puede adjuntar el controlador de eventos en un elemento a medida que lo agrega al DOM:
// With jQuery
// Handle click events .search-result elements, 
// even when they're added to the DOM programmatically
$(".search-container").on("click", ".search-result", handleClick);

// Without jQuery
// Create and add an element to the DOM
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
// Add an event listener to the element
searchElement.addEventListener("click", handleClick);

Activación y creación de eventoshttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#triggering-and-creating-events

El equivalente a la activación manual de eventos con trigger()se puede lograr mediante una llamada dispatchEvent()El dispatchEvent()método se puede invocar en cualquier elemento y toma un Eventcomo primer argumento:
// With jQuery
// Trigger myEvent on document and .box
$(document).trigger("myEvent");
$(".box").trigger("myEvent");

// Without jQuery
// Create and dispatch myEvent
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));

Elementos de estilohttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#styling-elements

Si está llamando .css()a un elemento para cambiar su CSS en línea con jQuery, lo usaría .styleen JavaScript y asignaría valores a sus diferentes propiedades para lograr el mismo efecto:
// With jQuery
// Select .box and change text color to #000
$(".box").css("color", "#000");

// Without jQuery
// Select the first .box and change its text color to #000
document.querySelector(".box").style.color = "#000";
Con jQuery, puede pasar un objeto con pares clave-valor para diseñar muchas propiedades a la vez. En JavaScript, puede establecer los valores de uno en uno, o establecer toda la cadena de estilo:
// With jQuery
// Pass multiple styles
$(".box").css({
  "color": "#000",
  "background-color": "red"
});

// Without jQuery
// Set color to #000 and background to red
var box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red";

// Set all styles at once (and override any existing styles)
box.style.cssText = "color: #000; background-color: red";

hide()show()https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#hide-and-show

El .hide().show()métodos de conveniencia son equivalentes a acceder a la .stylepropiedad y el establecimiento displayde noneblock:
// With jQuery
// Hide and show and element
$(".box").hide();
$(".box").show();

// Without jQuery
// Hide and show an element by changing "display" to block and none
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";

Documento listohttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#document-ready

Si necesita esperar a que el DOM se cargue completamente antes de, por ejemplo, adjuntar eventos a objetos en el DOM, normalmente usaría $(document).ready()la abreviatura común $()en jQuery. Podemos construir fácilmente una función similar para reemplazarla escuchando DOMContentLoaded:
// With jQuery
$(document).ready(function() { 
  /* Do things after DOM has fully loaded */
});

// Without jQuery
// Define a convenience method and use it
var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  /* Do things after DOM has fully loaded */ 
});

Trabajar con claseshttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#working-with-classes

Puede acceder y trabajar fácilmente con las clases a través de la classListpropiedad para alternar, reemplazar, agregar y eliminar clases:
// With jQuery
// Add, remove, and the toggle the "focus" class
$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus");

// Without jQuery
// Add, remove, and the toggle the "focus" class
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");
Si desea eliminar o agregar varias clases, simplemente puede pasar varios argumentos a .add().remove():
// Add "focus" and "highlighted" classes, and then remove them
var box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");
Si está alternando dos clases que son mutuamente excluyentes, puede acceder a la classListpropiedad y llamar .replace()para reemplazar una clase por otra:
// Remove the "focus" class and add "blurred"
document.querySelector(".box").classList.replace("focus", "blurred");

Comprobando si un elemento tiene una clasehttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#checking-if-an-element-has-a-class

Si solo desea ejecutar una función dependiendo de si un elemento tiene una determinada clase, puede reemplazar jQuery's .hasClass()con .classList.contains():
// With jQuery
// Check if .box has a class of "focus", and do something
if ($(".box").hasClass("focus")) {
  // Do something...
}

// Without jQuery
// Check if .box has a class of "focus", and do something
if (document.querySelector(".box").classList.contains("focus")) {
  // Do something...
}

Solicitudes de red con .get () o .ajax ()https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#network-requests-with-get-or-ajax

feth()le permite crear solicitudes de red de manera similar a los métodos ajax()jQuery get()fetch()toma una URL como argumento y devuelve una Promesa que puede usar para manejar la respuesta:
// With jQuery
$.ajax({
    url: "data.json"
  }).done(function(data) {
    // ...
  }).fail(function() {
    // Handle error
  });

// Without jQuery
fetch("data.json")
  .then(data => {
    // Handle data
  }).catch(error => {
    // Handle error
  });

Crear elementoshttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#creating-elements

Si desea crear dinámicamente un elemento de JavaScript para agregar a la DOM puede llamar createElement()en documenty pasarlo un nombre de etiqueta para indicar qué elemento que desea crear:
// Create a div & span
$("<div/>");
$("<span/>");

// Create a div and a span
document.createElement("div");
document.createElement("span");
Si desea agregar algo de contenido a esos elementos, simplemente puede establecer la textContentpropiedad o crear un nodo de texto createTextNodey agregarlo al elemento:
var element = document.createElement("div");
element.textContent = "Text"
// or create a textNode and append it
var text = document.createTextNode("Text");
element.appendChild(text);

Actualización del DOMhttps://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#updating-the-dom

Si está buscando cambiar el texto de un elemento o agregar nuevos elementos al DOM, es probable que se haya encontrado innerHTML(), pero usarlo puede exponerlo a ataques de scripting entre sitios (XSS). Aunque puede solucionarlo y desinfectar el HTML , existen algunas alternativas más seguras.
Si solo está buscando leer o actualizar el texto de un elemento, puede usar la textContentpropiedad de un objeto para devolver el texto actual o actualizarlo:
// With jQuery
// Update the text of a .button
$(".button").text("New text");
// Read the text of a .button
$(".button").text(); // Returns "New text"

// Without jQuery
// Update the text of a .button
document.querySelector(".button").textContent = "New text";
// Read the text of a .button
document.querySelector(".button").textContent; // Returns "New text"
Si está construyendo un nuevo elemento, puede agregar ese elemento a otro elemento utilizando el método en el padre appendChild():
// Create div element and append it to .container
$(".container").append($("<div/>"));

// Create a div and append it to .container
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);
En conjunto, aquí se explica cómo crear un div, actualizar su texto y clase, y agregarlo al DOM:
// Create a div
var element = document.createElement("div");

// Update its class
element.classList.add("box");

// Set its text
element.textContent = "Text inside box";

// Append the element to .container
document.querySelector(".container").appendChild(element);

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas