JavaScript Patterns Stoyan Stefanov, Yahoo!
@stoyanstefanov Ajax Experience, Boston 2009 3:25 p.m. Sept 15, 2009

About me • Yahoo! Search
• Yahoo! Exceptional Performance • YSlow 2.0 architect • http://smush.it • Books, articles • http://phpied.com

Types of patterns • OO
Design Patterns (gang of four) • JavaScript-specific coding patterns • Anti-patterns

In this session… • Object
creation patterns • Code reuse patterns • Functional patterns • More on object creation • Design patterns

Object creation patterns

#

Two ways to create objects
• Object literal • Constructor functions {} vs. new

Object literal var adam = {}; // clean slate adam.name = “Adam”;
adam.say = function() { return “I am ” + this.name; };

Object literal var adam = { name: “Adam”, say: function() {
return “I am ” + this.name; } };

Using a constructor
var adam = new Person(“Adam”);
adam.say(); // “I am Adam”

Constructor functions var Person = function(name) { this.name = name; this.say = function() {
return “I am ” + this.name; }; };

Constructor functions var Person = function(name) { // var this = {}; this.name = name;
this.say = function() { return “I am ” + this.name; }; // return this; };

Naming convention
MyConstructor
myFunction

Enforcing new function Person() { var that = (this === window) ? {} : this; that.name = name;
that.say = function() { return “I am ” + that.name; }; return that; }

Enforcing new this instanceof Person this instanceof arguments.callee ES5
FTW

Prototype var Person = function(name) { this.name = name; }; Person.prototype.say = function() {
return “I am ” + this.name; };

How is the prototype used?
>>> var adam = new Person('Adam'); >>> adam.name; "Adam" >>> adam.say(); "I am Adam"

If you want to reuse
it, add it to the prototype

Code reuse patterns

Inheritance – friend or foe
“Prefer object composition to class inheritance” Gang of 4

Borrowing methods pattern • call()
and apply() notmyobj.doStuff.call(myobj, param1, p2, p3) notmyobj.doStuff.apply(myobj, [param1, p2, p3])

Example: borrowing from Array function f() {
var args = [].slice.call(arguments, 1, 3); return args; } >>> f(1, 2, 3, 4, 5, 6) 2,3 [].slice.call can also be Array.prototype.slice.call

Inheritance by copying properties function extend(parent, child) {
var i, child = child || {}; for (i in parent) { child[i] = parent[i]; } return child; }

Mixins function mixInThese() { var arg, prop, child = {}; for (arg = 0; arg < arguments.length; arg++) { for (prop in arguments[arg]) {
child[prop] = arguments[arg][prop]; } } return child; }

var cake = mixInThese( {eggs: 2, large: true}, {butter: 1, salted: true}, {flour: “3 cups”}, {sugar: “sure!”}
);

Classical inheritance function Parent(){ this.name = 'Adam'; }
Parent.prototype.say = function(){ return this.name; }; function Child(){} inherit(Child, Parent);

Option 1 function inherit(C, P) { C.prototype = new P(); }
ECMA standard

Option 2 – rent-a-constructor function C(a, c, b, d) {
P.call(this, arguments); } • Advantage – passes arguments when creating an object • Drawback – won’t inherit from the prototype

Option 3 – rent +
prototype function C(a, c, b, d) { P.call(this, arguments); } C.prototype = new P();

Option 4 function inherit(C, P) { C.prototype = P.prototype; }
• Advantage: everybody shares the same prototype • Drawback: everybody shares the same prototype

Option 5 function inherit(C, P) { var F = function(){}; F.prototype = P.prototype;
C.prototype = new F(); } • Only inherits properties/ methods of the prototype

Option 5 + super function inherit(C, P) {
var F = function(){}; F.prototype = P.prototype; C.prototype = new F(); C.uber = P.prototype; }

Option 5 + super +
constructor reset function inherit(C, P) { var F = function(){}; F.prototype = P.prototype; C.prototype = new F(); C.uber = P.prototype; C.prototype.constructor = C; }

Prototypal inheritance • by Douglas
Crockford • no class-like constructors • objects inherit from objects • via the prototype

Prototypal inheritance function object(o) { function F(){} F.prototype = o;
return new F(); ES5 } FTW

Prototypal inheritance >>> var parent = {a: 1}; >>> var child = object(parent); >>> child.a;
1 >>> child.hasOwnProperty(“a”); false

Functions

Functions are objects

Self-executable functions (function(){ var a = 1; var b = 2;
alert(a + b); })();

Self-executable functions (function(a, b){ var c = a + b; alert(c);
})(1, 2);

Callbacks function test(a, b, fn) { fn(a, b); } test(1, 2, myFunc);
test(1, 2, function(one, two){ console.log(arguments); });

Callback pattern example document.addEventListener( 'click',
animateAndWowUser, false );

Callback pattern example var thePlotThickens = function(){ console.log('500ms later...');
}; setTimeout(thePlotThickens, 500); // anti‐pattern setTimeout("thePlotThickens()", 500);

Returning functions function setup() { alert(1); return function() {
alert(2); }; } var my = setup(); // alerts 1 my(); // alerts 2

Returning functions function setup() { var count = 0; return function() {
return ++count; }; } var next = setup(); next(); // 1 next(); // 2

Self-overwriting functions function next() { var count = 1; next = function() {
return ++count; }; return count; } next(); // 1 next(); // 2

Lazy function definition function lazy() { var result = 2 + 2;
lazy = function() { return result; }; return lazy(); } lazy(); // 4 lazy(); // 4

Function properties function myFunc(param){ if (!myFunc.cache) { myFunc.cache = {};
} if (!myFunc.cache[param]) { var result = {}; // … myFunc.cache[param] = result; } return myFunc.cache[param]; }

Init-time branching // BEFORE var addListener = function(el, type, fn) { // w3c
if (typeof window.addEventListener === 'function') { el.addEventListener(type, fn, false); // IE } else if (typeof document.attachEvent === 'function') { el.attachEvent('on' + type, fn); // older browsers } else { el['on' + type] = fn; } };

Init-time branching var addListener; if (typeof window.addEventListener === 'function') { addListener = function(el, type, fn) {
el.addEventListener(type, fn, false); }; } else if (typeof document.attachEvent === 'function') { addListener = function(el, type, fn) { el.attachEvent('on' + type, fn); }; } else { addListener = function(el, type, fn) { el['on' + type] = fn; }; }

More object creation patterns

Private/privileged function MyConstr() { var a = 1; this.sayAh = function() { return a;
}; } >>> new MyConstr().sayAh(); 1

Declaring dependencies YAHOO.properties.foo = function() { var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom; // ... }();

Namespacing var myApp = {}; myApp.someObj = {}; myApp.someObj.someFunc = function()
{};

Namespacing function namespace(){…} >>> namespace(‘my.name.space’) >>> typeof my.name.space
“object”

Chaining var o = { v: 1, increment: function() { this.v++;
return this; }, add: function(v) { this.v += v; return this; }, shout: function(){ alert(this.v); } }; >>> o.increment().add(3).shout() // 5

Configuration objects myPerson(last, first, dob, address) vs.
var conf = { first: 'Bruce', last: 'Wayne' }; myPerson(conf);

Static members – public function MyMath() {
// math here... } MyMath.PI = 3.14; MyMath.E = 2.7;

Module pattern MYAPP.namespace('modules.foo'); MYAPP.modules.foo = function() { var a = 1;
return { getA: function(){ return a; } }; }();

Design Patterns

Singleton var mysingleton = {}; • It’s as
simple as that

Singleton v.2 (classical) var my1 = new Single(); var my2 = new Single();
>>> my1 === my2 true • How to make this work?

Singleton v.2 - option 1
var Single = function() { if (typeof Single.instance === “object”) { return Single.instance; } Single.instance = this; }; • Drawback – the instance property is public

… option 2 (closure) function Single() {
var instance = this; // add more to this… Single = function (){ return instance; }; }

Factory var Polygon = function() {}; var triangle = Polygon.factory(‘Triangle’); var circle = Polygon.factory(‘Circle’); Polygon.Triangle = function(){};
Polygon.Circle = function(){}; Polygon.factory = function(name) { if (typeof Polygon[name] === “function”) { return new Polygon[name](); } };

And one more thing…

Run JSLint • http://jslint.com •
Integrate with your editor

JSLint • missing semi-colons •
missing curly brackets • undeclared vars • trailing commas • unreachable code • for-in loops • …

Thank you! More… http://jspatterns.com http://slideshare.net/stoyan
http://jsmag.com column