Jquery com MTV(MVC) - Jquery MTVe

"Model-view-controller (MVC) é um modelo de desenvolvimento de Software, atualmente considerado uma "arquitetura padrão" utilizada na Engenharia de Software." - Fonte: http://pt.wikipedia.org/wiki/MVC

Nada é mais problemático nos dias de hoje quanto a falta de padronização nos projetos. Após uma procura na internet encontrei alguns frameworks MVC para javascript, mas, nenhum me agradou. Alguns me pareceram bem completos, mas, não me atendiam muito bem.

Achei de bom senso criar um próprio, coloquei algumas ideias no papel e cheguei a uma primeira versão. Ele deveria ser leve, de fácil utilização e o mais simples possível.

Tentei aproximar ao máximo a forma do Framework Django trabalhar, e cheguei a seguinte estrutura:

• Model
• Template
• View
• events

Surge então o jQuery MTVe, farei uma pequena demostração sobre seu funcionamento.

Primeiramente, entre na página no GitHub do projeto serão necessários os arquivos que estão dentro da pasta src.

Model:

Nosso modelo irá fazer uma requisição na graph api do Facebook. Ela terá dois atributos. Um será chamado "me" ele armazenará o meu username e outro chamado "base" que será utilizado para requisitar dados de perfil de outros usuários.

var model = $.Model({
  me : 'carlos.maniero',
  base : 'http://graph.facebook.com/',
  profile : function() { return this.load('GET', this.base + this.me ); },
  find_profile : function(username) { return this.load('GET', this.base + username ); },
});

O método "profile" retorna os dados do meu perfil e o find_profile retorna os dados de um usuário qualquer.

O método load:
Como você deve ter percebido ambos os métodos do modelo utilizam o método load. Ele é o método responsável em fazer as requisições via Ajax. E possui os seguintes parâmetros:

• type: GET ou POST
• url: Endereço da requisição
• data: Json com dados a serem enviados
• options: Opções do método jQuery.ajax

O método get:

Para chamar um método ou acessar um atributo, usa-se o método get.
Exemplos:

model.get('me');
model.get('profile')();

 

Template:

O método template usa o jQuery.tmpl, ele ainda não está em faze final, mas, está bem estável. Então esse será o conteúdo do nosso template:
HTML: https://github.com/carlosmaniero/jQuery-MTVe/blob/master/demos/demo1.tmpl


Os arquivos de template podem ser salvos com a extensão tmpl ou escrito em forma de texto, no exemplo salvaremos em um arquivo .tmpl.

Javascript:

var template = $.Template({
  profile : 'demo1.tmpl'
});

Renderizando um template:
Para renderizar um template, basta utilizar o método método get passando como parâmetros o nome do atributo e o objeto que será usado para substituir no template.

Exemplo:
template.get('profile',json);

View (Controlador):

"O controlador (controller) recebe a entrada de dados e inicia a resposta ao utilizador ao invocar objetos do modelo, e por fim uma visão baseada na entrada. Ele também é responsável pela validação e filtragem da entrada de dados." - Fonte: http://pt.wikipedia.org/wiki/MVC

Vamos ao javascript:

var view = $.View({
 profile : function(){
   var data = $.parseJSON(model.get('profile')());
   $("table").append(template.get('profile',data));
 },
 find_profile : function(username){
   var data = $.parseJSON(model.get('find_profile')(username));
   $('table').append(template.get('profile',data));
 }
});

Events:

Nos eventos ficarão todas as função que serão usadas em nossos elementos.

Javascript:

var events = $.Events({
  profile : function(evt){
    evt.preventDefault();
    view.get("profile")();
    $(this).attr('disabled','true');
  },
  find_profile : function(evt){
    evt.preventDefault();
    var username = $("input[name=username]").val();
    view.get("find_profile")(username);
  }
});
$("#button_profile").click(events.get('profile'));
$("#button_find_profile").click(events.get('find_profile'));

Como eu disse anteriormente ele é bem simples, porém, bastante útil.

O exemplo completo você encontra na pasta demos do projeto.