Introduction to the builder pattern for JavaScript design pattern

  • 2020-05-09 18:10:03
  • OfStack

Builder pattern description

1. The builder pattern separates the construction of a complex object from its representation so that the same creation process can have different representations.
2. Description in object-oriented language, main roles:

1 > The interface class Builder, which defines the builder [worker], unifies the operational behavior of 1, which represents a complex structural object;
2 > .ConcreteBuilder is used to create [implement] Builder instance objects in various forms to represent different representations of Builder;
3 > . Director is used to guide the execution process and form of the Builder instance, to separate it from the representation of the Builder instance, and to guide the Builder instance to create and generate product results in a regular order;
4 > . The result created by ResultObject will generate 1 result object; This is the result of the specific creator following the instructions of Director;

3. In practice, the builder model is one commander, one builder, and one client who USES the commander to call the work of the specific builder and get the results from the specific builder.

4. Builder mode, simulation scenario: [good to see an example of a builder mode description]

He said that a family was going to build a house, but the owner or other family members did not know how to build the house, so he had to hire some workers, and the team had to have a foreman to build a house according to the owner's ideas, and the foreman had to design the house according to the owner's requirements and ask the workers how to do it.

The foreman said, the first step is to put up the overall frame of the room, the second step is to build the bedroom, the third step is to decorate the kitchen, the fourth step is to build and decorate the living room, the fifth step...

The foreman didn't do anything, but the builder had to do what the foreman wanted him to do, step 1, step 2, and so on, until the house was complete;

The creator must have all the skills to create the house, building the skeleton, decorating the bedroom... That is, the builder must be doing or capable of something greater than or equal to what the commander is asking him to do or capable of;

The commander is an organizer and the builder provides skills;

5. In JavaScript, there is no such thing as an interface, so we ignore the interface definition layer and directly create the concrete builder, and then build a guidance class to call the builder back and forth.

Example source code

1. Worker builder X:


function workerBuilder() {
    this.workOne = function() {
         // Building a skeleton
    }
    this.workTwo=function() {
         // Build a bedroom
    }
    this.workThree=function() {
         // To build the kitchen
    }
    this.workFour=function() {
         // Build a sitting room
    }
    //....
   
    this.getResult = function() {
         // Build a house
     var house = new House();
     //house.HouseFrame ...
     return house; 
    }
}


workBuilder is the concrete builder class, workOne, Two is the thing to do, build skeleton, etc.

Of course, the workBuilder can be built several more times to show that the worker does not perform the same method for each job; But the job is one;

2. Commander


function Director() {
     this.construct = function(builder) {
          builder.workOne();
          builder.workTwo();
          builder.workThree();
          builder.workFour();
          //...
          // Above, the order can be set, and the work items can be set
     }
}

The guidance method under the commander class has a callback reference to the builder, including several or all of the builder's work; The commander organizes and arranges what the builder's workers have to do;

3. Product house


function House() {
    this.HouseFrame = '';
    this.Room = '';
    this.Kitchen = '';
    this.LivingRoom = '';
    //...
}

4. Use method



var builder = new workBuilder();
var director = new Director();
director.construct(builder); var house = builder.getResult();

Step 4: the whole use is equivalent to the customer: the owner of the house, the owner of the house asked Director foreman to build the house, but the foreman did not work, so he directed builder workers to build the house, finally the owner of the house from the workers to get the built house;

Other instructions

The builder pattern is more suitable for situations where the content [abstract] is complex and the actual scene is multiple, such as the work content or sequence. Such as the daily course of everyone's life ah, there are similar scenes like the above example; Through the mentor layer, you can reduce the number of similar work situations where the work rules are not in the same order. Can greatly reduce the construction abstraction of actual objects;


Related articles: