O Conceito de Encapsulamento para Produtividade

No desenvolvimento de software, o encapsulamento de funções visa centralizar lógicas repetitivas em módulos reutilizáveis. Quando diversas páginas de uma aplicação demandam a mesma funcionalidade, a prática de isolar esses métodos em arquivos externos evita a redundância, facilita a manutenção e reduz drasticamente o esforço de codificação.

Fluxo de Trabalho para Modularização

1. Identificação: Localize blocos de código que executam tarefas genéricas ou que são invocados em múltiplos contextos.
2. Isolamento: Crie um arquivo JavaScript dedicado (ex: utilitarios.js) e declare as funções utilizando parâmetros para torná-las flexíveis.
3. Integração: Referencie o arquivo no seu documento HTML através da tag <script>.

<script src="js/processamento-dados.js" type="text/javascript"></script>

Implementação Prática: Preparação de Dados para Gráficos

Ao trabalhar com bibliotecas de visualização como o ECharts, é comum precisar transformar dados brutos em estruturas específicas. Abaixo, demonstramos como encapsular uma função que organiza as séries de dados.

/**
 * Constrói a configuração de series para gráficos de linha.
 * @param {Array} listaEmpresas - Nomes das empresas (legendas).
 * @param {Array} matrizPrecos - Matriz de dados numéricos alinhados ao eixo X.
 * @returns {Array} Array de objetos formatados para o ECharts.
 */
function prepararSeriesEcharts(listaEmpresas, matrizPrecos) {
    const configuracaoSeries = [];

    listaEmpresas.forEach((nome, index) => {
        if (nome) {
            // Criação direta de objeto para evitar o uso de eval ou JSON.parse desnecessário
            const itemSerie = {
                name: nome,
                type: 'line',
                data: matrizPrecos[index]
            };
            configuracaoSeries.push(itemSerie);
        }
    });

    return configuracaoSeries;
}

// Exemplo de chamada do método encapsulado
const dadosFormatados = prepararSeriesEcharts(arrayEmpresas, arrayValores);

Refatoração de Funções Utilitárias

Abaixo apresentamos uma versão otimizada de uma biblioteca de manipulação de dados, focada em limpeza de arrays e formatação de datas.

/**
 * Higieniza arrays de preços, convertendo valores inválidos em zero.
 * @param {Array} dadosBrutos - Array multidimensional de preços vindo da API.
 */
function sanitizarValoresMonetarios(dadosBrutos) {
    return dadosBrutos.map(empresa => {
        return empresa.map(valor => {
            const numero = parseInt(valor);
            return isNaN(numero) || valor === null ? 0 : numero;
        });
    });
}

/**
 * Remove duplicatas de um array.
 */
function removerDuplicatas(colecao) {
    return [...new Set(colecao)];
}

/**
 * Formata timestamp ou string de data para o padrão YYYY-MM-DD.
 */
function formatarDataSimples(entrada) {
    const d = new Date(entrada);
    const mes = String(d.getMonth() + 1).padStart(2, '0');
    const dia = String(d.getDate()).padStart(2, '0');
    return `${d.getFullYear()}-${mes}-${dia}`;
}

/**
 * Mapeia a posição de dados cronológicos em relação a um eixo temporal mestre.
 */
function alinharIndicesCronologicos(datasOrigem, eixoX) {
    const matrizIndices = [];

    datasOrigem.forEach((datasEmpresa, i) => {
        matrizIndices[i] = [];
        datasEmpresa.forEach(data => {
            const idx = eixoX.indexOf(data);
            if (idx !== -1) {
                matrizIndices[i].push(idx);
            }
        });
    });

    return matrizIndices;
}

Integração no Documento Principal

Abaixo, um exemplo de como orquestrar as funções encapsuladas dentro de uma requisição assíncrona para renderizar um componente visual.

function inicializarDashboard() {
    const chartDom = document.getElementById("canvas-grafico");
    const instanciaEcharts = echarts.init(chartDom, 'dark');

    $.ajax({
        url: "https://api.exemplo.com/v1/precos",
        method: "GET",
        success: function(resposta) {
            // 1. Extração e Deduplicação
            const nomesEmpresas = Object.keys(resposta.dados);
            
            // 2. Normalização de Datas para o Eixo X
            let datasGlobais = [];
            nomesEmpresas.forEach(emp => {
                resposta.datas[emp].forEach(dt => {
                    datasGlobais.push(formatarDataSimples(dt));
                });
            });
            datasGlobais = removerDuplicatas(datasGlobais).sort();

            // 3. Processamento de Preços
            const precosLimpos = sanitizarValoresMonetarios(resposta.precos);
            const seriesProntas = prepararSeriesEcharts(nomesEmpresas, precosLimpos);

            // 4. Configuração Final
            const option = {
                title: { text: "Evolução de Preços por Empresa" },
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: datasGlobais },
                yAxis: { type: 'value' },
                series: seriesProntas
            };

            instanciaEcharts.setOption(option);
        }
    });
}

Ao adotar essa estrutura, o código torna-se modular. Se a lógica de formatação de data percisar mudar de YYYY-MM-DD para DD/MM/YYYY, a alteração será feita em um único ponto da aplicação, refletindo-se automaticamente em todos os módulos que consomem essa função.