Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

JavaScript Hacks

2.521 visualizaciones

Publicado el

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.

Publicado en: Tecnología
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

×