Extendendo módulos com JavaScript

No post anterior falei um pouco sobre como desenvolver módulos em javascript, nesta parte vou falar sobre como adicionar ou sobrescrever funcionalidades dos seus módulos e como você pode montar um bom framework a partir deste conceito.

Criando um framework de métodos utilitários

Um bom exemplo é aquele arquivo utils.js que muitos criam para colocar todas as funções utilitárias.

Como forma de exemplificar, vamos criar um framework utilitário com o nome de superUtils, iremos usar um caractere simples para servir de alias, que tal _u? Logo, iremos extender nosso framework com módulos que serão “plugados” nele.

Imagine aqui que você pode utilizar esse mesmo conceito para montar uma boa arquitetura para algum componente ou plugin javascript que você esteja construindo.

O módulo principal

1
2

var _u = {};

O módulo principal armazena constantes e funções utilizadas pelos demais módulos, no nosso caso o módulo principal possui apenas a variável sem nenhuma estrutura interna, o próximo passo é criar módulos que extendem as funcionalidades do superUtils.js.

1
2
3
4
5

(function(_u){
  _u.alerta = function(mensagem){
    alert(mensagem);
  };
})(_u);

1
2
3
4
5
6

(function(_u){
  _u.alerta2 = function(mensagem){
    alert('alerta 2: ' + mensagem);
  };
})(_u);

1
2
3
4
5
6
7
8

...
<script src="superUtils/_u.js"/>
<script src="superUtils/alerta.js"/>
<script src="superUtils/alerta2.js"/>
<script>
  _u.alerta("teste");
  _u.alerta2("teste2");
</script>

No post anterior ou comentei que iríamos falar sobre essa parte final da estrutura do módulo, que recebe o _u como um parâmetro, ela permite que ocorra a extensibilidade, pois envia o objeto para o contexto interno da function, permitindo a sua sobrescrita ou extensão.

#####Criando mocks para alguns dos módulos

Digamos que no seu ambiente de teste alguns dos módulos do superUtils fazem chamadas para uma API via ajax e que você queira alterar esse comportamento para que ele apenas retorne a situação de sucesso, uma forma de fazer isso é criando módulos que sobrescrevem outros módulos.

1
2
3
4
5

(function(_u){
  _u.verificaCEP = function(cep, callback){
    $.ajax('//suaAPI/verificaCEP/' + cep, callback);
  };
})(_u);

1
2
3
4
5
6
7
8
9
10

(function(_u){
  _u.verificaCEP = function(cep, callback){
    var cepFake = {
      endereco: "rua teste",
      bairro: "bairro fake"
    };

    callback(cepFake);
  };
})(_u);

1
2
3
4
5
6
7
8
9
10

...
<script src="superUtils/_u.js"/>
<script src="superUtils/alerta.js"/>
<script src="superUtils/verificaCEP.js"/>
<script src="superUtils/verificaCEPMock.js"/>
<script>
  _u.verificaCEP("09000-000", function(cep){
    _u.alerta(cep.endereco);
  });
</script>

é isso galera, vou tentar falar sobre o Require.JS no próximo post e como ele pode nos ajudar a carregar os módulos e organizar as dependências entre os módulos de uma forma mais saudável para a sua aplicação, até mais.