JavaScript: Singuska

Abaixo um código para faciliar o uso de intervals e minimizar o uso de variáveis globais:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var interval = (function(){
 
	var ids = {}, names = {};
 
	return {
		add: function(name, timer, fn) {
			var interval = setInterval(fn, timer);
			ids[interval] = name;
			names[name] = interval;
		},
		stop: function(name) {
			clearInterval(names[name]);
		}
	}
 
})();

A utilização aconteceria mais ou menos assim:

1
2
3
4
5
6

function coisas_legais() {
   alert('Função legal');
 
}
 
interval.add('invervalo_legal', 300, coisas_legais);

Para parar a execução deste intervalo:

1

interval.stop('intervalo_legal')

Um padrão recorrente na programação em jQuery é executar uma função quando um link é clicado e, concomitantemente, evitar o que navegador carrege uma nova página ao ser clicado. É possível criar uma função que sirva de atalho para esta tarefa repetitiva:

1
2
3
4
5
6

$.fn.extend({clickPrevented: function(fn) {
	$(this).click(function(e) {
		e.preventDefault();
		fn(e);
	});
}});

A utilização aconteceria mais ou menos assim:

1
2
3

$('#apenas_um_cara').clickPrevented(function(){
        alert('Você vai continuar nesta página após o alert.');
});

É comum a necessidade de converter strings para inteiros. Por exemplo: se você obtiver um valor de um campo input, e precisar fazer alguma conta ou validação com esse valor é prudente converter primeiro para um número. A função que deve ser utilizada para isso chama-se parseInt.

1
2

var valor = '020';
alert(parseInt(valor, 10));

Pra que serve o segundo parâmetro?

Esta função tem uma “funcionalidade” complicada. Se a string começar com “0″ ela vai ser convertida utilizando base 8 (sistema octal) ao invés de base 10. O segundo argumento determina qual base numérica deve ser utilizada. A string 20 seria convertida para o número octal 16. Veja o que acontece quando omitimos o segundo parâmetro:

1
2

var valor = '020';
alert(parseInt(valor));

É, portanto, boa prática sempre utilizar o segundo argumento para evitar qualquer transtorno. Ou, se você quiser treinar funções anônimas, a seguinte brincadeira também é possível:

1
2
3
4
5
6
7
8
9
10

(function(){
	var original = parseInt;
	parseInt = function(n, b) {
		b = b || 10;
		return original(n, b);
	};
})();
 
var valor = '020';
alert(parseInt(valor));

Esse fragmento de código só precisa ser executado uma vez (no seu init.js, por exemplo). Repare que se você rodar o exemplo 2 novamente, o resultado já será o correto. O que fizemos foi reescrever a função parseInt usando ela mesma.

Ah, o Internet Explorer. O que dizer de bom desse nosso querido amiguinho? Tem ele razão em algo? Sim, tem. Vamos declarar um objeto:

var bruceLee = {
    forca: 8,
    agilidade: 10,
    defesa: 7, // esta vírgula está sobrando
};

Muito bem. O problema do objeto é uma vírgula sobrando logo depois do número sete. O único navegador que reclama do erro de sintaxe, e pára a execução do script é o Internet Explorer. Já perdi horas e mais horas tentando encontrar uma solução para perceber que na verdade era uma vírgula que eu havia esquecido de apagar.

Funções em JavaScript podem ser passadas como argumentos de outras funções. Esta prática é inclusive muito explorada pelos programadores. Se você ainda não esta familiarizado com o uso de funções, leia este post primeiro. Vamos então aos exemplos.

Funções como argumentos

1
2
3
4
5
6
7
8
9
10

function imprimir(fn) {
    var texto = fn();
    alert(texto);
}
 
function gerador() {
    return 'Sou um texto!';
}
 
imprimir(gerador);

Neste primeiro exemplo, declaramos uma função chamada “imprimir” que espera como argumento uma outra função. Ela executa esta outra função, pega o seu retorno e passa ele como argumento de “alert”.

É importante perceber que na linha 10 “gerador” é passado como argumento sem os parênteses “()” no final. Ou seja, ela não está sendo invocada, somente passada. A execução da função ocorre na linha 2. Uma variação do nosso exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13

function imprimir(fn) {
    var texto = fn('por');
    alert(texto);
}
 
function gerador(lingua) {
    if (lingua === 'por') {
        return 'Sou um texto!';
    }
    return 'I´m a text!';
}
 
imprimir(gerador);

Agora “gerador” espera um parâmetro “lingua”. Este parâmetro é passado por “imprimir” no ato da execução, linha 2.

Funções anônimas

O nome pode parecer estranho mas o conceito é bem simples: funções anônimas são funções que não tem nome:

1
2
3
4
5
6
7
8
9
10
11

function imprimir(fn) {
    var texto = fn('por');
    alert(texto);
}
 
imprimir(function(lingua) {
    if (lingua === 'por') {
        return 'Sou um texto!';
    }
    return 'I´m a text!';
});

“Imprimir” continua sendo exatamente igual. Aguarda uma função como parâmetro. A diferença é que, ao invocarmos “imprimir”, declaramos uma função anônima ao mesmo tempo. Como ela não tem nome, não existe a possibilidade dela ser executada por uma outra função ou em outro momento do código. Somente “imprimir” a contém e pode executá-la.

E pra quê serve isso?

Funções como argumentos e funções anônimas são amplamente utilizadas como “callbacks”. Se você atrela um evento de click a um botão, algo deve acontecer quando este botão for clicado. Este “algo” é uma função. Ou então uma requisição Ajax. Vamos supor que temos uma requisição que busca se um determinado email já foi ou não cadastrado em um banco de dados. Quando a requisição finalmente termina, uma resposta é enviada ao nosso programa. Esta resposta é normalmente passada como argumento de uma função “callback”.