Design patterns in javascript

Design patterns in Javascript Miao Siyu

Why need design patterns • Easy & nature: read, use/follow, extend/reuse, co-operator(expose api, split work…)… • Efficiency & memory cost/gc…

books • 'Patterns Of Enterprise Application Architecture' Martin Fowler • 'JavaScript Patterns' Stoyan Stefanov • 'Pro JavaScript Design Patterns' Ross Harmes and Dustin Diaz • 'Learning JavaScript Design Patterns' Addy Osmani • …

Categories Of Design Pattern • Creational Design Patterns Constructor, Factory, Abstract, Prototype, Singleton and Builder • Structural Design Patterns Decorator, Facade, Flyweight, Adapter and Proxy • Behavioral Design Patterns Iterator, Mediator, Observer and Visitor

Create an object • var newObject = {}; • var newObject = Object.create(…); • var newObject = new Class(); http://dmitrysoshnikov.com/ecmascript/javascript-the-core/

Define properties • newObject.someKey = …; • newObject*“someKey”+ = …; • Object.defineProperty(newObject, “someKey”,, // property attributes here: value, writable… }) • function Car(model, color){ this.model = model; this.color = color } Car.prototype.run = function(),console.log(“run”)-;

Prototype pattern • var anotherCar = Object.create( someCar ); • var beget = (function () { function F() {}; return function (proto) { F.prototype = proto; return new F(); }; })(); Clone using prototype: avoid the inherent cost

Singleton pattern var Singleton = (function () { Anonymous Function var instantiated; function init() { return { publicMethod: function () {}, publicProperty: 'test' }; } return { getInstance: function () { if (!instantiated) { instantiated = init(); } return instantiated; } }; })(); Singleton.getInstance().publicMethod();

Module pattern Loose Augumentation: var myNamespace = (function () { var MODULE = (function (my) { var myPrivateVar = 0; // add capabilities... var myPrivateMethod = function (someText) { return my; console.log(someText); }(MODULE || {})); }; Option 1: var myApplication = myApplication || {}; Option 2 if(!MyApplication) MyApplication = {}; return { Option 3: var myApplication = myApplication = myApplication || {} Option 4: myApplication || (myApplication = {}); myPublicVar: "foo", Option 5: var myApplication = myApplication === undefined ? {} : myApplication; myPublicFunction: function (bar) { myPrivateVar++; Cloning & Inheritance myPrivateMethod(bar); for (key in old) { } if (old.hasOwnProperty(key)) { }; my[key] = old[key]; })(); } } http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

The Revealing Module Pattern var myRevealingModule = (function(){ var name = 'John Smith'; function setPerson (personName) { name = personName; } function getPerson () { Advantage: same style return name; } Disadvantage: when over-writting return { // set: setPerson, get: getPerson }; }());

Observer Pattern & Mediator Pattern var pubsub = {}; q.subscribe = function( topic, func ) { q.unsubscribe = function( token ) { (function(q) { if (!topics[topic]) { for ( var m in topics ) { var topics = {}, topics[topic] = []; if ( topics[m] ) { subUid = -1; } for (var i = 0, j = topics[m].length; i < j; i++) { q.publish = function( topic, args ) { var token = (++subUid).toString(); if (topics[m][i].token === token) { topics[topic].push({ topics[m].splice(i, 1); if ( !topics[topic] ) { token: token, return token; return false; func: func } } }); } var subscribers = topics[topic], return token; } var tempArr; }; } return this; if(subscribers ) { }; tempArr = subscribers .slice(0); }( pubsub )); while (tempArr .length) { tempArr.pop().func(topic, args); } } Backbone.js: listen to changes in model return this; }; Mediator Pattern: Colleague – communicate by -> Mediator Observer - listener to -> Mediator

Mediator: Communication between Colleague Façade: N-to-1, listener to a event hub

Command Pattern (function(){ var CarManager = { requestInfo: function( model, id ){}, buyVehicle: function( model, id ){}, arrangeViewing: function( model, id ){} }; We can keep track of the commands, })(); also record a game reply CarManager.execute("arrangeViewing", "Ferrari", "14523"); CarManager.execute("requestInfo", "Ford Escort", "34232"); CarManager.execute("buyVehicle", "Ford Escort", "34232"); CarManager.execute = function (name) { // we can log the commands here, also implements an undo function return CarManager[name] && CarManager[name].apply(CarManager, [].slice.call(arguments, 1)); };

Façade Pattern function setStyles(elements, styles) { var foo = document.getElementById('foo'); for (var i=0, length = elements.length; i < length; i++) { foo.style.color = 'red'; var element = document.getElementById(elements[i]); foo.style.width = '150px'; for (var property in styles) { var bar = document.getElementById('bar'); element.style[property] = styles[property]; } bar.style.color = 'red'; } bar.style.width = '150px'; } var baz = document.getElementById('baz'); //Now you can just write this: baz.style.color = 'red'; setStyles(['foo', 'bar', 'baz'], { baz.style.width = '150px'; color: 'red', width: '150px' }); Very common in Jquery: .css(), .animate()…

Factory Pattern var AbstractVehicleFactory = (function () { var types = {}; return { getVehicle: function (type, customizations) { // we can keep track of vehicle or get vehicle by options instead of type … var Vehicle = types[type]; return (Vehicle) ? return new Vehicle(customizations) : null; }, registerVehicle: function (type, Vehicle) { var proto = Vehicle.prototype; if (proto.drive && proto.breakDown) { types[type] = Vehicle; } return AbstractVehicleFactory; } }; })(); AbstractVehicleFactory.registerVehicle("car", Car); Give me a android phone with AbstractVehicleFactory.registerVehicle("truck", Truck); 4.1 inch screen around S$400 var car = AbstractVehicleFactory.getVehicle("car", { color: "yellow", turbo: true }); var truck = AbstractVehicleFactory.getVehicle("truck", { monster: true, cylinders: 12 });

Mixin Pattern function augment( receivingClass, givingClass ) { var Car = function( settings ){ if ( arguments[2] ) { this.model = settings.model ; for (var i=2, len=arguments.length; i<len; i++) { this.colour = settings.colour ; receivingClass.prototype[arguments[i]] = }; givingClass.prototype[arguments[i]]; } var Mixin = function(){}; } Mixin.prototype = { else { driveForward: function(){}, for ( var methodName in givingClass.prototype ) { if ( !receivingClass.prototype[methodName] ) { driveBackward: function(){} receivingClass.prototype[methodName] = }; givingClass.prototype[methodName]; } augment( Car, Mixin,'driveForward','driveBackward' ); } } var vehicle = new Car({model:'Ford', colour:'blue'}); } vehicle.driveForward(); vehicle.driveBackward(); We have update our factory to produce Class level tanks with new weapon

Decorator Pattern • SubClassing var Person = function( firstName , lastName ){ Object level this.firstName = firstName; this.lastName = lastName; this.gender = 'male' }; var Superhero = function( firstName, lastName , powers ){ Person.call(this, firstName, lastName); this.powers = powers; } SuperHero.prototype = Object.create(Person.prototype); var superman = new Superhero( "Clark" ,"Kent" , ['flight','heat-vision'] );

• Simple decorator • Mulit decorator function Vehicle( vehicleType ){ function MacBook() { this.vehicleType = vehicleType || 'car', this.cost = function () { return 997; }; this.model = 'default', this.screenSize = function () { return 13.3; }; this.license = '00000-000' } } function Memory( macbook ) { function makeTruck(truck){ var v = macbook.cost(); truck.setModel =function( modelName ){} macbook.cost = function() { return v + 75 ;} } truck.setColor = function( color ){} function LargeScreen( macbook ){ return truck; var v = macbook.cost(); } macbook.cost = function(){ return v + 100; }; macbook.screenSize=function(){ return 14.8; }; var truck = makeTruck(new Vehicle()); } function Insurance( macbook ){ var v = macbook.cost(); macbook.cost = function(){ return v + 250; }; } var mb = new MacBook(); Memory(mb); LargeScreen(mb); Insurance(mb); user can wear equips to change attr and gain new ablitities

Pseudo-classical decorators: interface var TodoList = new Interface('Composite', ['add', 'remove']); var TodoItem = new Interface('TodoItem', ['save']); var myTodoList = function(id, method, action) { // implements TodoList, TodoItem }; Make sure that only archers function addTodo( todoInstance ) { can enter certain stage Interface.ensureImplements(todoInstance, TodoList, TodoItem); // … } https://gist.github.com/1057989 var Interface = function(name, methods),…- Interface.ensureImplements = function(obj),…-

Flyweight pattern var Book = function(){ Book info: this.id = id; var Book = function () { this.title = title; this.title = title; this.author = author; this.author = author; this.genre = genre; this.genre = genre; this.pageCount = pageCount; this.pageCount = pageCount; this.publisherID = publisherID; this.publisherID = publisherID; this.ISBN = ISBN; this.ISBN = ISBN; this.checkoutDate = checkoutDate; }; this.checkoutMember = checkoutMember; this.dueReturnDate = dueReturnDate; this.availability = availability; Checkout Info: }; Share date as much as possible

Object Pool Pool = {arr:[]}; Pool.pop = function(){ if(Pool.arr.length > 0){ return Pool.arr.pop().wake(); }else{ return new Obj(); } } May have hundreds of planes through the Pool.push= function(obj){ whole game, but not more than 20 at the same time. Pool.arr.push(obj); obj.sleep(); Generator a plan: pop() } Leave screen or destroyed: push() Object pools are used to avoid the instantiation cost of creating new objects by re-using existing ones. Avoid creating objects is gc-friendly. Reuse resource when it has a high cost to make or release, eg. connection pool

MV* pattern • V: Templing Handlebars, Underscore… • *: bind event, route, render, data-binding… • C: flex, extendable, suit for big project Backbone, Spine… • P: Present Model -> View, view no direct access to model, safer then MVC Backbone , Angular… • VM: VM & V more tightly, suit small project Knockout… TODO MVC http://todomvc.com/

Namespace • Automating nested namespacing // automatic namespacing var myApp = myApp || {}; var application = { utilities:{ function extend( ns, ns_string ) { drawing:{ var parts = ns_string.split('.'), canvas:{ parent = ns, 2d:{} pl, i; } pl = parts.length; } for (i = 0; i < pl; i++) { } if (typeof parent[parts[i]] == 'undefined') { }; parent[parts[i]] = {}; } parent = parent[parts[i]]; } return parent; } var mod = extend(myApp, 'myApp.modules.module2');

• Deep object extension function extend(destination, source) { var toString = Object.prototype.toString, objTest = toString.call({}); for (var property in source) { if (source[property] && objTest == toString.call(source[property])) { destination[property] = destination[property] || {}; extend(destination[property], source[property]); } else { destination[property] = source[property]; } } return destination; }; Jquery.extend

Design pattern in JQuery core • Adapter pattern .css({opacity:.5}) • Façade pattern .ajax() • Observe pattern .on(event, cssSelector, func) • Iterator pattern array is also object • Proxy pattern .proxy(function(),this…-, thisObj) control before sth really loaded • Builder Pattern $(“<a>a link</a>”).appendTo(…) xml initing

Modular JS • AMD • CMD Script loaders • Harmony

AMD • Asynchronous Module Definition, Commonjs • RequireJS • define(moduleID, [dependencies], definition function) • require([dependencies], function) https://github.com/amdjs/amdjs-api/wiki/AMD

CMD • require() • Exports http://wiki.commonjs.org/wiki/Modules/Wrappings cmd: Common Module Definition Sea.js define(function(require, exports, module) { // The module code goes here }); • Modules are singletons. • New free variables within the module scope should not be introduced. • Execution must be lazy, import can be later: define(dependency, …) vs. define(function(require(…)) • With some care, modules may have cyclic dependencies.

harmony • Export • Import • Module

Design patterns in javascript

More Related Content

What's hot

Similar to Design patterns in javascript

Design patterns in javascript