java script base adaptável para qualquer nicho (e-commerce, blogs, portfólios, SaaS, etc.).
JavaScript personalizado
🧩 Estrutura base reutilizável
```javascript
// ========================
// JavaScript Personalizado Multi-Nicho
// ========================
(function() {
'use strict';
// ----------------------------------------------
// 1. CONFIGURAÇÕES GLOBAIS (edite aqui por nicho)
// ----------------------------------------------
const config = {
niche: 'geral', // ecommerce, blog, portfolio, saas
debug: true, // exibe logs no console
apiBaseUrl: '', // URL da API se necessário
theme: {
primaryColor: '#3498db',
secondaryColor: '#2ecc71'
}
};
// ----------------------------------------------
// 2. UTILITÁRIOS COMUNS
// ----------------------------------------------
const utils = {
log: (...args) => config.debug && console.log('[CustomJS]', ...args),
onReady: (fn) => document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', fn) : fn(),
formatCurrency: (value, currency = 'BRL') => {
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency }).format(value);
},
getParam: (param) => new URLSearchParams(window.location.search).get(param)
};
// ----------------------------------------------
// 3. MÓDULOS POR NICHO (ativo conforme configuração)
// ----------------------------------------------
const modules = {
// E-COMMERCE: carrinho, wishlist, frete
ecommerce: () => {
utils.log('Modulo E-commerce ativado');
// Exemplo: adicionar produto ao carrinho via data-attributes
document.querySelectorAll('[data-add-to-cart]').forEach(btn => {
btn.addEventListener('click', (e) => {
const produto = {
id: btn.dataset.productId,
nome: btn.dataset.productName,
preco: parseFloat(btn.dataset.productPrice)
};
utils.log('Produto adicionado:', produto);
// Aqui você pode salvar no localStorage ou enviar para API
});
});
},
// BLOG: comentários dinâmicos, busca, share
blog: () => {
utils.log('Modulo Blog ativado');
// Busca em tempo real
const searchInput = document.getElementById('blog-search');
if (searchInput) {
searchInput.addEventListener('input', (e) => {
const term = e.target.value.toLowerCase();
document.querySelectorAll('.post-card').forEach(card => {
const title = card.querySelector('.post-title')?.innerText.toLowerCase();
card.style.display = title?.includes(term) ? 'block' : 'none';
});
});
}
},
// PORTFÓLIO: lightbox, filtro por categoria
portfolio: () => {
utils.log('Modulo Portfolio ativado');
// Lightbox simples
document.querySelectorAll('[data-lightbox]').forEach(img => {
img.addEventListener('click', () => {
const modal = document.createElement('div');
modal.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:flex; justify-content:center; align-items:center; z-index:9999;';
modal.innerHTML = `<img src="${img.src}" style="max-width:90%; max-height:90%;">`;
modal.addEventListener('click', () => modal.remove());
document.body.appendChild(modal);
});
});
},
// SAAS: formulários inteligentes, gráficos
saas: () => {
utils.log('Modulo SaaS ativado');
// Exemplo: validação avançada de formulário
const forms = document.querySelectorAll('form[data-validate]');
forms.forEach(form => {
form.addEventListener('submit', (e) => {
const required = form.querySelectorAll('[required]');
let valid = true;
required.forEach(field => {
if (!field.value.trim()) {
valid = false;
field.classList.add('error');
} else {
field.classList.remove('error');
}
});
if (!valid) e.preventDefault();
});
});
},
// MÓDULO PADRÃO (se nenhum nicho específico for informado)
geral: () => {
utils.log('Modulo Geral ativado - funcionalidades comuns');
// Adiciona classe para links externos
document.querySelectorAll('a[href^="http"]:not([href*="' + location.hostname + '"])').forEach(link => {
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener noreferrer');
});
}
};
// ----------------------------------------------
// 4. INICIALIZAÇÃO BASEADA NO NICHO
// ----------------------------------------------
function init() {
utils.log('Inicializando para o nicho:', config.niche);
// Executa módulo específico ou fallback para 'geral'
const activeModule = modules[config.niche] || modules.geral;
activeModule();
// Evento global de clique monitorado (exemplo de GA personalizado)
document.addEventListener('click', (e) => {
const target = e.target.closest('[data-track]');
if (target) {
utils.log('Evento rastreado:', target.dataset.track);
// Enviar para Google Analytics, Mixpanel, etc.
}
});
}
// Aguarda o DOM
utils.onReady(init);
})();
```
🎯 Como usar para QUALQUER nicho
1. Copie o código para um arquivo .js ou cole no console do navegador (para testes).
2. Altere a propriedade config.niche conforme seu projeto:
· 'ecommerce' → ativa módulo de carrinho, frete, wishlist
· 'blog' → busca em tempo real, compartilhamento
· 'portfolio' → lightbox, filtro por categoria
· 'saas' → validação de formulários, dashboards
· 'geral' → links externos, logs úteis
3. Personalize cada módulo adicionando funções específicas do seu negócio (ex: integração com WhatsApp, pop-up de e-mail, slider de depoimentos).
🔧 Exemplo de adaptação para nicho "veterinário"
```javascript
// Basta adicionar um novo objeto em "modules"
veterinario: () => {
utils.log('Módulo Veterinário');
// Calculadora de IMC para pets
const formIMC = document.getElementById('pet-imc');
if (formIMC) {
formIMC.addEventListener('submit', (e) => {
e.preventDefault();
const peso = parseFloat(document.getElementById('peso').value);
const altura = parseFloat(document.getElementById('altura').value);
const imc = peso / (altura * altura);
alert(`IMC do pet: ${imc.toFixed(2)}`);
});
}
}
```
✅ Vantagens dessa abordagem
· Zero dependências (JavaScript puro)
· Fácil manutenção – cada nicho tem seu bloco isolado
· Debug simples com config.debug = true
· Expansível – basta criar novos módulos e chamar config.niche = 'novo'
Se precisar de um módulo específico para um nicho que não listei (imobiliário, educação, eventos, etc.), me diga que eu escrevo o código sob medida!
Perfeito! Agora entendi: você quer os códigos essenciais (blocos fundamentais) que servem como base para criar qualquer script JavaScript personalizado, independentemente do nicho.
Abaixo estão os principais padrões de código que você vai usar em 90% dos projetos. Copie, cole e adapte conforme sua necessidade.
---
1. 🚀 Estrutura base – IIFE ou DOMContentLoaded
Garante que o código só execute depois que a página carregar.
```javascript
// Opção 1: Evento DOMContentLoaded (mais comum)
document.addEventListener('DOMContentLoaded', function() {
// Seu código aqui
});
// Opção 2: IIFE (Immediately Invoked Function Expression) – não polui escopo global
(function() {
'use strict';
// Seu código aqui
})();
```
---
2. 🎯 Selecionar elementos do DOM
```javascript
// Por ID
const meuBotao = document.getElementById('meuBotao');
// Por classe (retorna HTMLCollection)
const todosBotoes = document.getElementsByClassName('botao');
// Por seletor CSS (primeiro elemento)
const primeiroLink = document.querySelector('a.link');
// Todos os elementos que batem com o seletor
const todosOsCards = document.querySelectorAll('.card');
```
---
3. 🖱️ Adicionar eventos
```javascript
// Clique
meuBotao.addEventListener('click', function(event) {
console.log('Clicou!');
// event.preventDefault() para evitar comportamento padrão (ex: envio de form)
});
// Submit de formulário
const form = document.getElementById('meuForm');
form.addEventListener('submit', function(e) {
e.preventDefault(); // impede recarregar a página
// Pega valores dos campos
const nome = document.getElementById('nome').value;
});
// Tecla pressionada
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
console.log('ESC pressionado');
}
});
```
---
4. 📦 Manipular classes, estilos e atributos
```javascript
// Adicionar/remover classe
elemento.classList.add('ativo');
elemento.classList.remove('inativo');
elemento.classList.toggle('visivel'); // se tem, remove; se não, adiciona
// Alterar estilo direto
elemento.style.backgroundColor = 'red';
elemento.style.display = 'none';
// Atributos
img.setAttribute('src', 'nova-imagem.jpg');
const valor = img.getAttribute('alt');
```
---
5. 🔁 Criar elementos dinamicamente
```javascript
const novoDiv = document.createElement('div');
novoDiv.textContent = 'Texto criado via JS';
novoDiv.classList.add('meu-bloco');
// Adicionar como filho
document.body.appendChild(novoDiv);
// Ou inserir em um local específico
const container = document.getElementById('container');
container.prepend(novoDiv); // no início
container.append(novoDiv); // no final
```
---
6. 🌐 Requisições HTTP (API / AJAX)
```javascript
// Usando fetch (moderno)
fetch('https://api.exemplo.com/dados')
.then(response => response.json())
.then(dados => {
console.log(dados);
// manipular os dados na página
})
.catch(erro => console.error('Erro:', erro));
// Enviar dados (POST)
fetch('https://api.exemplo.com/enviar', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ nome: 'João', email: 'joao@email.com' })
})
.then(res => res.json())
.then(data => console.log('Resposta:', data));
```
---
7. 💾 Armazenamento local (LocalStorage)
```javascript
// Salvar dados
localStorage.setItem('tema', 'escuro');
localStorage.setItem('usuario', JSON.stringify({ id: 1, nome: 'Ana' }));
// Recuperar
const tema = localStorage.getItem('tema');
const usuario = JSON.parse(localStorage.getItem('usuario'));
// Remover
localStorage.removeItem('tema');
localStorage.clear(); // limpa tudo
```
---
8. ⏱️ Temporizadores e atrasos
```javascript
// Executar depois de X ms (setTimeout)
setTimeout(function() {
alert('Passaram 3 segundos');
}, 3000);
// Repetir a cada X ms (setInterval)
let contador = 0;
const intervalo = setInterval(() => {
console.log(++contador);
if (contador === 5) clearInterval(intervalo); // para após 5 vezes
}, 1000);
```
---
9. 🧩 Módulo reutilizável (padrão)
```javascript
// Cria um objeto com funções e propriedades isoladas
const MeuModulo = (function() {
let valorPrivado = 0;
function funcaoPrivada() {
console.log('Só pode ser chamada internamente');
}
return {
incrementar: function() {
valorPrivado++;
return valorPrivado;
},
resetar: function() {
valorPrivado = 0;
}
};
})();
// Uso:
MeuModulo.incrementar(); // 1
```
---
10. ✅ Validação de formulário simples
```javascript
function validarFormulario(event) {
const email = document.getElementById('email').value;
const senha = document.getElementById('senha').value;
if (!email.includes('@')) {
alert('Email inválido');
event.preventDefault();
return false;
}
if (senha.length < 6) {
alert('Senha precisa ter no mínimo 6 caracteres');
event.preventDefault();
return false;
}
return true;
}
// Aplicar no submit
form.addEventListener('submit', validarFormulario);
```
---
🧰 Como montar seu próprio script personalizado
Com esses blocos você cria qualquer coisa. Exemplo de combinação:
```javascript
document.addEventListener('DOMContentLoaded', () => {
// 1. Selecionar botão
const btn = document.querySelector('#carregar-dados');
// 2. Evento de clique
btn.addEventListener('click', () => {
// 3. Fetch na API
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => res.json())
.then(post => {
// 4. Criar elemento dinâmico
const div = document.createElement('div');
div.innerHTML = `<h2>${post.title}</h2><p>${post.body}</p>`;
document.getElementById('resultado').appendChild(div);
// 5. Salvar no localStorage
localStorage.setItem('ultimoPost', JSON.stringify(post));
});
});
});
```
---
📌 Dica final
Sempre comece com:
· 'use strict' no topo (evita erros silenciosos)
· Verifique se os elementos existem antes de manipulá-los (if (elemento) { ... })
· Use console.log() para debugar
Se precisar de um código pronto para uma situação específica (ex: slider de imagens, menu responsivo, contador de visitas), é só pedir!
