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

A reutilização de código é um problema comum, existente em todos os tipos de projetos, em todas as linguagens,...

Data de publicação: 07/10/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!

Comentários

  1. André Valenti8 de outubro de 2013

    “A reutilização de código é um problema (…)” – achei que ela fosse solução :)!
    A ideia é boa. Na essência, consiste em orientar a objetos o código JavaScript das páginas.
    Se for levar a ideia da OO adiante, teríamos módulos JavaScript com dependências para outros módulos, sendo que um deles seria o UserStatisticsFetcher. Organizar dessa maneira pode ser muito interessante ou pode ser um pouco de exagero, caso a aplicação seja bem pequena ou tenha muito pouco JavaScript. Vale refletir a respeito.
    Para quem quiser saber mais, tenho uma minipalestra que fala de modularidade e BDD em JS: http://www.slideshare.net/AndrFi/javascript-firme

    Responder
  2. André Valenti8 de outubro de 2013

    Uma sugestão para o blog é usar algum plugin que permita ver o código mais formatado e com destaque de sintaxe.

    Responder
  3. Erick Zanardo8 de outubro de 2013

    André,
    Concordo contigo que pode virar um exagero dependendo do tamanho de sua aplicação, temos sempre que analisar os nossos problemas antes de aplicarmos qualquer solução, uma vez que temos várias maneiras de resolver este caso.
    Mas muito bom seu comentário! A ideia do artigo é realmente criar uma discussão para termos mais sugestões para este tipo de problema.
    E realmente muito bom os slides, uma ótima sugestão de leitura!
    []s

    Responder
  4. Filipe Carmona Simões17 de outubro de 2013

    Eu faria um pouco diferente:
    var UserStatisticsFetcher = function(userId, dateBegin, dateEnd) {
    this.fetch = function() {
    return $.ajax({
    url: ‘/user/statistics’,
    dataType: ‘json’,
    data: {userId: userId, dateBegin: dateBegin, dateEnd: dateEnd}
    });
    };
    }
    E faria:
    var fetcher = new UserStatisticsFetcher(1, ‘01-10-2013’, ‘02-10-2013’);
    fetcher.fetch().done(function(user) {
    showInfoToUser(user);
    });

    Responder
  5. Erick Zanardo17 de outubro de 2013

    Boa Filipe,
    Boa abordagem, fica ai mais uma sugestão para o pessoal de como resolver este problema.
    []s

    Responder
  6. Filipe Carmona Simões17 de outubro de 2013

    Mudei de ideia:
    var fetcher = new UserStatisticsFetcher(1, ‘01-10-2013’, ‘02-10-2013’);
    fetcher.fetch().done(showInfoToUser);

    Responder
  7. Rodrigo Ferreira de Souza31 de dezembro de 2013

    Outra idéia (que eu usaria) é não encapsular o callback, se precisar de um novo parametro, é só passar o método diretamente.. abraços!
    var getUserStatistics = function(userId, callback) {
    $.ajax({
    url: ‘/user/statistics’,
    dataType: ‘json’,
    data: {userId: userId},
    success: callback
    });
    };
    Isso também funciona para o Done:
    var fetcher = new UserStatisticsFetcher(1, ‘01-10-2013’, ‘02-10-2013’);
    fetcher.fetch().done(showInfoToUser);

    Responder
  8. Paulo Carvalho21 de junho de 2019

    Gosto muito desse artigo, este artigo são multissimo bom

    Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

catorze + 2 =

Posts relacionados

  1. Sobre a Dextra

    Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes.

  2. Categorias

Scroll to top