Wakanday JS201 Best Practices
29
JavaScript 201 Best Practices Juergen Fesslmeier Wakanda Product Manager @chinshr
-
Upload
juergen-fesslmeier -
Category
Technology
-
view
2.025 -
download
0
Transcript of Wakanday JS201 Best Practices
JavaScript 201Best Practices
Juergen FesslmeierWakanda Product Manager
@chinshr
Styling and Naming
Form Follows Function
“There are only two hard things in Computer
Science: cache invalidation and naming
things.”Tim Bray (quoting Phil
Karlton)
Naming things
Variable names should be nouns
Function names should begin with a verb, E.g. isValid(), hasItems(), getProduct()
Avoid difficult to understand names, E.g. arrUqFolders
Logical names
Requires commentingvar resBackup = function(loc) {
…
});
Improve your function and variables namesvar restoreBackupTo = function(destination) {
…
});
Add style to your code
• Indent your code correctly
• Comment your code only if it adds value
/**
* @method getList
* @param {Object} options
* @return {Object}
**/
var getList = function(options) {
}
Use blocks instead of one-liners
When
if a()
b();
Becomes
if a()
b();
c();
It looks like
if a() {
b();
c();
}
But really means
if a() {
b();
}
c();
Use of spaces
Nice
if (found) {
// good
}
function a() {…}
app.config.folder;
Less readable
if(found) {
// bad
}
function a () {…}
app. config. folder;
Semicolon insertion
Goodvar good = function() {
return {
sum: 12
};
}
> good();
{ sum: 12 }
Badvar bad = function ( )
{
return
{
sum: 12
};
}
> bad();
undefined
Eval twins == and !=
'' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
Faithful triplets === and !==
Always use `===` for equals and `!==` for not-equals when you do comparisons
if (a === 5 && b !== 10) {
// feeling much better
}
Friendly parameters
Instead of large parameter listsvar address = build(f, l, c, s);
Use objectsvar address = build({
first: f,
last: l,
city: c,
state: s
});
Augmenting Types
String.prototype.pluralize = function() {
return this + "s";
};
> "car".pluralize() // "cars"
You don’t own Object, Array, RegExp, String, Number, Boolean, Date, Function
Scopes and Closures
Global Scopevar message = “Wakanda”;
function greet() {
console.log(message + “ is great!”);
}
> message
“Wakanda”
> greet()
“Wakanda is great!”
Local Scopefunction greet(what) {
var message = what;
console.log(message + “ is great!”);
}
> message
undefined
> greet(“Wakanda”)
“Wakanda is great!”
> message
undefined
Mixing scopevar outer = function() {
var a = 4, b = 5;
var inner = function() {
var b = 7, c = 11;
a = b + c;
};
console.log(a);
inner();
console.log(a);
};
Returning functionsvar setup = function() {
var count = 0;
return function() {
return (count += 1);
}
}
// usage
var next = setup();
next(); // 1
next(); // 2
count // undefined
“A closure is a function defined within another
scope that has access to all the variables within the
outer scope.”Tim Caswell
Consider this example…/*
* jsfiddle.net/TnaMW
*/
var div = document.getElementById('div');
for (var i = 0; i < 10; i++) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = i + ' ';
link.onclick = function() { alert(i); };
div.appendChild(link);
}
// 0 1 2 3 4 5 6 7 8 9
…works with a Closure/*
* jsfiddle.net/kxy5t
*/
var div = document.getElementById('div');
for (var i = 0; i < 10; i++) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = i + ' ';
link.onclick = function(k) {
return function() { alert(k); }
}(i);
div.appendChild(link);
}
// 0 1 2 3 4 5 6 7 8 9
Self-invoking functionsvar person = function() {
// private
var name = "Juergen";
// public
return {
getName : function() {return name;},
setName : function(newName) {name = newName;}
};
}();
> person.name // undefined
> person.getName(); // ”Juergen"
> person.setName("Dan");
> person.getName(); // ”Dan"
Immediate functions
(function() {
var number = 5;
alert("number is " + number);
}())
> "number is 5"
> number // undefined
Immediate functions w/ parameters
(function(input) {
var number = input;
alert("number is " + number);
}(5))
> "number is 5”
> number // undefined
Improving Object helpers
(function(root, String) {
root._ = root._ || {};
root._ = {
pluralize: function(str) {
return str + "s";
}
};
})(this, String);
> _.pluralize("car")
"cars"
Class like structuresvar Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function() {
return "Hello " + this.greeting + ”!";
};
return Greeter;
})();
> var greeter = new Greeter(”world");
> greeter.greet();
"Hello world!"
Dataclass structures in Wakanda
model = new DataStoreCatalog();
model.create("Greeter", {extends: "Base"}, function() {
attribute("name", "string")
method("greet", function() {
return "Hello " + this.name + "!";
});
});
> var greeter = new Greeter({name: "Juergen"});
> greeter.greet(); // Hello Juergen!
JavaScript 201Best Practices
Juergen FesslmeierWakanda Product Manager
@chinshr
