Implementing Flyweight Design Pattern in JavaScript: A Factory Example

The Flyweight design pattern is a memory optimization technique that can be used to reduce the memory footprint of an application by sharing objects that have the same intrinsic properties. In this blog post, we’ll explore how to implement the Flyweight pattern in JavaScript using a factory example. We’ll define a Flyweight class that contains shared state and a FlyweightFactory class that manages the creation and sharing of flyweight objects. We’ll also provide a usage example that demonstrates how the factory creates and shares flyweight objects based on their shared state. By the end of this post, you’ll have a solid understanding of how to use the Flyweight pattern to optimize your JavaScript applications.

Example Explanation

In this example, we define a Flyweight class that contains a shared state and an operation method that uses both the shared state and a unique state that is passed in as a parameter. We also define a FlyweightFactory class that manages the creation and sharing of flyweight objects. When a client requests a flyweight with a particular shared state, the factory checks if a flyweight with that shared state already exists, and returns it if it does. If it doesn’t, it creates a new flyweight with that shared state and returns it.

In the usage example, we create a FlyweightFactory and use it to get three flyweights with different shared states and unique states. We also print out the total number of flyweight objects that were created. Note that even though we requested a flyweight with the same shared state twice (flyweight1 and flyweight3), the factory only created one flyweight object for that shared state.

// Define a flyweight object that will be shared among instances
class Flyweight {
  constructor(sharedState) {
    this.sharedState = sharedState;
  }

  // Define a method that uses the shared state
  operation(uniqueState) {
    console.log(`Flyweight: sharedState (${this.sharedState}) and uniqueState (${uniqueState})`);
  }
}

// Define a flyweight factory that manages the creation and sharing of flyweights
class FlyweightFactory {
  constructor() {
    this.flyweights = {};
  }

  // Define a method that returns a flyweight object
  getFlyweight(sharedState) {
    if (!this.flyweights[sharedState]) {
      this.flyweights[sharedState] = new Flyweight(sharedState);
    }
    return this.flyweights[sharedState];
  }

  // Define a method that returns the number of flyweight objects that have been created
  getFlyweightCount() {
    return Object.keys(this.flyweights).length;
  }
}

// Usage example
const factory = new FlyweightFactory();
const flyweight1 = factory.getFlyweight("sharedState1");
flyweight1.operation("uniqueState1");
const flyweight2 = factory.getFlyweight("sharedState2");
flyweight2.operation("uniqueState2");
const flyweight3 = factory.getFlyweight("sharedState1");
flyweight3.operation("uniqueState3");

console.log(`Total flyweight objects created: ${factory.getFlyweightCount()}`);