BRN Souza

Objetivo: Entender como parametrizar funções JS usando JSON.

Pré-requisitos:

• Javascript (básico) » Funções
• JSON (básico) » O que é JSON?

Antes de conhecer o JSON, quando eu precisava ler o código javascript (para uma manutenção por exemplo) e me deparava com uma função JS que recebia muitos parâmetros, a identificação do que cada parâmetro representava era difícil, eu tinha que deduzir pelo valor de cada parâmetro passado, o que exatamente ele referenciava dentro da minha função ou então abrir o arquivo onde a função estava e ler o nome dos parâmetros recebidos na declaração dela.
Ex.:

addCarro('porsche', '911 Turbo', 480, 310, '3,5', 'prata', 2009, 2009, true);

O que é “480″? E o “310″? Será que “2009″ é o ano de fabricação do carro?

Usando JSON para parametrizar nossas funções, nós conseguimos fazê-la mais legível quando de sua chamada. Para o exemplo acima, teríamos algo parecido com isso:

addCarro(
    {
        montadora     : 'porsche',
        modelo        : '911 Turbo',
        cavalos       : 480,
        velocidadeMax : 310,
        DeZeroaCem    : '3,5',
        cor           : 'prata',
        anoFabricacao : 2009,
        anoModelo     : 2009,
        possuiFoto    : true
    }
)

Muito melhor de ler e usar, né? Os benefícios de se utilizar essa forma ficam ainda mais evidentes quando precisamos passar para nossas funções estruturas mais complexas de dados por exemplo arrays ou ainda outros JSON’s. Vejamos o exemplo:

addCarro(
    {
        montadora     : 'porsche',
        modelo        : '911 Turbo',
        cavalos       : 480,
        velocidadeMax : 310,
        DeZeroaCem    : '3,5',
        cor           : 'prata',
        anoFabricacao : 2009,
        anoModelo     : 2009,,
        fotos         : [
            {arquivo:'imgs/9876/01.jpg', legenda:'Pintura impecável'},
            {arquivo:'imgs/9876/02.jpg', legenda:'Interior todo em couro'},
            {arquivo:'imgs/9876/03.jpg', legenda:'Rodas de liga leve 20"'},
            {arquivo:'imgs/9876/04.jpg', legenda:'Visão lateral'}
        ]
    }
)

Aqui nós não dizemos simplesmente se tem ou não foto, mas sim quais são as fotos e para cada foto temos a informação do nome do arquivo e também da legenda (para exibirmos na página por exemplo).

Agora, como fica a declaração da função e como ler JSON passado como parâmetro:

function addCarro(jsonOptions){
    //Lendo o JSON passado como parâmetro
    jsonOptions.montadora;       // 'porsche'
    jsonOptions.modelo;          // '911 Turbo'
    jsonOptions.cavalos;         // 480
    jsonOptions.velocidadeMax;   // 310
    jsonOptions.DeZeroaCem;      // '3,5'
    jsonOptions.cor;             // 'prata'
    jsonOptions.anoFabricacao;   // 2009
    jsonOptions.anoModelo;       // 2009
    jsonOptions.fotos;           // [Objeto Array]
    jsonOptions.fotos[0];        // [Objeto JSON]
    jsonOptions.fotos[0].arquivo;// 'imgs/9876/01.jpg'
    jsonOptions.fotos[3].legenda;// 'Visão lateral'
 
    //Iterando sobre as fotos
    for(var i=0, j=jsonOptions.fotos.length; i<j; i++){
      jsonOptions.fotos[i].arquivo; //lê o arquivo
      jsonOptions.fotos[i].legenda; //lê a legenda
   }
}

Se você tiver alguma dúvida referente a manipulação do JSON leia este post onde eu detalho como trabalhar com ele.

Qualquer dúvida, é só falar.

Problema: Como criar uma função Javascript que possa receber indefinidos valores como parâmetro e ainda assim tratá-los corretamente?

Pré-requisitos:

• Javascript (básico)

Para ilustrar a utilização do recurso, vamos imaginar que precisamos criar uma função para a qual passemos uma lista de ID’s de elementos e essa função oculte todos eles.

Essa função nunca sabe quantos serão os elementos passados para ela, e ainda assim deve ocultar tantos elementos quantos forem passados.

Queremos então poder chamar a função com algo mais ou menos assim:

hide('inputA', 'comboB', 'imgC', 'divD');

E quando chamada a função irá então ocultar os elementos cujos ID’s sejam os passados como parâmetro.

Nossa função fica assim:

function hide(){
    qtdArgumentos = arguments.length;
    for (var i = 0; i < qtdArgumentos; i++) {
        var element = arguments[i];
        element = document.getElementById(element);
        element.style.display = 'none';
    }
}

Toda função JS tem como um de seus atributos o “arguments” que é um array. Este atributo sempre é preenchido no momento em que a função é chamada e automaticamente preenchido com os argumentos passados como parâmetro na chamada da função.

No nosso caso, para o exemplo acima, teremos como valor do atributo “arguments” quando da chamada da função o seguinte array: ['inputA', 'comboB', 'imgC', 'divD'].

Em JS todo array possui um atributo chamado “length” que guarda o tamanho do array referenciado. Quando usamos “arguments.length” descobrimos quantos foram os argumentos passados para a função. Desta maneira podemos iterar sobre cada um dos elementos (linhas 3 a 7), e fazermos o que tem que ser feito, no nosso caso, ocultar cada um dos elementos passados por parâmetro.

Antes de usar a jQuery (que resolve isso pra gente de outra maneira) eu usava muito, funções com argumentos dinâmicos, para coisas simples que deveria ser repetidas individualmente para cada elemento, como setar uma classe de erro em todos os divs mal preenchidos [setClass('classErro', 'divA', 'divB', 'divC', ..., 'divZ')], habilitar ou desabilitar elementos em um form [disable('inputA', 'inputB', 'inputC', ..., 'inputZ')], dentre outras coisas.

Qualquer dúvida é só falar