Parametrizando funções JavaScript com JSON
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.
Categories: JSON, Javascript, Programação função, Javascript, JSON, parâmetro
Compartilhe:
Ótimo artigo. Seus exemplos foram muito esclarecedores. Continue assim.
Abraço.
Isto é muito comum nas chamadas de plugins.
Ex.:
$(”a”).lightBox({{fixedNavigation:true,start:true,events:false});
Valew Alexandre. Se tiver alguma dúvida é só falar.
Exatamente. Usa-se muito isso em chamada de plugins. Eu, inclusive, só comecei a usar nas minhas funções depois de ver o uso nos plugins jQuery e aprender o funcionamento do JSON.
Parabéns pelos exemplos apresentados. Ficou a desejar o exemplo addCarro(
anoModelo : 2009,,<-erro
Não pare de atualizar o seu blog mlk. Sucesso!