Arquitetura JavaScript

Agenda

Javascript: Por que se preocupar?
Orientação a Objetos
Namespaces
Objetos Literais
Sugestão de Arquitetura
Demos

JavaScript

Por que se preocupar?

JavaScript

Por que se preocupar?

E o que fazer?

Organizar o código de forma lógica e estruturadamente.

Logicamente

Orientação a Objetos
Namespaces
Boas práticas

Estruturalmente

Convencionando a organização do código em pastas e arquivos

Orientação a Objetos

Em JavaScript?!

Orientação a Objetos

Em JS, tudo é objeto!


// dados primitivos

var numero = 1;
numero      // 1
numero.valueOf();   // 1
numero.toString();  // "1"

// funções

var funcao = function () { alert("funcao foi chamada"); };
funcao();     // alert: funcao foi chamada
funcao.toString();  // "function () { alert("funcao foi chamada"); }"

Orientação a Objetos

Em JS, utiliza-se a mesma ideia das linguagens clássicas

Objetos com membros públicos e privados
Herança
Até polimorfismo!

Ok, vamos usar OO.

Mas ainda pode haver desorganização no código, como resolver isso?

Usando Namespaces!

Namespaces

Mais esse no JavaScript?!

Namespaces

O que é?

Técnica empregada para evitar colisões de nomes de classes/objetos em um contexto global
É a mesma idéia do namespace no C# e do pacote no Java

Namespaces

Por que usar?

Separa as classes/objetos em grupos de mesmo interesse
Facilita a manutenção

Namespaces

Como usar?

Através de Objetos Literais - lógica
Estruturação de pastas e arquivos - estrutura

Objetos Literais

O que são?

Um conjunto de pares nome/valor separados por vírgula que estão contidos num bloco
Nome: qualquer nome válido na linguagem JS
Valores: dados primitivos, métodos/funções e outros objetos literais

Objetos Literais

Exemplo

// objeto literal

var pessoa = {
  nome: 'Fulano',
  idade: 25,
  endereco: {
    rua: 'Av. São Paulo',
    numero: 1000,
    bairro: 'Centro',
    toString: function () {
      console.log(this.rua + ', ' + this.numero + ' - ' + this.bairro);
    }
  },
  toString: function () { console.log(this.nome + ', ' + this.idade); }
};

Objetos Literais

Exemplo (continuação)


// acessando propriedades

pessoa.nome   // "Fulano"
pessoa.idade    // 25 
pessoa.endereco.rua // "Av. São Paulo"

// acessando metodos

pessoa.toString();    // alert: Fulano, 25
pessoa.endereco.toString(); // alert: Av. São Paulo, 1000 - Centro

Let's code!

Hands-on

Namespaces

Implementação


// Objeto global - Namespace raiz

MeuAplicativo = {
  Plugin: {},  // Namespace para plugins
  Comportamento: {}  // Namespace para configurar comportamentos
};

namespace.js

Namespaces

Plugin


// Objeto que encapsula um plugin qualquer

MeuAplicativo.Plugin.Tabela = function (idElemento) {  
  this.tabela = $('#' + idElemento).dataTables(); 
};

MeuAplicativo.Plugin.Tabela.prototype.limparTabela = function () {   
  this.tabela.fnClearTable();
};

tabelaPlugin.js

Namespaces

Comportamento

// Objeto que configura os comportamentos de uma página
MeuAplicativo.Comportamento.UsuarioIndex = function () {
  var that = this;
  var tabela = new MeuAplicativo.Plugin.Tabela("usuario-grid");

  that.limparTabela = function (event) {
    event.preventDefault();
    tabela.limparTabela();
  };
};

// Usando jQuery para iniciar a execução do código
$(function () { 
  var script = new MeuAplicativo.Comportamento.UsuarioIndex();
  
  // Bind de eventos
  $('a.limparTabela').click(script.limparTabela); 
});

usuarioIndex.js