javascript hacks
DESCRIPTION
Neste talk você vai aprender alguns hacks de JavaScript úteis na prática. Entendendo quando e como usá-las de forma que torne suas aplicações JavaScript/Meteor/Node.js mais rápidas.TRANSCRIPT
![Page 1: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/1.jpg)
JavaScript HacksCaio Ribeiro Pereira
![Page 2: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/2.jpg)
about me
Web Developer na Concrete Solutions
Entusiasta JavaScript e Node.js
Participo do NodeBR, Meteor Brasil e DevInSantos
![Page 4: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/4.jpg)
VanillaMasker A pure javascript input mask
Biblioteca minimalista que aplica máscara em inputs
Não usa jQuery ou Zepto, é puro javascript!
Extremamente leve (1 kbyte) em 160 linhas de código!
Mask money e mask patterns
Compatível com Bower e Meteor via AtmosphereJS
Github: bankfacil.github.io/vanilla-masker
![Page 5: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/5.jpg)
Let's hack!
![Page 6: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/6.jpg)
Caching array.length num loop
for (var i = 0; i < array.length; i++) { console.log(array[i]);}
for (var i = 0, len = array.length; i < len; i++) { console.log(array[i]);}
O cache evita contar o tamanho do array a cada iteração
Sem cache
Com cache
![Page 7: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/7.jpg)
Elementos do final do array
var array = [1,2,3,4,5,6];console.log(array.slice(-1)); // [6]console.log(array.slice(-2)); // [5,6]console.log(array.slice(-3)); // [4,5,6]
var array = [1,2,3,4,5,6];console.log(array[array.length-1]); // 6
Pegando último elemento usando array.length - 1
Pegando último elemento usando array.slice()
![Page 8: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/8.jpg)
Combinando arrays
var array1 = [1,2,3];var array2 = [4,5,6];array1.concat(array2); // [1,2,3,4,5,6]
var array1 = [1,2,3];var array2 = [4,5,6];Array.prototype.push.apply(array1, array2); console.log(array1); // [1,2,3,4,5,6]
O push.apply() é otimizado, pois ele trabalha em cima de um array existente enquanto o concat cria um novo array.
Combinando arrays com concat…
Combinando arrays com push.apply…
![Page 9: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/9.jpg)
Convertendo NodeList para array<html> <body> <p>item1</p> <p>item2</p> <p>item3</p> </body></html>
var itens = document.querySelectorAll(“p”);var array = [].slice.call(itens);
Esta ação libera as funções de array para um NodeList
![Page 10: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/10.jpg)
Array shuffle
var array = [1,2,3,4,5,6];array.sort(function(){ Math.random()-0.5 })
Array.prototype.shuffle = function() { return this.sort(function(){Math.random()-0.5}); };var array = [1,2,3,4,5,6];array.shuffle(); // [3,4,2,1,5,6]
ou
Útil para embaralhar elementos de um array.
![Page 11: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/11.jpg)
Convertendo para Numbers
console.log(+”1234”); // 1234console.log(+”not a number”); // NaN
O operador "+" converte uma string para number. Se o valor for inválido ele retorna um NaN (Not A Number)
O operador "+" também converte Date para milisegundos.
console.log(+new Date()); // 1303319203123
![Page 12: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/12.jpg)
Convertendo para booleanO operador "!!" converte variáveis para boolean
Valores falsos: false, 0, null, "" ou NaN. Valores verdadeiros: qualquer coisa diferente de valores falsos.
function User(email, nick) { this.email = email; this.nick = nick; this.hasNick = !!nick;}var user = new User(“[email protected]”);console.log(user.hasNick); // false
![Page 13: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/13.jpg)
Condicional inline com short-circuitsif (user.hasNick) { console.log(user.nick);}
user.hasNick && console.log(user.nick);
if (!user.hasNick) { user.nick = user.email;}
(!user.hasNick) && (user.nick = user.email);
condicional que executa uma função
condicional que atribui um valor para um objeto
versão inline
versão inline
![Page 14: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/14.jpg)
Default values
function User(email, nick) { this.email = email; this.nick = nick || email;}var user = new User(“[email protected]”);console.log(user.nick); // [email protected]
Utilize o operador "||" entre uma variável e um valor default
![Page 15: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/15.jpg)
Replace all
var names = “joao joao”;names.replace(/ao/, “ana”); // “joana joao”
var names = “joao joao”;names.replace(/ao/g, “ana”); // “joana joana”
A função replace() por default substitui apenas uma ocorrência
Para substituir N ocorrências utilize o parâmetro "/g"
![Page 16: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/16.jpg)
Float to Integer
var value = 100.1233123;console.log(~~value); // 100
O operador "~~" converte float para integer
![Page 17: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/17.jpg)
Calculando idade
// 24 * 3600 * 365.25 * 1000 = 31557600000function calcAge(birthday) { return ~~(((+new Date) - (+birthday)) / 31557600000);}calcAge(new Date(1985,1,1)); // 29
Função minimalista que calcula uma idade
Fonte: http://jsperf.com/birthday-calculation
![Page 18: JavaScript Hacks](https://reader038.vdocuments.net/reader038/viewer/2022100420/558a594ad8b42a93018b4579/html5/thumbnails/18.jpg)
Thanks!Blog http://udgwebdev.com
Github https://github.com/caio-ribeiro-pereira
Twitter @crp_underground