Underscore.js: cinto de utilidades JavaScript

Conheça esta biblioteca JavaScript que apresenta um conjunto sólido de utilitários para manipular listas e estruturas de dados.

por Davi Ferreira 19/09/2012 Comentários

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][1] 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</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) { %>

  • <%= time.nome %> – <%= time.titulos %> 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.

    [1]: http://underscorejs.org/ “”