Javascript Styles and some tips

439 views

Published on

by Filipe Sabella

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Javascript Styles and some tips

  1. 1. JavaScript styles and some tips
  2. 2. What you usually see around the Internet
  3. 3. function Auction(initialPrice) { this.bids = []; this.initialPrice = initialPrice; this.currentPrice = initialPrice;}Auction.prototype.bid = function (amount) { this.currentPrice += amount; this.bids.push(amount);};Action.prototype.history = function () { return this.bids.copy();};var auction = new Auction(10.0);auction.bid(9001);console.log(auction.history());
  4. 4. Pros
  5. 5. Somewhat organized
  6. 6. Kinda looks like a Class
  7. 7. Allows changing behavior of existing instances through prototype (but thats actually a bad thing)
  8. 8. Cons
  9. 9. Wheres my scope?
  10. 10. Everythings public
  11. 11. A better approach
  12. 12. function Auction(initialPrice) { var currentPrice = initialPrice; var bids = []; this.bid = function (amount) { currentPrice += amount; bids.push(amount); }; this.history = function () { return bids.copy(); };}var auction = new Auction(10.0);auction.bid(9001);console.log(auction.history());
  13. 13. Pros
  14. 14. Everything contained in a single Function
  15. 15. Proper scoping
  16. 16. Control over public interface
  17. 17. Cons
  18. 18. "this" keyword is scary .apply, .call
  19. 19. How to fix?
  20. 20. function Auction(initialPrice) { var currentPrice = initialPrice; var bids = []; var api = {}; api.bid = function (amount) { currentPrice += amount; bids.push(amount); }; api.history = function () { return bids.copy(); }; return api;}var auction = new Auction(10.0);auction.bid(9001);console.log(auction.history());
  21. 21. Pros
  22. 22. No more "this"
  23. 23. Cons
  24. 24. Memory usage
  25. 25. "prototype" wont work (but thats actually good)
  26. 26. Tips
  27. 27. Namespacing
  28. 28. var ove = ove || {};ove.model = ove.model || {};ove.model.Auction = function (...) { // ...};var auction = new ove.model.Action();
  29. 29. There are libraries for thatbut its nice to understand whats happening
  30. 30. Monkey-patching Array, Function, and Strings fine dont mess with the DOM though
  31. 31. Function.prototype.curry = function () { ... };String.prototype.each = function () { ... };Array.prototype.foldLeft = function () { ... };
  32. 32. Know when you see this?
  33. 33. people = [Person.new(18), Person.new(22), Person.new(65)];canDrink = [];for person in people if (person.age > 20) canDrink.push(person); endend
  34. 34. Why are you writing your Java in my Ruby?
  35. 35. What about this?
  36. 36. class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved #{meters}m."class Snake extends Animal move: -> alert "Slithering..." super 5class Horse extends Animal move: -> alert "Galloping..." super 45sam = new Snake "Sammy the Python"tom = new Horse "Tommy the Palomino"sam.move()tom.move()
  37. 37. Why are you writing yourRuby in my JavaScript?
  38. 38. Moving on
  39. 39. Avoid small magics
  40. 40. <input id="field-id" /><input id="field-name" /><input id="field-email" />function validate(field) { var val = $(#field- + field).val(); // ...}validate(id);validate(name);validate(email);
  41. 41. Use the scope
  42. 42. images.each(function (image) { var li = $(<li></li>, { class: image, data-id: image.id()}); container.append(li);});<ul> <li class="image" data-id="1"></li></ul>$(li.image, container).click(function () { var id = this.attr(data-id); view.dialog.openImage(id);});
  43. 43. images.each(function (image) { var li = $(<li></li>) li.click(function () { view.dialog.openImage(image.id()); }); container.append(li);});
  44. 44. Avoid state
  45. 45. <ul id="cars"> <li class="car"> <input type="checkbox">First Car</input> </li> <li class="car"> <input type="checkbox">Carman</input> </li><ul>var selectedCars = [];$(#cars .car input).click(function () { if (this.checked) selectedCars.push(this); else selectedCars.remove(this);});
  46. 46. $(#cars .car input:checked);

×