Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Hacks

2,498 views

Published on

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.

Published in: Technology

JavaScript Hacks

  1. 1. JavaScript Hacks Caio Ribeiro Pereira
  2. 2. about me Web Developer na Concrete Solutions Entusiasta JavaScript e Node.js Participo do NodeBR, Meteor Brasil e DevInSantos
  3. 3. http://casadocodigo.com.br my books
  4. 4. 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
  5. 5. Let's hack!
  6. 6. 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
  7. 7. 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()
  8. 8. 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…
  9. 9. 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
  10. 10. 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.
  11. 11. Convertendo para Numbers console.log(+”1234”); // 1234 console.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
  12. 12. Convertendo para boolean O 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(“user@mail.com”); console.log(user.hasNick); // false
  13. 13. Condicional inline com short-circuits if (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
  14. 14. Default values function User(email, nick) { this.email = email; this.nick = nick || email; } var user = new User(“user@mail.com”); console.log(user.nick); // user@mail.com Utilize o operador "||" entre uma variável e um valor default
  15. 15. 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"
  16. 16. Float to Integer var value = 100.1233123; console.log(~~value); // 100 O operador "~~" converte float para integer
  17. 17. Calculando idade // 24 * 3600 * 365.25 * 1000 = 31557600000 function 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
  18. 18. Thanks! Blog http://udgwebdev.com Github https://github.com/caio-ribeiro-pereira Twitter @crp_underground

×