OOP em JS – Um jeito mais fácil

24 de dezembro de 2015 por admin

Os exemplos do post anterior são bons para iniciar no estudo de JS. Mas eu não utilizo nenhum dos 3. Após várias experimentações e um auxílio grande do pessoal do Code Review chegamos a um consenso deste método abaixo que ao menos no momento atende minhas necessidades. O código me parece mais limpo e sem tantas linhas que estão lá apenas para fazer funcionar a herança.

As questões do Code Review que permitiram a criação deste método podem ser encontradas nos seguintes links (somente em inglês):

http://bit.ly/1St8qf3
http://bit.ly/1YXIlor
http://bit.ly/1mrq7j9
http://bit.ly/1NY74po

Sou especialmente grato ao @tkellehe pelo empenho em me auxiliar, aos usuários @Flambino e @SirPython pelas boas contribuições e também a @Joseph the Dreamer e @Quill – HAT MANIAC que responderam.

Vantagens:

Código limpo. Não há muito código apenas para fazer a OOP funcionar.
Não há necesisdade de usar .call ou .bind para a hirarquia, que fazer o código mais difícil de entender.
Herança claramente definida.
A maior parte dos conceitos OO estão disponíveis.
Clara separação entre as camadas de visão e negócio uma vez que eu não preciso definir nada no HTML. Todas as ações são ligadas pelo JavaScript.

Até onde estou conhecendo no momento estes métodos me atendem bem. Qualquer crítica ou comentário sobre problemas que este tipo de método para OO em JS possa causar é muito bem vinda.

Download dos exemplos: OOJSSimplificado-ptBR.tar.gz

Técnica 4 – Module Pattern Simplificado

JSFiddle: https://jsfiddle.net/t9z86qjj/

index.html

base.js

viewBase.js

viewCalc.js

operandos.js

randomizador.js

operacoes.js

Técnica 5 – AMD Simplificado

JSFiddle: http://jsfiddle.net/y4fLhrjg/
(o código do exemplo abaixo foi ligeiramente adaptado para o site)

A estrutura de pastas é similar ao exemplo anterior:

da mesma forma jquery.min.js, lodash.js e require.js são as bibliotecas de mesmo nome, base.js é a classe Base que permite a herança e app.js (o arquivo que configura a biblioteca require.js) fica ssim::

por isso no arquivo index.html só precisamos de uma biblioteca:

base.js

viewBase.js

viewCalc.js

operandos.js

randomizador.js

operacoes.js

principal.js

Orientação a objeto em javascript

Uma das maiores dificuldades para quem está começando no desenvolvimento em javascript, especialmente quem vem do desenvolvimento em outras linguagens é como fazer a orientação a objeto corretamente. Foi difícil para mim também. Eu sei, muitos dizem que é uma linguagem prototipada, que tem que ter uma abordagem diferente, etc. Mas mesmo com essa abordagem, alguns conceitos básicos são absolutamente indispensáveis para qualquer desenvolvedor com um mínimo de experiência. Precisamos poder organizar o código em classes, precisamos poder herdar classes, precisamos poder chamar o código da super classe e expandi-lo, precisamos ter variáveis públicas e privadas, precisamos poder inicializar propriedades da classe, precisamos poder fazer poliformismo decentemente.
Isso não é pedir muito. Isso é o mínimo de qualquer linguagem moderna.
Foi procurando achar como fazer esse mínimo em js que vi que qualquer desenvolvedor iniciante precisa procurar muito, precisa ler muito e em muitos lugares diferentes pra poder fazer pelo menos esse ‘mínimo’.
Neste post eu sumarizo 3 técnicas para aplicar os conceitos de OO em javascript. O objetivo é que o desenvolvedor iniciante possa começar a desenvolver para ir depois se aprofundando no jeito JS de programar.
Pra quem quer se aprofundar, recomendo o excelente livro “Princípios de Orientação a Objetos em JavaScript” por Nicholas C. Zakas

Download dos exemplos: OOJS-ptBR.tar.gz

O exemplo para todas as técnicas baseia-se em uma aplicação simples de cálculo das 4 operações, com este HTML base:

Ou seja, fica assim:

OOjs

Técnica 1 – usando prototype e new

JSFiddle: http://jsfiddle.net/kujo27x4/

Técnica 2 – Padrão Módulo (Module Pattern)

Padrão Módulo é um padrão de organização de código em módulos que podem conter múltiplas classes, organizadas no mesmo contexto. Para este exemplo vamos usar uma classe por módulo.

JSFiddle: http://jsfiddle.net/yj1aq81n/

Técnica 3 – AMD – Asynchronous Module Definition (Definição de Módulo Assíncrona)

Esta técnica, é uma extensão do Padrão Módulo, carregando de forma assíncrona os módulos necessários. Não é uma funcionalidade nativa do Javascript, necessitando de bibliotecas para ser utilizada. Vamos usar uma das mais conhecidas: Require.js, colocando cada classe em um arquivo.

JSFiddle: http://jsfiddle.net/vozwy3fj/
(o código do exemplo abaixo foi ligeiramente adaptado para o site)

Utilizaremos a seguinte estrutura de pastas:

jquery.min.js e require.js são as bibliotecas de mesmo nome. Já o app.js é o arquivo que configura o aplicativo require.js:

Para esta versão o HTML ficará assim:

principal.js

operadores.js

randomizador.js

operacoes.js