Tableless

Busca Menu

Underscore.js: cinto de utilidades JavaScript

Seja o primeiro a comentar por

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

‘);
// <p>Tableless: JavaScript, HTML & CSS</p>
[/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 = “<% _.each(times, function(time) { %> <li><%= time.nome %> – <%= time.titulos %> título(s)</li> <% }); %>”;
_.template(tpl, {times: times});
// <li>Flamengo – 6 título(s)</li> <li>Fluminense – 2 título(s)</li> <li>Vasco – 4 título(s)</li> <li>Botafogo – 1 título(s)</li>
[/cce]

Para facilitar e aumentar a legibilidade, o seu template pode ser declarado em uma tag script separada:

[cce lang=”html”]
<script type=”text/html” id=”tplTimes”>
<% _.each(times, function(time) { %>
<li><%= time.nome %> – <%= time.titulos %> título(s)</li>
<% }); %>
</script>

<script>
var times = [{nome: ‘Flamengo’, titulos: 6},
{nome: ‘Fluminense’, titulos: 2},
{nome: ‘Vasco’, titulos: 4},
{nome: ‘Botafogo’, titulos: 1}],
tpl = $(‘#tplTimes’).html();
_.template(tpl, {times: times});
</script>
[/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.

Publicado no dia