Landing Page Adapter Chaining Command Composite Composite Iterator Compound Decorator Facade Factory Iterator Lazy Module Module Revealed Multi-Inheritance ES6 MVC Namespace Nullify Observer Proxy Singleton State Strategy Template Try-Finally

Design Patterns in ES6

A software design pattern is a general reusable solution to a commonly occurring problem within a given context.

Adapter

The Adapter Pattern converts the interface of a class into another interface the clients expect. Adapter lets classes work together that couldn't otherwise because of incompatible interfaces.

Example

Chaining

The Chaining Pattern is used to chain method. If this pattern is not used you will need to call the method adding the object on each new line. This is used to remove too much bytes of code.

Example

Command

The Command Pattern encapsulates a request as an object, thereby letting you parameterize other objects with different requests, queue or log requests, and support undoable operations.

Example 1
Example 2

Composite

The Composite Pattern compose objects into tree structures to represent part-whole hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly.

Example

Composite Iterator

The Composite Pattern compose objects into tree structures to represent part-whole hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly.

Example 1
Example 2

Compound

The Compound Pattern combines at least two patterns into a solution that solves a recurring or general problem.

Example 1
Example 2
Example 3
Example 4

Decorator

The Decorator Pattern attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality.

Example

Facade

The Facade Pattern provides a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that makes the subsystem easier to use.

Example

Factory

Abstract Factory:
The Abstract Factory Pattern provides an interface for creating families of related of dependent objects without specifying their concrete class.
Factory Method:
The Factory Method Pattern defines an interface for creating an object, but lets subclasses decide which class to instanciate. Factory Method lets a class defer instanciation to subclasses.

Example 1
Example 2

Iterator

The Iterator Pattern provides a way to access the elements of an aggregate object sequentially without exposing its underlying representation.

Example 1
Example 2
Example 3
Example 4

Lazy

The Lazy Pattern is specially useful when the first time we call a function/method it makes a big job but we only need one part of this job to be done when the function/method is called again. This pattern avoids to repeat job and make faster the execution of code.

Example

Module

The Module Pattern is a way when it's needed to separate functionalities and/or avoid the other modules fail if something goes wrong in one of the other modules.

Example

Module Revealed

Use the same Module Pattern but uses it to create some private variables/method and only expose the methods that we want to be public. It's used on API's.

Example

Multi-Inheritance ES6

This design pattern shows how to implement multi-inheritance using classes in ES6.

Example

MVC

The M.V.C. (Model-View-Controller) Pattern in Javascript is a bit weird, because the view is the element of the DOM, but we can use this method to separated logic and ajax calls in:
- View: DOM element/s. - Model: Class that manages all the access to the server. - Controller: All the logic that will act when the View is updated or when something is returned from Model.

Example

Namespace

The Namespace Pattern is one of the most valuable patterns to be used in Javascript. The Namespace Pattern avoids to pollute globals and allows you to use the same name of method under different Namespaces, and avoids collision with other libraries.

Example

Nullify

The Nullify Pattern is used to remove all references to local variables to make easier the job of the Garbage Collector. This is needed to avoid memory leaks and to manage memory properly.

Example

Observer

The Observer Pattern defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

Example

Proxy

The Proxy Pattern provide a surrogate or placeholder for another object to control access to it.

Example
Example Virtual Proxy.

Singleton

The Singleton Pattern ensures a class has only one instance, and provides a global point of access to it.

Example 1
Example 2
Example 3
Example 4

State

The State Pattern allow an object to alter its behavior when its internal state changes. The object will appear to change its class.

Example 1
Example 2

Strategy

The Strategy Pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable. Strategy lets the algorithm vary independently from clients that use it.

Step 1
Step 2
Step 2.1
Step 3
Step 4

Template

The Template Method Pattern defines the skeleton of an algorithm in a method, deferring some steps to subclasses. Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure.

Example with hook
Example without hook

Try-Finally

The Try-Finally Pattern is the same as the Nullify Pattern but if you try to use Nullify Pattern in functions/method where you return something Nullify Pattern is not possible because you can lost references.

Example