6 APIs JavaScript desconhecidas que você deve usar
Descubra 6 APIs JavaScript pouco conhecidas para criar aplicações dinâmicas e eficientes.
Navegadores modernos vêm equipados com APIs JavaScript nativas poderosas que permitem aos desenvolvedores criar aplicações mais dinâmicas e eficientes sem a necessidade de bibliotecas externas. Neste artigo, exploraremos seis dessas APIs: structuredClone, EyeDropper, AbortController, Intersection Observer, ResizeObserver e a Clipboard API. Para cada uma, explicaremos os problemas que resolve, quando usá-la e como implementá-la.
Antes de começarmos, é importante entender por que essas APIs não são mais conhecidas, apesar de sua utilidade:
- São relativamente novas: Muitas dessas APIs foram introduzidas recentemente.
- Falta de conhecimento: Sites populares e tutoriais geralmente usam soluções antigas, o que resulta em pouca visibilidade para as novas APIs.
- Suporte limitado de navegadores: Algumas dessas APIs ainda não são totalmente suportadas em todos os navegadores.
- Casos de uso específicos: Muitas vezes, essas APIs resolvem problemas específicos que nem todos os desenvolvedores encontram.
structuredClone
Clonar objetos profundamente sempre foi um desafio em JavaScript. Com structuredClone, é possível clonar objetos complexos sem bibliotecas externas.
// Objeto original com dados aninhados
const original = {
name: "Richardson",
age: 28,
address: {
city: "New York",
street: "Wall Street",
zip: "10001"
},
hobbies: ["reading", "hiking"],
created: new Date()
};
// Criar um clone profundo usando structuredClone
const copy = structuredClone(original);
// Modificar o clone
copy.name = "Jane";
copy.address.city = "Los Angeles";
copy.hobbies.push("music");
// O objeto original permanece inalterado
console.log("Original:", original);
console.log("Clone:", copy);
EyeDropper API
A API EyeDropper permite criar um seletor de cores nativo, sem bibliotecas externas. Embora ainda seja experimental e disponível apenas no Chrome, Edge e Opera, é útil em aplicativos de edição ou desenho.
<button id="pickColor">Pick a Color</button>
<div id="colorDisplay" style="width: 100px; height: 100px; border: 1px solid #ccc"></div>
<br />
<script>
document.getElementById("pickColor").addEventListener("click", async () => {
if ("EyeDropper" in window) {
const eyeDropper = new EyeDropper();
try {
const result = await eyeDropper.open();
document.getElementById("colorDisplay").style.backgroundColor = result.sRGBHex;
} catch (e) {
console.error("Error using EyeDropper:", e);
}
} else {
alert("EyeDropper API is not supported in this browser.");
}
});
</script>
AbortController
AbortController ajuda a cancelar requisições que já foram enviadas, útil para interfaces de busca que precisam lidar com requisições desatualizadas.
import React, { useEffect, useState } from 'react';
function SearchComponent({ query }) {
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const controller = new AbortController();
const signal = controller.signal;
const debounceRequest = setTimeout(() => {
setLoading(true);
fetch(`https://api.example.com/search?q=${query}`, { signal })
.then(res => res.json())
.then(data => {
setResults(data.results);
setLoading(false);
})
.catch(err => {
if (err.name === 'AbortError') {
console.log("Request was aborted")
} else {
console.log('Search failed', err);
setLoading(false);
}
});
}, 500);
return () => {
clearTimeout(debounceRequest);
controller.abort();
};
}, [query]);
return (
<div>
{loading && <p>Searching...</p>}
<ul>
{results.map(r => (
<li key={r.id}>{r.name}</li>
))}
</ul>
</div>
);
}
Intersection Observer
O Intersection Observer permite que você execute código quando elementos entram ou saem do viewport, ideal para carregamento preguiçoso de imagens e rolagem infinita.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Lazy Load Images</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
background: #f5f5f5;
}
img {
width: 100%;
max-width: 600px;
margin: 30px auto;
display: block;
min-height: 500px;
background-color: #ddd;
object-fit: cover;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
img.loaded {
opacity: 1;
}
</style>
</head>
<body>
<img
data-src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800"
alt="Forest"
/>
<script>
const images = document.querySelectorAll("img[data-src]");
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
const img = entry.target;
img.src = img.dataset.src;
img.onload = () => img.classList.add("loaded");
img.removeAttribute("data-src");
observer.unobserve(img);
});
},
{
root: null,
threshold: 0.1,
}
);
images.forEach((img) => observer.observe(img));
</script>
</body>
</html>
ResizeObserver
ResizeObserver permite que desenvolvedores executem código quando um elemento muda de tamanho, útil para interfaces complexas que precisam ajustar o tamanho de texto ou gráficos em tempo real.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Auto-Scaling Text</title>
<style>
body {
font-family: sans-serif;
padding: 2rem;
}
.container {
width: 60%;
height: 200px;
border: 2px dashed #aaa;
resize: horizontal;
overflow: hidden;
padding: 1rem;
}
.autoscale-text {
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: font-size 0.2s ease;
}
</style>
</head>
<body>
<div class="container" id="textBox">
<div class="autoscale-text" id="text">
Resize container to auto scale this text.
</div>
</div>
<script>
const container = document.getElementById("textBox");
const text = document.getElementById("text");
const resizeObserver = new ResizeObserver(() => {
const containerWidth = container.clientWidth;
const minFontSize = 12;
const maxFontSize = 70;
const minWidth = 200;
const maxWidth = 800;
const clampedWidth = Math.max(
minWidth,
Math.min(maxWidth, containerWidth)
);
const ratio = (clampedWidth - minWidth) / (maxWidth - minWidth);
const fontSize = minFontSize + (maxFontSize - minFontSize) * ratio;
text.style.fontSize = fontSize + "px";
});
resizeObserver.observe(container);
</script>
</body>
</html>
A Clipboard API
A API Clipboard foi introduzida para fornecer acesso programático à área de transferência do sistema, suportando tanto copiar quanto colar conteúdo, como texto e imagens. Requer permissão do usuário e HTTPS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Clipboard API Example</title>
</head>
<body>
<h2>📋 Clipboard API Demo</h2>
<button id="copyTextBtn">Copy Text to Clipboard</button>
<div class="playground">
<div id="copy-from">This will be copied to the clipboard!</div>
<div id="copy-to"><textarea></textarea></div>
</div>
<img id="copyImage" src="./sample1.png" alt="Sample" />
<button id="copyImageBtn">Copy Image to Clipboard</button>
<script>
// Copy Text
document
.getElementById("copyTextBtn")
.addEventListener("click", async () => {
try {
const e = document.getElementById("copy-from");
await navigator.clipboard.writeText(e.innerText);
alert("Text copied to clipboard!");
} catch (err) {
console.error("Text copy failed:", err);
alert("Failed to copy text.");
}
});
// Trigger copy event
document.addEventListener("copy", () =>
alert("Something was copied to the system clipboard")
);
// Trigger paste event
document.addEventListener("paste", () =>
alert("Something was pasted from the system clipboard")
);
// Copy Image
document
.getElementById("copyImageBtn")
.addEventListener("click", async () => {
const image = document.getElementById("copyImage");
try {
const response = await fetch(image.src);
const blob = await response.blob();
const clipboardItem = new ClipboardItem({ [blob.type]: blob });
await navigator.clipboard.write([clipboardItem]);
alert("Image copied to clipboard!");
} catch (err) {
console.error("Image copy failed:", err);
alert("Failed to copy image.");
}
});
</script>
</body>
</html>
Conclusão
Neste artigo, exploramos algumas pérolas ocultas na API JavaScript:
structuredClone: Permite clonar objetos JSON profundamente.- EyeDropper API: Adiciona a capacidade de escolher cores sem um pacote npm.
AbortController: Permite cancelar requisições XHR já enviadas.- Intersection Observer: Permite executar código quando um elemento muda de visibilidade.
ResizeObserver: Permite executar código quando um elemento muda de tamanho.- Clipboard API: Permite copiar imagens junto com texto para a área de transferência do sistema.
Essas APIs nativas do navegador desbloqueiam uma ampla gama de casos de uso — desde clonagem profunda de objetos complexos e observação do tamanho ou visibilidade de elementos até operações de área de transferência e escolha de cores — tudo sem recorrer a pacotes externos. Ao entender e usar essas ferramentas, você pode construir aplicações web mais rápidas, eficientes e com código mais limpo. E o melhor: todas estão embutidas no navegador.
