Javascript Styles and some tips

JavaScript stylesand some tips

What you usually see around the Internet

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

Pros

Somewhat organized

Kinda looks like a Class

Allows changing behavior of existing instances

through prototype(but that's actually a bad thing)

Cons

Where's my scope?

Everything's public

A better approach

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

Pros

Everything contained in a single Function

Proper scoping

Control over public interface

Cons

"this" keyword is scary.apply, .call

How to fix?

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

Pros

No more "this"

Cons

Memory usage

"prototype" won't work(but that's actually good)

Tips

Namespacing

var ove = ove || {};ove.model = ove.model || {}; ove.model.Auction = function (...) {

// ...}; var auction = new ove.model.Action();

There are libraries for thatbut it's nice to understand what's happening

Monkey-patching Array, Function, and String's

finedon't mess with the DOM though

Function.prototype.curry = function () { ... }; String.prototype.each = function () { ... }; Array.prototype.foldLeft = function () { ... };

Know when you see this?

people = [Person.new(18), Person.new(22), Person.new(65)]; canDrink = [];for person in people

if (person.age > 20)canDrink.push(person);

endend

Why are you writing your Java in my Ruby?

What about this?

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()

Why are you writing your Ruby in my JavaScript?

Moving on

Avoid small magics

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

Use the scope

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

});

images.each(function (image) { var li = $('<li></li>') li.click(function () { view.dialog.openImage(image.id()); }); container.append(li);});

Avoid state

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

elseselectedCars.remove(this);

});

$('#cars .car input:checked');