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
