Underscore.js é uma pequena biblioteca de códigos utilitários voltados principalmente para a manipulação de estrutura de dados.
Por míseros 4kb você ganha funcionalidades como map, select e invoke, além de uma engine de templating que, por si só, já faz valer o uso da biblioteca.
Outro ponto legal é que os scripts procuram sempre utilizar recursos nativos do navegador, ou seja, em browsers modernos a biblioteca tira proveito das implementações de forEach, map, indexOf, filter etc.
Utilizando
O processo é simples e conhecido. Basta fazer o download do código-fonte e incluir o script em sua página/aplicação. Todas as novas funcionalidades ficam disponíveis através do objeto global da biblioteca, o caractere underscore: _. Funciona basicamente como o $ do jQuery.
Vejamos agora algumas das principais funções disponibilizadas.
Coleções (arrays e objetos)
each
Este método varre uma lista de elementos e retorna a chave (quando houver) e o valor para uma função pré-determinada.
[cce lang=”javascript”]
_.each([‘BA’, ‘MT’, ‘RJ’, ‘RN’, ‘RS’], function (estado) { console.log(estado); });
_.each({RJ: ‘Rio de Janeiro’, SP: ‘São Paulo’, RS: ‘Rio Grande do Sul’}, function (estado, sigla) { console.log(estado + ‘/’ + sigla); });
[/cce]
map
A função map retorna uma nova lista de elementos criada a partir de uma função executada em cada um dos itens da lista original.
[cce lang=”javascript”]
var times = [‘Flamengo’, ‘Fluminense’, ‘Vasco’, ‘Botafogo’];
_.map(times, function (time) { return time + ‘-RJ’; });
// [“Flamengo-RJ”, “Fluminense-RJ”, “Vasco-RJ”, “Botafogo-RJ”]
[/cce]
filter
O utilitário filter busca por elementos que retornem verdadeiro no teste especificado.
[cce lang=”javascript”]
var multiplosDeTres = _.filter([1, 2, 3, 4, 5, 6, 7, 8, 9], function(num){ return num % 3 == 0; });
// [3, 6, 9]
[/cce]
find
Diferentemente do método _filter_, o _find_ retorna apenas o primeiro elemento que passe no teste especificado.
[cce lang=”javascript”]
var primeiroMultiploDeTres = _.find([1, 2, 3, 4, 5, 6, 7, 8, 9], function(num){ return num % 3 == 0; });
// 3
[/cce]
pluck
O método _pluck é uma versão muito usada do utilitário _map_ que retorna uma lista formada por valores de uma propriedade específica.
[cce lang=”javascript”]
var estados = [{sigla: ‘RJ’, nome: ‘Rio de Janeiro’},
{sigla: ‘SP’, nome: ‘São Paulo’},
{sigla: ‘RS’, nome: ‘Rio Grande do Sul’}],
nomes = _.pluck(estados, ‘nome’);
// [“Rio de Janeiro”, “São Paulo”, “Rio Grande do Sul”]
[/cce]
max, min
Os métodos max e min retornam os maiores e menores valores em uma lista. Estes valores podem ser tanto os números em uma lista simples, como valores de propriedades de um objeto quando você especifica uma função.
[cce lang=”javascript”]
var numeros = [100, 32, 29, 105, 30];
_.min(numeros);
// 29
_.max(numeros);
// 105
var times = [{nome: ‘Flamengo’, titulos: 6},
{nome: ‘Fluminense’, titulos: 2},
{nome: ‘Vasco’, titulos: 4},
{nome: ‘Botafogo’, titulos: 1}];
_.max(times, function (time) { return time.titulos });
// {nome: “Flamengo”, titulos: 6}
[/cce]
sortBy
Este método ordena uma lista do maior para o menor valor. O parâmetro de ordenação pode ser uma propriedade comum dos objetos ou uma função comparativa.
[cce lang=”javascript”]
// usando a mesma variável times acima 🙂
_.sortBy(times, ‘titulos’).reverse();
// [{nome: “Flamengo”, titulos: 6}, {nome: “Vasco”, titulos: 4}, {nome: “Fluminense”, titulos: 2}, {nome: “Botafogo”, titulos: 1}]
[/cce]
Arrays
first, last
Os métodos first e last retornam, respectivamente, os primeiros e os últimos elementos de um array. Você pode especificar, como segundo parâmetro, a quantidade de itens a ser retornada.
[cce lang=”javascript”]
var linguagens = [‘ruby’, ‘python’, ‘php’, ‘java’];
_.first(linguagens, 2);
// [“ruby”, “python”]
_.last(linguagens);
// java
[/cce]
union
O método union retorna uma lista com os elementos únicos de dois ou mais arrays.
[cce lang=”javascript”]
_.union([1, 2, 3], [4, 3], [10, 2, 9])
// [1, 2, 3, 4, 10, 9]
[/cce]
difference
O utilitário difference retorna elementos de um array que não estão presentes em outros arrays.
[cce lang=”javascript”]
var times = [‘Flamengo’, ‘Vasco’, ‘Botafogo’, ‘Fluminense’];
var segundaDivisao = [‘Vasco’, ‘Botafogo’];
var terceiraDivisao = [‘Fluminense’];
_.difference(times, segundaDivisao, terceiraDivisao);
// [“Flamengo”]
[/cce]
indexOf
O método indexOf retorna o índice de um elemento no array especificado.
[cce lang=”javascript”]
var times = [‘Flamengo’, ‘Vasco’, ‘Botafogo’, ‘Fluminense’];
_.indexOf(times, ‘Vasco’);
// 1
[/cce]
Funções
bind
Não confunda o bind do Underscore.js com o bind do jQuery. Aqui, este método associa um objeto a uma função, ou seja, o this no contexto da função será o objeto informado. Você ainda pode passar valores para os parâmetros da função.
[cce lang=”javascript”]
var retornaTotalArtigos = function () { return this.nome + ‘: ‘ + this.totalArtigos };
retornaTotalArtigos = _.bind(retornaTotalArtigos, {nome: ‘Davi Ferreira’, totalArtigos: 12});
retornaTotalArtigos();
// Davi Ferreira: 12
[/cce]
once
O método once cria uma função que só pode ser executada uma única vez. As próximas chamadas da função vão sempre retornar o valor da primeira execução.
[cce lang=”javascript”]
var dataCarregamentoInicial = function () { return +new Date; };
dataCarregamentoInicial = _.once(dataCarregamentoInicial);
dataCarregamentoInicial();
dataCarregamentoInicial();
// as duas chamadas vão retornar sempre o mesmo timestamp
[/cce]
Objetos
keys, values
Os métodos acima retornam, respectivamente, os nomes e os valores das propriedades de um objeto.
[cce lang=”javascript”]
_.keys({RJ: ‘Rio de Janeiro’, SP: ‘São Paulo’, RS: ‘Rio Grande do Sul’});
// [“RJ”, “SP”, “RS”]
_.values({RJ: ‘Rio de Janeiro’, SP: ‘São Paulo’, RS: ‘Rio Grande do Sul’});
// [“Rio de Janeiro”, “São Paulo”, “Rio Grande do Sul”]
[/cce]
clone
Este método clona um objeto, mantendo suas referências.
[cce lang=”javascript”]
_.clone({RJ: ‘Rio de Janeiro’, SP: ‘São Paulo’, RS: ‘Rio Grande do Sul’});
// {RJ: ‘Rio de Janeiro’, SP: ‘São Paulo’, RS: ‘Rio Grande do Sul’}
[/cce]
funções verificadoras
A biblioteca Underscore.js oferece uma vasta gama de funções verificadoras para objetos, entre elas: isEqual, isEmpty, isFunction e isNull.
[cce lang=”javascript”]
var obj = {},
obj2 = {};
_.isEmpty(obj);
// true
obj = {site: ‘Tableless’, categorias: [‘JavaScript’. ‘jQuery’, ‘HTML5’]};
obj2 = {site: ‘Tableless’, categorias: [‘JavaScript’. ‘jQuery’, ‘HTML5’]};
_.isEqual(obj, obj2);
// true
obj = function () { console.log(‘Sou uma funcção!’); };
_.isFunction(obj);
// true
[/cce]
Utilitários
mixin
Este método permite a criação de suas próprias funções utilitárias no objeto Underscore.
[cce lang=”javascript”]
_.mixin({
isEven : function(number) {
return number % 2 ? false : true;
}
});
_.isEven(3);
// false
_.isEven(10);
// true
[/cce]
escape
O método escape transforma caracteres como “&” e “/” para utilização dentro de um bloco HTML.
[cce lang=”javascript”]
_.escape(‘
Tableless: JavaScript, HTML & CSS
‘);
// Tableless: JavaScript, HTML & CSS
[/cce]
template
Por fim, um método para aplicar templates em seu código JavaScript:
[cce lang=”javascript”]
var times = [{nome: ‘Flamengo’, titulos: 6},
{nome: ‘Fluminense’, titulos: 2},
{nome: ‘Vasco’, titulos: 4},
{nome: ‘Botafogo’, titulos: 1}],
tpl = “ – título(s) ”;
_.template(tpl, {times: times});
// Flamengo – 6 título(s) Fluminense – 2 título(s) Vasco – 4 título(s) Botafogo – 1 título(s)
[/cce]
Para facilitar e aumentar a legibilidade, o seu template pode ser declarado em uma tag script separada:
[cce lang=”html”]
[/cce]
Estes foram apenas alguns exemplos de métodos e funções utilitárias presentes na biblioteca Underscore.js. Para saber mais sobre o projeto, visite o site oficial.
