21

Quando trabalhamos com linguagens orientadas a objetos como Java e C# temos a disposição todo um processo de análise e projeto que nos ajuda a saber como projetar a aplicação de forma a escrever códigos mais coesos, menos acoplados e que sejam mais fáceis de manter. O processo de análise e projeto orientados a objetos serve pra qualquer linguagem orientada a objetos e por isso esse processo nem depende da linguagem escolhida.

No momento estou trabalhando, porém, com JavaScript. Basicamente, tenho uma divisão em camadas de forma que o client da aplicação é feito com JavaScript e o servidor (onde está realmente a lógica toda) é feito com C# e usa orientação a objetos.

Enquanto a parte do servidor eu sei projetar e tudo mais, a do Javascript eu fico bastante perdido. Acontece que JavaScript tem uma noção de objetos diferente. A linguagem não tem classes, não tem interfaces, não é fortemente tipada e isso me parece ser bastante impedimento pra usar o processo de análise e projeto de orientação a objetos como conheço no JavaScript.

Dessa forma, existe algum processo de análise e projeto pra JavaScript? Principios, recomendações e padrões que nos permitam escrever código JavaScript mais desacoplado, mais fácil de manter e com maior qualidade?

2
  • Está um pouco amplo. Tu pode ter um site rico em Javascript ou usar apenas jQuery para uma ou outra coisa. Quando se usa pouco Javascript a análise e teste unitários são dispensáveis, pois são apenas eventos simples. Quando se usa frameworks completos como o EmberJS ou similar, ele tem suas próprias conversões/forma de trabalhar, o que já vai te ajudar. Há vários frameworks que prometem corrigir a "pouca tipagem" do Javascript puro, mas a maioria dos sites mantêm quase 100% da lógica no backend mesmo. É mais fácil, o Javascript é muito ruim em questão de mantenibilidade.
    – user7261
    Commented 28/05/2014 às 0:43
  • 3
    @Andrey concordo que JS não é tão verboso quanto outras linguagens, mas a questão de manutenabilidade vai muito além disso. Desde que seu código seja claro e propriamente modularizado, com cada módulo desempenhando uma função específica e sendo bem testado (unit tests), não há problema algum com manutenabilidade. E a parte de "a maioria dos sites mantêm quase 100% da lógica no backend, JS é muito ruim em manutenabilidade" é contestável também -- temos tido um grande crescimento das SPAs (Single-page Applications) nos últimos anos, sem contar que o Node.js é um back-end bem popular hoje em dia. Commented 28/05/2014 às 3:07

3 Respostas 3

28

Um ponto de partida para organizar e estruturar seu código JavaScript é o module pattern. Trata-se de isolar seu código em porções menores (módulos). As principais vantagens disso:

  • Manter o escopo global limpo, substituindo variáveis globais por propriedades de objetos;
  • Permite implementar algo similar a propriedades e métodos privados;
  • Organizar o código separando-o em componentes com responsabilidades definidas

A maneira mais comum de se implementar esse padrão é com expressões de função imediatamente invocadas (IIFE):

var NomeDoModulo = (function() {
    // corpo do módulo
    var privada = "foo";
    return {};
}());

Claro que o exemplo acima é inútil, mas ilustra a estrutura básica dessa implementação: uma única variável global (ou do escopo mais externo) é declarada. Qualquer variável declarada dentro do módulo não é visível fora dele. Um objeto é retornado (geralmente, um namespace inteiro ou uma função construtora), expondo somente o necessário.

Se necessário, é possível injetar uma dependência no módulo, passando um parâmetro para a IIFE. Por exemplo:

var NomeDoModulo = (function(html) {
    // corpo do módulo
    var privada = "foo";
    return {};
}(document.body.innerHTML));

Um exemplo ligeiramente mais útil, criando uma "classe":

var Cliente = (function(){

    // Variável privada do módulo
    var nomePadrao = "Cliente sem nome";

    // Construtor
    function Cliente(nome) {        
        // Propriedade pública de cada instância 
        this.nome = nome || nomePadrao;
    }

    // Método público
    Cliente.prototype.metodo = function() {
        // ...
    }

    // Expõe o construtor
    return Cliente;

}());

var c1 = new Cliente();
c1.nome; // "Cliente sem nome"
var c2 = new Cliente("Exemplo S.A.");
c2.nome; // "Exemplo S.A."

Esse tipo de estrutura serviu de base para a implementação dos formatos de módulo adotados pelos gerenciadores de dependências mais utilizados em JavaScript, como o AMD, utilizado pelo Require.js, e o CommonJS, utilizado pelo Node.js. Após estudar o module pattern, sugiro experimentar como o Require e o Node gerenciam módulos. Eu pessoalmente prefiro o formato AMD do Require, mas qualquer um dos dois deve te ajudar bastante a estruturar seu código.

1
  • Excelente o livro do Addy Osmani, obrigado pela dica! Commented 20/09/2015 às 1:10
4

Você, além de utilizar um framework, pode utilizar o coffeescript para facilitar sua vida.

http://coffeescript.org

Ele vai compilar o código em JS, mas o código vai ser muito mais limpo e simples. Inclusive a criação de classes. Olha um exemplo de herança:

    class Animal
      constructor: (@nome) ->

      mover: (metros) ->
        console.log @nome + " moveu #{metros}m."

    class Cobra extends Animal
      mover: ->
        console.log "Rastejando..."
        super 5

    class Cavalo extends Animal
      mover: ->
        console.log "Galopando..."
        super 20

    cobrinha = new Cobra "Cobrinha"
    cavalinho = new Cavalo "Cavalinho"

    cobrinha.mover()
    // Rastejando...
    // Cobrinha moveu 5m.
    cavalinho.mover()
    // Galopando...
    // Cavalinho moveu 20m.

Mas no final, lembre-se, tudo vai se tornar js, portanto, é bom você conhecer bem a linguagem, as características e limitações.

2
  • Gosto do CoffeeScript e utilizo, porém 80% do que ele faz é abstrair a sintaxe do Javascript apenas. Ele ajuda pouco quando se trata corrigir os defeitos do Javascript. "It's just Javascript".
    – user7261
    Commented 28/05/2014 às 1:15
  • Mas o que você sugere pra resolver os defeitos? Commented 28/05/2014 às 1:17
2

Um projeto JS organizado e de fácil manutenção pode ser obtido com o auxílio de alguns frameworks MVC para JS:

Alguns padrões interessantes para uso de OOP em JS podem ser encontrados em http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/ e http://javascript.info/tutorial/oop.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .