Early previewThis guide is in development. Items tagged verify are still being checked against official docs.
nebx Learn
GitHub
Menu
Home/JavaScript/Design patterns/Bridge
JS

JavaScript

The language of the web, on the client, the server and the edge.

Paradigm
Multi-paradigm, prototype-based, functional
Typing
Dynamic, weak (TypeScript adds static types)
Memory
Garbage collected
Runs
V8 / SpiderMonkey / JSC engines (JIT)
Concurrency
Single-threaded event loop, workers
Structural pattern

Bridge

Intent

Splits a large class or closely related classes into two hierarchies, abstraction and implementation, that vary independently.

Problem

Shape × Colour subclasses explode: RedCircle, BlueCircle, RedSquare…

Solution

Use composition: the abstraction holds a reference to an implementation object.

Real-world analogy

Think of it like this

One remote control (abstraction) can drive many TV brands (implementations). New remotes and new TVs evolve separately.

Structure

association / extends implements / depends on
Abstraction - i: Implementation+ feature1()+ feature2() 1 RefinedAbstraction + featureN() 4 «interface» Implementation + method1()+ method2() 2 ConcreteImplementation + method1()+ method2() 3

Hover or tap a numbered role to highlight it in the diagram.

  1. 1Abstraction — Abstraction provides high-level control logic and delegates low-level work to the implementation.
  2. 2Implementation — Implementation declares the interface common to all concrete implementations.
  3. 3ConcreteImplementation — Concrete Implementations contain platform-specific code.
  4. 4RefinedAbstraction — Refined Abstractions add variants of the control logic.

Code example

A JavaScript code sample for Bridge is coming soon. Factory Method, Singleton, Decorator, Observer and Strategy already have code in all six languages.

Applicability

Use Bridge when dividing a monolithic class with several variants.

Use Bridge when extending a class in independent dimensions.

Use Bridge when switching implementations at runtime.

Pros and cons

Pros

  • Platform-independent abstractions
  • Open–Closed on both sides

Cons

  • More complex for highly cohesive classes

Relations with other patterns

AdapterAbstract FactoryStrategy

Check yourself

Check yourself

Shapes (circle, square) must render with a vector or a raster renderer, and both lists keep growing.

Saved in this browser only. Part of Structural patterns (0/7).