Tecnologia

Transforme seus ajax em funções, transforme suas funções em objetos

Por: , outubro 7, 2013

A reutilização de código é um problema comum, existente em todos os tipos de projetos, em todas as linguagens, e que possui mil maneiras diferentes de ser resolvidos.

Neste artigo, trago um problema de reutilização de chamadas ajax em projetos javascript, e uma solução que aplicamos no nosso projeto.

Tome como exemplo a chamada ajax abaixo:

$.ajax({
   url: '/user/statistics',
   dataType: 'json',
   data: {userId: 1},
   success: function(user) {
       showInfoToUser(user);
   }
});

Se quiser reutilizar essa chamada para não duplicar o código, poderíamos criar uma função. Esta função poderia receber o id e o callback de success, ficando como mostrado abaixo

var getUserStatistics = function(userId, callback) {
   $.ajax({
       url: '/user/statistics',
       dataType: 'json',
       data: {userId: userId},
       success: function(user) {
           callback(user);
       }
   });
}

Nessa construção, sua chamada ficaria assim:

getUserStatistics(1, function(user) {
   showInfoToUser(user);
});

Até aqui nada de diferente. Mas vamos imaginar que depois de algum tempo de projeto, e da utilização dessa função em vários lugares, o cliente pede uma alteração na funcionalidade onde precisamos passar duas datas neste serviço.

Podemos mudar a assinatura da função para que esses parâmetros fossem adicionados ao fim, fazendo com que a sua chamada ficasse assim:

getUserStatistics(1, function(user) {
   showInfoToUser(user);
}, ‘01-10-2013’, ‘02-10-2013’);

(viu o parâmetro novo, escondido? não viu, né?)

Poderiamos também adicioná-los entre os parâmetros userId e callback, onde seria necessário a reescrita da chamada da função em todos os lugares que esta foi utilizada, o que pode se transformar em trabalho grande.

A sugestão para diminuir esses problemas seria ao invés de encapsularmos a chamada em uma função, poderiamos utilizar um objeto javascript. Veja o exemplo:

var UserStatisticsFetcher = function(userId, dateBegin, dateEnd) {
   var _callback;
      this.callback = function(callback) {
       _callback = callback;
       return this;
   };

   this.fetch = function() {
       $.ajax({
           url: '/user/statistics',
           dataType: 'json',
           data: {userId: userId, dateBegin: dateBegin, dateEnd: dateEnd},
           success: function(user) {
               _callback(user);
           }
       });
   };
}

E sua chamada:

var fetcher = new UserStatisticsFetcher(1, ‘01-10-2013’, ‘02-10-2013’);
fetcher.callback(function(user) {
   showInfoToUser(user);
}).fetch();

Nesse modelo, temos menos problemas para adicionar novos parâmetros, pois nosso callback não fica ‘perdido’ no meio dos outros parâmetros!

Essa é apenas uma das maneiras de tratarmos este problema.

Tem sugestões de melhoria? Ou mesmo alguma outra maneira completamente diferente? Poste nos comentários para discurtimos!

  • Receba nosso conteúdo em primeira mão.