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.

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 that's actually a bad thing)

8. Cons

9. Where's my scope?

10. Everything's 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" 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

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');