DevBrasil

Prazer em desenvolver software

Deixando o seu Java Script em um modelo arquitetural

Alguns meses atrás eu estava participando de um grande projeto para o Submarino porém nesse projeto nós estávamos enfrentando um grave problema, nós não estávamos conseguindo ter 100 % de controle dos nossos Java Script.

Por causa dessa falta de controle nós estávamos enfrentando inúmeros bugs e a cada vez que precisávamos adicionar uma nova funcionalidade ou até mesmo dar uma manutenção em uma tela era sempre uma tarefa muito árdua.

Depois de algumas horas cheguei a seguinte arquitetura, segue abaixo o modelo arquitetural.

Conhecendo as camadas da arquitetura:

Service: Camada responsável por consumir e expor algumas funcionalidade que pode ser reutilizada por outras funcionalidade no sistema.

Model: Camada responsável por prover métodos e informações necessárias para a nossa View e comunicar-se com nossa aplicação server-side.

View: Camada responsável por prover métodos e funcionalidades para iterações com o usuário.

Implementando o modelo arquitetural:

Vamos imaginar por um momento que temos um sistema e precisamos realizar um cadastro de participante.

“O código completo do projeto pode ser consultado no final do artigo.”

Dentro do arquivo Participante.js localizado na pasta Scripts temos a seguinte implementação.

var ParticipanteService = {
    validacaoEmail: function (email) {
        return email.length > 3;
    }
};
var ParticipanteModel = function () {
 
    var self = this;
    self.url = "/Participante/InserirParticipante";
    self.Participante = {
        nome: '',
        sobreNome: '',
        email: '',
        senha: ''
    };
 
    self.inserirParticipante = function (done) {
        $.ajax({
            url: self.url,
            type: 'POST',
            data: self.Participante,
            success: function (retorno) {
                return done(retorno);
            }
        });
    };
 
};
var ParticipanteView = function () {
    var self = this;
    self.model = new ParticipanteModel();
    self.salvar = function () {
        self.model.Participante = $("form").serialize();
        self.model.inserirParticipante(function (retorno) {
            alert(retorno);
        });
    };
    self.render = function () {
        $("#btnGravar").click(function () {
            var isEmail = ParticipanteService.validacaoEmail($("#email").val());
            if (isEmail)
                self.salvar();
            else
                alert("O e-mail não é valido!");
 
        });
    }();
}();

Conclusão: Podemos observar que com essa arquitetura proposta conseguimos separar as responsabilidades e cada camada e especialista em uma determinada tarefa, uma simples brecha no nosso código pode ser o início do fracasso do nosso projeto.

Links Uteis:

Código fonte do projeto: https://github.com/julianosaless/ModeloArquiteturalJS

Guia de referência: http://knockoutjs.com/, http://backbonejs.org/ ,http://devbrasil.net/group/jquery,

http://devbrasil.net/group/aspnet

Exibições: 278

Curtir

2 membros curtem isto