The Javascript Design Patterns You Have to Know

JOSA TechTalksJS Patterns & Frameworks

Dec-27th-2014

About Me

Rashad Majali

Software Engineer - souq.com

@rashad612: Github/Twitter

Agenda

●Prototype-based JS.

●Constructor Design Pattern.

●Prototype Design Pattern.

●Module Design Pattern.

Prototype-based JS

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

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.

Constructor Design Pattern

●Example: src/constructor.js

Prototype Design Pattern

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();

Prototype Design Pattern

●Example: src/proto.js

Module Design Pattern

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

Thank You.