Your SlideShare is downloading. ×
0
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Javascript Styles and some tips
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript Styles and some tips

222

Published on

by Filipe Sabella

by Filipe Sabella

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
222
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript styles and some tips
  • 2. What you usually see around the Internet
  • 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. Pros
  • 5. Somewhat organized
  • 6. Kinda looks like a Class
  • 7. Allows changing behavior of existing instances through prototype (but thats actually a bad thing)
  • 8. Cons
  • 9. Wheres my scope?
  • 10. Everythings public
  • 11. A better approach
  • 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. Pros
  • 14. Everything contained in a single Function
  • 15. Proper scoping
  • 16. Control over public interface
  • 17. Cons
  • 18. "this" keyword is scary .apply, .call
  • 19. How to fix?
  • 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. Pros
  • 22. No more "this"
  • 23. Cons
  • 24. Memory usage
  • 25. "prototype" wont work (but thats actually good)
  • 26. Tips
  • 27. Namespacing
  • 28. var ove = ove || {};ove.model = ove.model || {};ove.model.Auction = function (...) { // ...};var auction = new ove.model.Action();
  • 29. There are libraries for thatbut its nice to understand whats happening
  • 30. Monkey-patching Array, Function, and Strings fine dont mess with the DOM though
  • 31. Function.prototype.curry = function () { ... };String.prototype.each = function () { ... };Array.prototype.foldLeft = function () { ... };
  • 32. Know when you see this?
  • 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. Why are you writing your Java in my Ruby?
  • 35. What about this?
  • 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. Why are you writing yourRuby in my JavaScript?
  • 38. Moving on
  • 39. Avoid small magics
  • 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. Use the scope
  • 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. images.each(function (image) { var li = $(<li></li>) li.click(function () { view.dialog.openImage(image.id()); }); container.append(li);});
  • 44. Avoid state
  • 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. $(#cars .car input:checked);

×