Zepto.Js , tamanho não é documento :)
Javascript é um linguagem bastante difundida no mundo frontend, com diversas variações e simplificações para facilitar a vida do desenvolvedor. É com esse intuíto que a library Zepto.js foi criada. Permitir o melhor aproveitamento do tempo do desenvolvedor. Aumentar sua produtivide, descomplicando tarefas que custariam muito tempo, fazendo uso de apenas pequenos comandos dessa plataforma leve e otimizada da linguagem JavaScript.
Muito semelhante ao seu principal concorrente Jquery.js (Lider da área, vale a pena salientar :) ). Também permite interação entre HTML, CSS e JavaScript, manipulação de DOM, assim como também Ajax.
Como obter e usar a biblioteca zepto.js
Pode ser obtido pelo site da library em dois arquivos:
- Em sua versão completa com comentários zepto.js v1.2.0
- Em sua versão simplificada, contendo apenas o código zepto.min.js v1.2.0
Ou ainda, execute no terminal:
npm install zepto
Depois basta realizar sua chamada no seu documento.
<script src="zepto.js" charset="utf-8"></script>
Vamos ver alguns poucos exemplos de uso dessa librarie.
$.camelCase
Recebe como parametro uma string com hífen e transforma em camelCase. Caso já esteja em camelCase não será alterada.
$.camelCase('hello-there') //=> "helloThere"
$.camelCase('helloThere') //=> "helloThere"
size
Recebe como parâmetro um array e devolve o número de elementos de uma coleção.
size() ⇒ number
On
Adiciona manipuladores de evento para os elementos de uma coleção. Recebe como paramentros o tipo, o seletor e a função a ser executada ou false, nesse caso é o mesmo que passar uma função que retorna false.
Esse é basicamente o protótipo da função;
on(type, [selector], function(e){ ... }) ⇒ self
on(type, [selector], [data], function(e){ ... }) ⇒ self
on({ type: handler, type2: handler2, ... }, [selector]) ⇒ self
on({ type: handler, type2: handler2, ... }, [selector], [data]) ⇒ self
Exemplo de aplicação:
var elem = $('#content')
// observe all clicks inside #content:
elem.on('click', function(e){ ... })
// observe clicks inside navigation links in #content
elem.on('click', 'nav a', function(e){ ... })
// all clicks inside links in the document
$(document).on('click', 'a', function(e){ ... })
// disable following any navigation link on the page
$(document).on('click', 'nav a', false)
$.getJSON
$.getJSON(url, function(data, status, xhr){ ... }) ⇒ XMLHttpRequest
$.getJSON(url, [data], function(data, status, xhr){ ... }) ⇒ XMLHttpRequest
Obter dados JSON através de solicitação GET Ajax. Este é um dos atalhos para o método $.ajax. Recebe como paramentros o endereço (URL) do arquivo e a função para consumir os dados. Como é mostrado no exemplo abaixo.
$.getJSON('/awesome.json', function(data){
console.log(data)
})
Enfim
zepto.js praticamente resolve muitas das necessidades dos desenvolvedores, similar ao Jquery e com um tamanho de arquivos bem menor, em sua versão completa por apenas 57.3k não comprimido. E em sua versão min com tamanho de apenas 9,6k comprimidos. Sendo esse um diferêncial para uso em dispositivos móveis. E outro diferencial, é que devido a sua construção modular, caso você não necessite de todas as funcionalidades dessa library, baixe apenas o que precise. Cabe ao desenvolvedor fazer sua avalização e decidir qual melhor a cada caso.
Para mais recursos, que são muitos, visite a página do zepto.js.