Javascript Styles and some tips
0 likes366 views
The document provides examples and discussion of different JavaScript coding styles and techniques for classes and objects. It compares using prototypes versus closures and scopes to define object properties and methods. It also provides tips for organizing code through namespacing, avoiding small magics, and preventing stateful code.
![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());](https://image.slidesharecdn.com/javascriptstyles-120423093537-phpapp02/85/Javascript-Styles-and-some-tips-3-320.jpg)
![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());](https://image.slidesharecdn.com/javascriptstyles-120423093537-phpapp02/85/Javascript-Styles-and-some-tips-12-320.jpg)
![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());](https://image.slidesharecdn.com/javascriptstyles-120423093537-phpapp02/85/Javascript-Styles-and-some-tips-20-320.jpg)
![people = [Person.new(18), Person.new(22), Person.
new(65)];
canDrink = [];
for person in people
if (person.age > 20)
canDrink.push(person);
end
end](https://image.slidesharecdn.com/javascriptstyles-120423093537-phpapp02/85/Javascript-Styles-and-some-tips-33-320.jpg)
![<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);
});](https://image.slidesharecdn.com/javascriptstyles-120423093537-phpapp02/85/Javascript-Styles-and-some-tips-45-320.jpg)
Javascript Styles and some tips
- 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
- 6. Kinda looks like a Class
- 7. Allows changing behavior of existing instances through prototype (but that's actually a bad thing)
- 8. Cons
- 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" won't work (but that's 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 that but it's nice to understand what's happening
- 30. Monkey-patching Array, Function, and String's fine don't 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); end end
- 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 5 class Horse extends Animal move: -> alert "Galloping..." super 45 sam = new Snake "Sammy the Python" tom = new Horse "Tommy the Palomino" sam.move() tom.move()
- 37. Why are you writing your Ruby in my JavaScript?
- 38. Moving on
- 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); });