Arquivo

Textos com Etiquetas ‘parâmetro’

Parametrizando funções JavaScript com JSON

30, maio, 2009 5 comentários

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

Pré-requisitos:

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.

Categories: JSON, Javascript, Programação Tags: , , ,