Javascript Avançado

O cérebro pulsante no client-side e server-side. Explore o comportamento do asincronismo e a força funcional da sintaxe ES6+ na NTL.

A Base Assíncrona Total (Event Loop)

O JavaScript funciona de forma single-threaded. Isto significa que a Thread principal não pode travar. Promessas assíncronas delegam tarefas intensivas do Node/WebAPIs para a Event Queue (Fila), rodando em paralelo e desaguando quando estiver completada via the Event Loop.

Programação Funcional Mutável x Imutável

O paradigma corporativo atual prefere imutabilidade. Métodos de arrays como map(), filter(), e reduce() retornam arrays novos intocados. Isso previne bugs assombrosos ao modificar acidentalmente matrizes utilizadas em múltiplos lugares (side-effects). Contudo, funções como sort() alteram a origem, tenha extremo cuidado e spread [...arr] antes de ordenar.

O Padrão Factory e IIFEs

Com o escopo bloqueado dentro de funções auto-invocadas (IIFE) no Vanilla, era possível criar clojures imitando dados privados. No ecossistema NTL moderno (JS/Nuxt), os ES Modules exportados já protegem o ambiente global limpo. Porém, utilizar Factories (funções que retornam abstrações de objetos) ainda é o estado da arte para controllers modulares.

Manipulação DOM e Event Delegation

Não anexe EventListeners em cada botão gerado numa tabela de 10.000 linhas! Isso joga memória do browser na fornalha. O Event Delegation anexa 1 único escutador (.addEventListener) à "<table>" pai, utilizando o e.target.closest() para interagir com o clique que brota dos filhos (bubbling), economizando 99% da banda.

api-business.js

/** * Padrão NTL: Requisição Assíncrona Segura * (Fetch com wrapper de Error Boundary) */ const apiNTL = { async fetchClient(url, options = {}) { try { const response = await fetch(url, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${sessionToken}` }, ...options }) if (!response.ok) { throw new Error(`Falha na rota ${response.status}`) } const payload = await response.json() return { data: payload, error: null } } catch (err) { console.error('[API NTL/CRITICAL]', err.message) return { data: null, error: err.message } } } } // Consumo Imutável via ES6 const initDashboard = async () => { const { data, error } = await apiNTL.fetchClient('/api/dashboard') if (error) return; // Imutabilidade: clonando a matriz sem quebrar base const premiumUsers = data.users.filter(u => u.premium) const ordered = [...premiumUsers].sort((a,b) => b.score - a.score) renderTable(ordered) }

Mandamentos JS/ES6