by Filipe Sabella

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