Estendendo o JavaScript
Quem já acompanha o blog há mais de uma semana ou duas, notou que as postagens aumentaram de uns tempos pra cá. Os motivos que contribuiram para isso são muitos. O primeiro deles é que estou com FDQF (Falta Do Que Fazer), fim de bimestre, todos projetos terminados e entregues (os mais urgentes)… E outro que vale a pena ser citado: aumentou o incentivo para continuar escrevendo. Ontem registrei, em média, 50 visitantes, em lugar dos 18 a 25 habituais (avanço, não?). Não sei quanto vai durar, mas deu um “turbo boost” nas postagens. Cortando o papo furado, vamos ao que realmente interessa.
Meu propósito não é literalmente estender o JavaScript, mas sim alguns de seus objetos nativos, através da POO, aumentando a capacidade dessa linguagem.
Como estender os objetos?
Você teve coragem de perguntar isso? Espero que não. Como já disse na parte 2 sobre JavaScript OO, estendemos qualquer objeto através de prototype. Qualquer objeto mesmo, seja ele criado por nós mesmos ou nativo do JavaScript.
O meu objetivo aqui não é criar métodos extraordinários, é apenas estende-los, tornando algumas funções mais rápidas, economizando código. O negócio é aproveitar ao máximo os recursos que a linguagem nos dá.
Estendendo o Array
O objeto array é muito utilizado na programação. Hoje daremos um uso “incomum” para ele. Transformaremos ele em uma query string. Não é nada muito avançado, já que o JavaScript não nos dá tantas opções. O resultado será: 0=java&1=script, ou seja, um parâmetro (índice numérico do array) com seu valor (valor do array). Vamos ao trabalho:
var nossoArray = new Array("java","script"); // Aqui é o nosso array
Array.prototype.toQueryString = function() { };Como diria Jack Estripador, vamos por partes. Primeiramente, criamos um simples array. A segunda linha que é o grande segredo: estendemos o objeto array, adicionando um método toQueryString. Fácil como tirar um doce de uma criança.
É, realmente muito fácil. A parte complicada vem exatamente agora. Depois dela tudo fica fácil novamente. Não é exatamente parte do script, mas sim uma questão de lógica. E a pergunta que vale 1 milhão é: … … … como vamos pegar os valores do array, se não passamos nenhum argumento, o array não pode ser acessado por nossoArray (até pode, mas a POO vai por água abaixo, o objetivo é a reutilização de código), e agora?
Analisemos: quando criamos um array, o que ele retorna?
var nossoArray = new Array("java","script");
alert(nossoArray); // Retorno do ArrayIsso mesmo, um objeto array retorna ele mesmo. Como referenciamos algo que se refere a si mesmo? this. Agora a parte fácil: juntar tudo com “&”. Vamos preencher nossa função:
var nossoArray = new Array("java","script"); // Aqui é o nosso array
Array.prototype.toQueryString = function() {
var queryString = "";
for(var i = 0; i < this.length; i++) {
if(this[i].indexOf("&") < 0 && queryString.length > 0) queryString += "&" + i + "=" + this[i];
else queryString += i + "=" + this[i];
}
return queryString;
};
var nossaQueryString = nossoArray.toQueryString();
alert(nossaQueryString);Nada de complicado. Como já disse esses dias: pensar é a alma do negócio. Pode não ser, e realmente não é, a melhor função que você já viu na vida, mas se você entender o conceito, terá um mundo de aventuras pela frente.
Estendendo Strings
Agora vamos fazer o reverso do nosso método. Transformar query strings em arrays associativos. Como já sabemos, o objeto String retorna a string em si, como nos arrays. Vamos aplicar isso em nosso método:
String.prototype.toArray = function() {
var arrayQuery = Array();
var tempArray = this.split("&");
for(var i = 0; i < tempArray.length; i++) {
var anotherArray = tempArray[i].split("=");
arrayQuery[anotherArray[0]] = anotherArray[1];
}
return arrayQuery;
}Mais simples ainda, e mais eficiente, já que os índices do array retornado aqui também podem ser strings (nossoArray['primeiro_par']). Acho que não há nada de extraordinário. Vamos adiante.
Estendendo Objetos
Objetos são as coisas mais complicadas de se estender. Quase tudo em JavaScript pode ser tratado como um objeto. Trabalharemos aqui somente com tags, os objetos DOM. Adicionaremos um método que transforma um elemento para negrito, ou para fonte normal.
Essa técnica foi testada apenas no Firefox. Para estender objetos DOM de uma maneira cross-browser, leia: Estendendo Objetos DOM.
Como temos que desobrir com qual objeto estamos trabalhando, devemos nos assegurar que trabalhamos com uma tag. Lembre-se de testar o objeto com o qual se trabalha, para ter certeza de que não haverá funcionamento indesejado.
Nosso código:
Object.prototype.Strong = function(bold) {
if(this.tagName) { // Se for tag...
var weight = bold == true ? "bold" : "normal"; // True = bold; false = normal
this.style.fontWeight = weight; // Aplicando o estilo
}
return this; // Retornando o elemento
}O objeto seria algo do tipo document.getElementById(). Não funciona no IE, servindo só pra exemplo mesmo (quem souber fazer funcionar no IE e puder me dizer eu agradeço).
Outros objetos tornam-se mais difíceis de serem estendidos. Resta a você aprender a utilizar. Existe uma infinidade de coisas para se aprender ainda.
Ressaltando: nota agora a vantagem de se usar a POO? O código pode ser reutilizado em muitas situações, inclusive o próprio código nativo. Boa sorte no desbravamento do mundo prototype!
