JavaScript Design Pattern Series Three: Builder Pattern

This article shares with you the third series of JavaScript design patterns: Builder pattern. Friends who are interested can take a look at

Builder pattern

Builder pattern (builder pattern) ) is relatively simple. It is a kind of creational pattern. It decomposes a complex object into multiple simple objects for construction, and separates the complex construction layer from the presentation layer, so that the same construction process can create different representations. The pattern is the builder pattern.

Advantages

• The builder pattern has good encapsulation, and the object itself is decoupled from the construction process.

• The builder pattern is easy to extend. If there are new requirements, this can be accomplished by implementing a new builder class.

Applicable scenarios

The object that needs to be generated has a complex internal structure; and the internal properties themselves depend on each other

---

Builder pattern code There are four main parts to implement

Builder pattern: product product class, Builder builder class, Director commander class, and customer.

The main process is:

1. Customers put forward their needs.

2. The commander directs the builder to complete each part of the requirement based on the user's needs.

3. The builder completes the corresponding part.

Let’s take a look at the corresponding code:
The product category is a processed empty car.

/**
 * 产品类：car 目前需要构建一辆车。
 */

function car () {
    this.name = '',
    this.number = '',
    this.wheel = '',
    this.engine = ''
}

Next look at the builder class:

/* 
*    建造者类，里面有专门负责各个部分的工人
*/
function carBuilder () {
    this.nameBuilder = function () {
        this.name = '很厉害的车'
    },
    this.numberBuilder = function () {
        this.number = '88888888'
    },
    this.wheelBuilder = function () {
        this.wheel =  '高级橡胶做的轮子'
    },
    this.engineBuilder = function () {
        this.engine =  '很厉害的引擎'
    },
    this.getCar = function () {
        var Car = new car()
        Car.name = this.name;
        Car.number= this.number;
        Car.wheel = this.wheel;
        Car.engine = this.engine;
        return Car;
    }
}

Here we can see the workers in each part and their work, and their respective work is finally merged into a car.

Commander class:

/**
 *   指挥者类，指挥各个部分的工人工作
 */
function director () {
    this.action = function (builder) {
        builder.nameBuilder();
        builder.numberBuilder();
        builder.wheelBuilder();
        builder.engineBuilder();
    } 
}

The last is the usage method:

/**
 *    使用方法
 */

var builder = new carBuilder();
var director = new director();
director.action(builder);
var Car = builder.getCar();
console.log(Car);

The end customer gets the car through the getCar method, and does not need to know the construction details.

---

Summary

The builder pattern is mainly used to "distribute the construction of a complex object", and it is easy to extend. If there are new requirements, it can be accomplished by implementing a new builder class, and the builder pattern decouples the object itself from the construction process, so that we do not need to care about the specific construction process.

Related recommendations:

JavaScript Design Pattern Series One: Factory Pattern

##JavaScript Design Pattern Series Two: Singleton Pattern

The above is the detailed content of JavaScript Design Pattern Series Three: Builder Pattern. For more information, please follow other related articles on the PHP Chinese website!