Example of the Visitor Pattern for Shapes in JavaScript
Let’s use an example of different geometric shapes to illustrate the Visitor pattern in JavaScript:
Javascript
// Visitor Interface class ShapeVisitor { visitCircle(circle) {} visitSquare(square) {} visitTriangle(triangle) {} } // Concrete Visitors class AreaCalculator extends ShapeVisitor { visitCircle(circle) { // Calculate and return the area of a circle. } visitSquare(square) { // Calculate and return the area of a square. } visitTriangle(triangle) { // Calculate and return the area of a triangle. } } class PerimeterCalculator extends ShapeVisitor { visitCircle(circle) { // Calculate and return the perimeter of a circle. } visitSquare(square) { // Calculate and return the perimeter of a square. } visitTriangle(triangle) { // Calculate and return the perimeter of a triangle. } } // Visitable Elements class Circle { accept(visitor) { visitor.visitCircle( this ); } } class Square { accept(visitor) { visitor.visitSquare( this ); } } class Triangle { accept(visitor) { visitor.visitTriangle( this ); } } |
Now, you can use the Visitor pattern to calculate areas and perimeters of shapes without modifying their individual classes:
const circle = new Circle();
const square = new Square();
const triangle = new Triangle();
const areaCalculator = new AreaCalculator();
const perimeterCalculator = new PerimeterCalculator();
const circleArea = circle.accept(areaCalculator);
const squarePerimeter = square.accept(perimeterCalculator);
const triangleArea = triangle.accept(areaCalculator);
Note: In above example, the Visitor pattern allows you to perform different operations (calculating area and perimeter) on different types of shapes without changing the shape classes themselves. It promotes separation of concerns and extensibility in your code.
Code implementing Visitor Pattern in Javascript
Here’s a JavaScript code implementation of the Visitor pattern for shapes along with sample output:
Javascript
// Visitor Interface class ShapeVisitor { visitCircle(circle) {} visitSquare(square) {} visitTriangle(triangle) {} } // Concrete Visitors class AreaCalculator extends ShapeVisitor { visitCircle(circle) { return Math.PI * Math.pow(circle.radius, 2); } visitSquare(square) { return Math.pow(square.side, 2); } visitTriangle(triangle) { // Assuming Heron's formula for triangle area calculation const s = (triangle.sideA + triangle.sideB + triangle.sideC) / 2; return Math.sqrt(s * (s - triangle.sideA) * (s - triangle.sideB) * (s - triangle.sideC)); } } class PerimeterCalculator extends ShapeVisitor { visitCircle(circle) { return 2 * Math.PI * circle.radius; } visitSquare(square) { return 4 * square.side; } visitTriangle(triangle) { return triangle.sideA + triangle.sideB + triangle.sideC; } } // Visitable Elements class Circle { constructor(radius) { this .radius = radius; } accept(visitor) { return visitor.visitCircle( this ); } } class Square { constructor(side) { this .side = side; } accept(visitor) { return visitor.visitSquare( this ); } } class Triangle { constructor(sideA, sideB, sideC) { this .sideA = sideA; this .sideB = sideB; this .sideC = sideC; } accept(visitor) { return visitor.visitTriangle( this ); } } // Usage const circle = new Circle(5); const square = new Square(4); const triangle = new Triangle(3, 4, 5); const areaCalculator = new AreaCalculator(); const perimeterCalculator = new PerimeterCalculator(); const circleArea = circle.accept(areaCalculator); const squarePerimeter = square.accept(perimeterCalculator); const triangleArea = triangle.accept(areaCalculator); console.log(`Circle Area: ${circleArea}`); console.log(`Square Perimeter: ${squarePerimeter}`); console.log(`Triangle Area: ${triangleArea}`); |
Circle Area: 78.53981633974483 Square Perimeter: 16 Triangle Area: 6
In this code, we calculate the area of a circle, the perimeter of a square, and the area of a triangle using the Visitor pattern. The results are printed to the console.
Visitor Pattern | JavaScript Design Patterns
The visitor pattern is a behavioral design pattern that allows you to add new behaviors or operations to a set of objects without modifying their structure. It achieves this by separating the algorithm from the objects on which it operates.
Important Topics for the Visitor Pattern in JavaScript Design Patterns
- Characteristics of the Visitor Pattern in JavaScript Design Patterns
- Explanation of the Visitor Pattern in Javascript
- Example of the Visitor Pattern for Shapes in JavaScript
- Diagram of Visitor Pattern in Javascript Design Patterns
- Advantages of the Visitor Pattern in JavaScript Design Patterns
- Disadvantages of the Visitor Pattern in JavaScript Design Patterns
- Uses of the Visitor Pattern
- Conclusion
Contact Us