Legibilidade com with() statement no javascript

Hora de falar de Javascript. Hoje vou falar sobre um recurso que o Javascript oferece para diminuir as referências aos objetos. Utilizando o with() você consegue deixar o seu código mais legível e prático.

Veja um exemplo:

Uma implementação comum, sem o with()

function foo(){
        var x = document.forms[0].elements[0].value;
        var y = document.forms[0].elements[1].value;
        var z = document.forms[0].elements[2].options[document.forms[0].elements[2].selectedIndex].text;
}

A mesma implementação, COM o with()

function foo(){
        with(document.forms[0]){
                var x = elements[0].value;
                var y = elements[1].value;
                with(elements[2]){
                        var z = options[selectedIndex].text
                }
        }
}

Viram como o código ficou menor e mais legível? Não não precisamos ficar repetindo instruções para se referenciar a um determinado objeto.

Gostaram? Ok, mais um exemplo então:

var a, x, y;
var r = 10;
with (Math) {
   a = PI * r * r;
   x = r * cos(PI);
   y = r * sin(PI/2);
}

Na forma tradicional teríamos que ficar nos referenciando ao objeto Math do javascript: Math.cos(PI) ou Math.sin(PI/2).

Atenção

O uso do with() pode ser nocivo. Como também o eval(), e também como o ajax pode ser nocivo e se pensar no mesmo raciocínio, muitos outros recursos disponíveis na linguagem podem ser nocivos se não forem aplicadas de forma correta. Caso for de interesse, leia mais em: http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/

É isso aí, um abraço a todos.

Posts Relacionados:

Trabalhando com Mascaras em Java Script

Recentemente, tive problemas com algumas funções já disponíveis na internet para poder facilitar a aplicação de mascaras em campos do tipo string.

Por exemplo: o cliente precisava que no momento que eu fosse digitando a data no formato (00/00/000) o sistema automaticamente, iria colocando as barras “/” para facilitar o preenchimento do campo.

Baseando-se neste ,desenvolvi uma função em JavaScript para aplicar qualquer tipo de mascara que você precisar basta informar o template da mesma:

/**
 * Formata o Campo de acordo com a mascara informada.
 * Ex de uso: onkeyup="AplicaMascara('00:00:00', this);".
 * @author Igor Escobar (blog@igorescobar.com)
 * @param Mascara String que possui a mascara de formatação do campo.
 * @param elemento Campo que será formatado de acordo com a mascara, voce pode informar o id direto ou o próprio elemento usando o this.
 * @returns {void}
 */
function AplicaMascara(Mascara, elemento){

	// Seta o elemento
	var elemento = (elemento) ? elemento : document.getElementById(elemento);
	if(!elemento) return false;

	// Método que busca um determinado caractere ou string dentro de uma Array
	function in_array( oque, onde ){
			for(var i = 0 ; i < onde.length; i++){
			if(oque == onde[i]){
				return true;
			}
		}
		return false;
	}
	// Informa o array com todos os caracteres que podem ser considerados caracteres de mascara
	var SpecialChars = [':', '-', '.', '(',')', '/', ',', '_'];
	var oValue = elemento.value;
	var novo_valor = '';
	for( i = 0 ; i < oValue.length; i++){
		//Recebe o caractere de mascara atual
		var nowMask = Mascara.charAt(i);
		//Recebe o caractere do campo atual
		var nowLetter = oValue.charAt(i);
		//Aplica a masca
		if(in_array(nowMask, SpecialChars) == true && nowLetter != nowMask){
			novo_valor +=  nowMask + '' + nowLetter;
		} else {
			novo_valor += nowLetter;
		}
		// Remove regras duplicadas
		var DuplicatedMasks = nowMask+''+nowMask;
		while (novo_valor.indexOf(DuplicatedMasks) >= 0) {
       		novo_valor = novo_valor.replace(DuplicatedMasks, nowMask);
    	}
	}
	// Retorna o valor do elemento com seu novo valor
	elemento.value = novo_valor;

}

Metodos de uso

Mascara para campos do tipo Data:

<input name="data" maxlength="10" onkeyup="AplicaMascara('XX/XX/XXXX', this);" type="text" />

<strong> Mascara para campos do tipo Hora:</strong>
<input name="hora" maxlength="8" onkeyup="AplicaMascara('XX:XX:XX', this);" type="text" /> 

Mascara para campos do tipo CEP:

<input name="cep" onkeyup="AplicaMascara('XXXX-XXX', this);" type="text" />  

Mascara para campos do tipo TELEFONE:

<input name="tel" onkeyup="AplicaMascara('(XX)XXXX-XXXX', this);" type="text" />  

Mascara para campos do tipo CPF:

<input name="cpf" onkeyup="AplicaMascara('XXX.XXX.XXX-XX', this);" type="text" />  

E por ai vai, basta seguir os exemplos e ser feliz ;) Espero ter contribuído!
[]’s

Posts Relacionados:

MooTools 1.2 Image Protector: dwProtector

Hoje venho apresentar para vocês uma biblioteca que achei bastante interessante, escrita para o Framework javascript MooTools, chamada Image Protector, é uma grande novidade e talvez um grande marco para os designers que se descabelam para poder proteger suas imagens.

Esta biblioteca foi criada justamente para os designers ou artistas, que odeiam ver seus trabalhos copiados e ripados em segundos após dias, semanas, anos de trabalho dedicado, e o pior, as vezes até roubo de autoria.

O MooTools 1.2 Image Protector previne:

  • right-click “Save Image As”.
  • Arrastar qualquer imagem para o desktop.
  • right-click “Save Background As”.
  • right-click “View Background Image”

Segue abaixo tudo o que você precisa:

MooTools 1.2 Image Protector JavaScript Class

//protector class
var dwProtector = new Class({

	//implements
	Implements: [Options],

	//options
	options: {
		image: 'blank.gif',
		elements: $$('img'),
		zIndex: 10
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);

		//make it happen
		this.protect();
	},

	//a method that does whatever you want
	protect: function() {
		//for each image that needs be protected...
		this.options.elements.each(function(el) {
			//get the element's position, width, and height
			var size = el.getCoordinates();
			//create the protector
			var p = new Element('img', {
				src: this.options.image,
				width: size.width,
				height: size.height,
				styles: {
					'z-index': this.options.zIndex,
					'left': size.left + 'px',
					'top': size.top + 'px',
					'position': 'absolute'
				}
			}).inject($(document.body),'top');
		},this);

	}
});

Exemplo de uso

window.addEvent('domready', function() {
	var protector = new dwProtector({
		image: '/blank.gif',
		elements: $$('.protect')
	});
});

Caso você queira testar o MooTools 1.2 Image Protector, basta acessar.

[]’s
Igor.

Posts Relacionados:

JavaScript não obstrutivo com JQuery

Apenas compartilhando com vocês um slide feito por Simon Willison no dia 6 de maio.

Unobtrusive JavaScript with jQuery

Posts Relacionados: