JavaScript Hacks

JavaScript Hacks

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.

A444e1ba503ea1e02bb007a4f92df8c1?s=128

Caio Ribeiro Pereira

October 11, 2014
Tweet

Transcript

  1. JavaScript Hacks Caio Ribeiro Pereira

  2. about me Web Developer na Concrete Solutions Entusiasta JavaScript e

    Node.js Participo do NodeBR, Meteor Brasil e DevInSantos
  3. http:/ /casadocodigo.com.br my books

  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. Let's hack!

  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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Float to Integer var value = 100.1233123; console.log(~~value); // 100

    O operador "~~" converte float para integer
  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. Thanks! Blog http:/ /udgwebdev.com Github https:/ /github.com/caio-ribeiro-pereira Twitter @crp_underground