back to JavaScript Design Patterns

Builder


Definition

Separate the construction of a complex object from its representation so that the same construction process can create different representations.

Frequency of use (in JavaScript):
low



Summary

The Builder pattern allows a client to construct a complex object by specifying the type and content only. Construction details are hidden from the client entirely.

The most common motivation for using Builder is to simplify client code that creates complex objects. The client can still direct the steps taken by the Builder without knowing how the actual work is accomplished. Builders frequently encapsulate construction of Composite objects (another GoF design pattern) because the procedures involved are often repetitive and complex.

Usually it is the last step that returns the newly created object which makes it easy for a Builder to participate in fluent interfaces in which multiple method calls, separated by dot operators, are chained together (note: fluent interfaces are implementation of the Chaining Pattern as presented in the Modern patterns section).


Diagram

Diagram JavaScript Builder Design Pattern


Participants

The objects participating in this pattern are:

  • Director -- In sample code: Shop
    • constructs products by using the Builder's multistep interface
  • Builder -- not used in JavaScript
    • declares a multistep interface for creating a complex product
  • ConcreteBuilder -- In sample code: CarBuilder, TruckBuilder
    • implements the multistep Builder interface
    • maintains the product through the assembly process
    • offers the ability to retrieve the newly created product
  • Products -- In sample code: Car, Truck
    • represents the complex objects being assembled

Sample code in JavaScript

The AbstractBuilder is not used because JavaScript does not support abstract classes. However, the different Builders must implement the same multistep interface for the Director to be able to step through the assembly process

The JavaScript code has a Shop (the Director) and two builder objects: CarBuilder and TruckBuilder. The Shop's construct method accepts a Builder instance which it then takes through a series of assembly steps: step1 and step2. The Builder's get method returns the newly assembled products (Car objects and Truck objects).

The client has control over the actual object construction process by offering different builders to the Shop.

The log function is a helper which collects and displays results.

function Shop() {
    this.construct = function(builder) {
        builder.step1();
        builder.step2();
        return builder.get();
    }
}

function CarBuilder() {
    this.car = null;

    this.step1 = function() {
        this.car = new Car();
    };

    this.step2 = function() {
        this.car.addParts();
    };

    this.get = function() {
        return this.car;
    };
}

function TruckBuilder() {
    this.truck = null;

    this.step1 = function() {
        this.truck = new Truck();
    };

    this.step2 = function() {
        this.truck.addParts();
    };

    this.get = function() {
        return this.truck;
    };
}

function Car() {
    this.doors = 0;

    this.addParts = function() {
        this.doors = 4;
    };

    this.say = function() {
        log.add("I am a " + this.doors + "-door car");
    };
}

function Truck() {
    this.doors = 0;

    this.addParts = function() {
        this.doors = 2;
    };

    this.say = function() {
        log.add("I am a " + this.doors + "-door truck");
    };
}

// log helper
var log = (function () {
    var log = "";
    return {
        add: function (msg) { log += msg + "\n"; },
        show: function () { alert(log); log = ""; }
    }
})();

function run() {
    var shop = new Shop();
    var carBuilder = new CarBuilder();
    var truckBuilder = new TruckBuilder();
    var car = shop.construct(carBuilder);
    var truck = shop.construct(truckBuilder);

    car.say();
    truck.say();

    log.show();
}
Run



JavaScript Optimized Code

The example given is not optimized for JavaScript. Significant improvements can be obtained by applying advanced JavaScript techniques resulting in more effective, robust, and maintainable apps.

To learn how, check our comprehensive JavaScript + jQuery Design Pattern Framework. This unique package includes optimized JavaScript for all GoF patterns using more advanced features, such as namespaces, prototypes, modules, function objects, closures, anonymous functions, and ohters.

If you require the latest tools and techniques on JavaScript Patterns, jQuery Patterns, and Pattern Architectures then the JavaScript + jQuery Design Pattern Framework is for you!. This package contains valuable, up-to-date information for JavaScript developers. Here is what is included:

  JavaScript-optimized GoF patterns
  Modern JavaScript Design Patterns
  Model-View Design Patterns
  jQuery Design Patterns
  Architecture patterns
  JavaScript Idioms (great fun!)
  Sample Apps (MVC, SPA, etc.)

Get it now. Start writing beautiful JavaScript!