Prazer em desenvolver software
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
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
© 2019 Criado por Ramon Durães.
Ativado por
Você precisa ser um membro de DevBrasil para adicionar comentários!
Entrar em DevBrasil