The Javascript Design Patterns You Have to Know JOSA TechTalks JS Patterns & Frameworks Dec-27th-2014
The Javascript Design Patterns You Have to Know
JOSA TechTalksJS Patterns & Frameworks
Dec-27th-2014
Agenda
●Prototype-based JS.
●Constructor Design Pattern.
●Prototype Design Pattern.
●Module Design Pattern.
Prototype-based JS
●JavaScript is OO.
●JavaScript is an object-based language based on prototypes not a class-based.
●There are no classes, but constructor functions and template objects to create new objects.
●Everything is an object.
Prototype-based JS
●Inheritance using the “prototype” chain.
●Adding/removing properties on run time.
Prototype-based JS
●Example:
public class ApiRoute { public String method; public String uri; public ApiRoute(String method, String uri) { this.method = method; this.uri = uri; }}See: src/constructor.js
Constructor Design Pattern
●You can create a new empty object using the following methods:
var newObject = {};var newObject = Object.create( Object.prototype );var newObject = new Object();
●Calling a constructor function by “new” keyword.●Preferably to be used with “prototypes”.● Inside the constructor “this” keyword will reference
the newly created object.
Prototype Design Pattern
●Template objects (prototype) for every new objects created by constructors.
●Prototypes is an easy way for inheritance between objects.
● It comes with high performance benefits.
●Prototypal Inheritance in ES5 can be done using Object.create();
Module Design Pattern
●Modules are set of components in an application architecture, integrating, communicating with each other keeping units of code clean and separated.
●Modules in JS implemented by:The Module patternObject literal notationAMD modulesCommonJS modulesECMAScript Harmony modules
Module Design Pattern
●In JS we use Module pattern, to have a public/private methods and attributes encapsulated in a single object.
●Encapsulation is made using closures.
●Closures only returns public API to the global scope.
●Export an object.
Module Design Pattern
●Examples:○ Module Literal: src/moduleLiteral.js○ Simple Module: src/moduleSimple.js○ Module with imports/exports: src/moduleIO.js
Module Design Pattern
●Advantages:
○ Cleaner than constructor pattern for encapsulation.
○ The ability to have private methods/attributes.
●Disadvantages:○ Changing visibility can be expensive.○ After closure, if we added a new public method
it won’t see private members.
Module Design Pattern
●The Revealing Module Pattern:○ Christian Heilmann.
○ All functions and variables in the private scope of the closure, with naming convention.
○ Only specific can be exported publicly using anonymous object.
○ Example: src/moduleReveal.js
Module Design Patterns
●The Revealing Module Pattern:
○ Advantages: Consistent way of defining the module and visibility.
○ Disadvantages: Modules are not stable, and might not be tested easily.
Code samples are available here:
●https://github.com/rashad612/josaTT-JSPatterns
References:
●Details of the object model | MDN
●Introduction to Object-Oriented JavaScript | MDN
●Learning JavaScript Design Patterns, Addy Osmani, Volume 1.6.0
●JavaScript Design Patterns, Carl Danley
●JavaScript Module Pattern: In-Depth