Javascript Styles and some tips
-
Upload
vitor-baptista -
Category
Technology
-
view
226 -
download
0
description
Transcript of 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');