Design Patterns
  • Introduction
  • Proto-Pattern
  • Anti-pattern
  • OO Design Principles
  • Classification
  • Creational Design Patterns
    • Singleton
    • Factory
    • Abstract Factory
    • Builder
    • Prototype
  • Structural design patterns
    • Adapter
    • Bridge
    • Composite
    • Decorator
    • Facade
    • Flyweight
    • Proxy
  • Behavioural Design Pattern
    • Chain of Responsibility
    • Command
    • Interpreter
    • Iterator
    • Mediator
    • Memento
    • Observer
    • State
    • Strategy
    • Template Method
    • Visitor
  • Concurrency Design Pattern
  • Architectural Design Pattern
  • Modern Desing Patterns
Powered by GitBook
On this page

Was this helpful?

  1. Structural design patterns

Facade

A single class that represents an entire subsystem.

  • Facade pattern hides the complexities of the system and provides an interface to the client using which the client can access the system

  • This pattern involves a single class which provides simplified methods required by client and delegates calls to methods of existing system classes.

  • Most frequently used in JavaScript.

EX:
interface Shape {
   draw(): void;
}

public class Rectangle implements Shape {
   draw() {
      console.log("Rectangle::draw()");
   }
}

public class Square implements Shape {
   draw() {
      console.log("Square::draw()");
   }
}

public class Circle implements Shape {
   draw() {
      console.log("Circle::draw()");
   }
}

class ShapeMaker {
   private circle: Shape;
   private rectangle: Shape;
   private square: Shape;

   constructor() {
      circle = new Circle();
      rectangle = new Rectangle();
      square = new Square();
   }

   drawCircle(){
      circle.draw();
   }
   drawRectangle(){
      rectangle.draw();
   }
   drawSquare(){
      square.draw();
   }
}

const shapeMaker = new ShapeMaker();
shapeMaker.drawCircle();
shapeMaker.drawRectangle();
shapeMaker.drawSquare();	
PreviousDecoratorNextFlyweight

Last updated 5 years ago

Was this helpful?