Wakanday JS201 Best Practices

JavaScript 201 Best Practices Juergen FesslmeierWakanda Product Manager @chinshr

Styling and Naming

Form Follows Function

“There are only two hardthings in Computer Science: cache invalidation and naming things.” Tim Bray (quoting Phil Karlton)

Naming thingsVariable names should be nounsFunction names should begin with a verb,E.g. isValid(), hasItems(),getProduct()Avoid difficult to understand names,E.g. arrUqFolders

Logical namesRequires 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-linersWhen Becomesif a() if a() b(); b(); c();It looks like But really meansif a() { if a() { b(); b(); c(); }} c();

Use of spacesNice Less readableif (found) { if(found) { // good // bad} }function a() {…} function a () {…}app.config.folder; app. config. folder;

Semicolon insertionGood Badvar good = function() { var bad = function ( ) return { { sum: 12 return }; {} sum: 12 }; }> good(); > bad();{ sum: 12 } undefined

Eval twins == and != == 0 // false0 == // true0 == 0 // truefalse == false // falsefalse == 0 // truefalse == undefined // falsefalse == null // falsenull == undefined // true

Faithful triplets === and !==Always use `===` for equals and `!==` fornot-equals when you do comparisonsif (a === 5 && b !== 10) { // feeling much better}

Friendly parametersInstead of large parameter listsvar address = build(f, l, c, s);Use objectsvar address = build({ first: f, last: l, city: c, state: s});

Augmenting TypesString.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!”);}> messageundefined> greet(“Wakanda”)“Wakanda is great!”> messageundefined

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); }}// usagevar next = setup();next(); // 1next(); // 2count // undefined

“A closure is a functiondefined 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 Wakandamodel = 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 201 Best Practices Juergen FesslmeierWakanda Product Manager @chinshr

https://twitter.com	10
http://lanyrd.com	9
http://www.scoop.it	3

Wakanday JS201 Best Practices

by Juergen Fesslmeier on Nov 19, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 22

Statistics

Wakanday JS201 Best Practices Presentation Transcript