Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Não alimente os trolls: JavaScript é bonito - F...

Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Quase todo dia temos um post alegando que a linguagem é caótica e tende a destruir os sistemas que faz parte. Abordei as "armadilhas" comuns e como evitá-las. Coerção e 'this' dinâmico podem ser seus amigos!

Rafael Specht da Silva

June 27, 2015
Tweet

More Decks by Rafael Specht da Silva

Other Decks in Programming

Transcript

  1. “Se JavaScript não fosse tão feia, um livro chamado ‘JavaScript:

    The Good Parts’ não seria o best-seller da linguagem na Amazon” http://simpleprogrammer.com/2013/05/06/why-javascript-is-doomed/
  2. +

  3. var n1 = 2; var n2 = 3; n1 +

    n2 // 5 var n1 = 2 var n2 = ‘3’ n1 + n2 // ‘23’
  4. 0 == false // true 0 === false // false

    1 == true // true 1 === true // false
  5. var url1 = 'http://localhost/rs/santa-maria' var url2 = 'http://localhost/' var getState

    = function (url) { var stateMatch = url.match(/\/[a-z]{2}\//gi); var state = null; if (stateMatch !== null && stateMatch.length > 0) { state = stateMatch[0].replace(/\//g, ''); } return state; } getState(url1); // ‘rs’ getState(url2); // null
  6. “Se você trata null e undefined igualmente, é recompensado com

    comparações mais simples” https://speakerdeck.com/getify/new-rules-for-javascript
  7. if (stateMatch !== null && stateMatch.length > 0) { state

    = stateMatch[0].replace(/\//g, ''); } if (stateMatch && stateMatch.length) { state = stateMatch[0].replace(/\//g, ''); }
  8. var data = {name: 'Luke', surname: 'Skywalker'} var User =

    function (name, surname) { this.name = name; this.surname = surname; this.getCompleteName = function () { return this.name + ' ' + this.surname; } } var user = new User(data.name, data.surname) user.getCompleteName(); // 'Luke Skywalker'
  9. var data = {name: 'Luke'} var user = new User(data.name,

    data.surname) user.getCompleteName(); // 'Luke undefined'
  10. var data = {name: 'Luke'} var User = function (name,

    surname) { this.name = name; this.surname = surname || ''; this.getCompleteName = function () { return this.name + ' ' + this.surname; } } var user = new User(data.name, data.surname) user.getCompleteName(); // 'Luke '
  11. var UserView = function () { function setName (name) {

    this.name = name; } function setEvents () { var that = this; $('.hit').on('click', function () { console.log(this); // <button class="hit">Hit me!</button> $(this).toggleClass('odd'); that.setName($('.name').val()); }); } return { setEvents: setEvents, setName: setName } }
  12. function setEvents () { var that = this; $('.hit').on('click', function

    () { console.log(this); $(this).toggleClass('odd'); that.setName($('.name').val()); }); }
  13. function setEvents () { var button = $('.hit'); function handler

    () { console.log(this); button.toggleClass('odd'); this.setName($('.name').val()); } button.on('click', handler.bind(this)); } https://github.com/rssilva/presentations/blob/master/front-in-sm-2015/thisWorld/ex1.html
  14. var Human = { setName: function (name) { console.log(this); this.name

    = name; }, sayHi: function () { return 'Hi! My name is ' + this.name + '!'; } }
  15. var Ninja = { setName: Human.setName, setStealhLevel: function (level) {

    console.log(this) this.stealthLevel = level; } }
  16. var Turtle = { setHullLevel: function (level) { console.log(this); this.hullLevel

    = level; } } var NinjaTurtle = { setName: Ninja.setName, setStealhLevel: Ninja.setStealhLevel, setHullLevel: Turtle.setHullLevel }
  17. var a = [1, 2, 3]; var b = a;

    b.pop(); console.log(a); // [1, 2] console.log(b); // [1, 2]