Introduction to the builder pattern of JavaScript design patterns_javascript skills

Builder Mode Instructions

1. Separate the construction of a complex object from its representation so that the same creation process can have different representations. This is called the builder pattern.
2. Description in object-oriented language, main role:

1>. The Builder interface class defines a unified and operable behavior of the builder [worker], which represents a complex structural object;
2>. ConcreteBuilder is used to create [implement] various forms of instance objects of Builder to represent different representations of Builder;
3>. The director is used to guide the execution process and form of the Builder instance, to be separated from the performance of the Builder instance, and to guide the Builder instance to create and generate product results according to a certain rule sequence;
4>. The result created by ResultObject will generate a result object; this is the result created by the specific creator according to the guidance of Director;

3. The builder model is actually a commander, a builder, and a client who uses the commander to call specific builders to work and obtain results from the specific builders;

4. Builder Mode, Simulation Scenario: [It’s good to see an example illustrating the description of Builder Mode]

Suppose a family wants to build a house, but the owner or other members of the family do not know how to build a house, so they have to hire a few workers. The team building the house also needs a foreman to mortgage the house. Build a house according to the owner’s ideas, and the foreman will design it according to the owner’s requirements and ask the workers how to do it;

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

The foreman does not do anything, but the specific builder must follow the foreman’s requirements, building the first step, the second step, until the entire house is completed;

The creator must have all the skills to create this house, that is, building the skeleton, decorating the bedroom, etc..., that is, what the builder does, or the ability he has, must be greater than or equal to what the commander requires. something, or ability;

That is, the commander is an organizer, and the builder provides skills;

5. In a weak language like JavaScript, there is no such thing as an interface, so just ignore the interface definition layer, directly create a specific builder, and then build a guidance class to call back the builder;

Example source code

1. Worker Builder X:

Copy code The code is as follows:

function workerBuilder() {
This.workOne = function() {
             //Build the skeleton of the house
}
This.workTwo=function() {
            //Build a bedroom
}
This.workThree=function() {
             //Build a kitchen
}
This.workFour=function() {
            //Build a living room
}
//....
 
This.getResult = function() {
                                                            //Complete the house
　　var house = new House();
​​​ //house.HouseFrame ...
　　Return house;　
}
}

workBuilder is a specific builder class, workOne and Two are things to be done, building skeletons, etc.;

Of course, you can build several more workBuilders to represent workers. The method of executing each job is different; but the work content is the same;

2. Commander class

Copy code The code is as follows:

function Director() {
This.construct = function(builder) {
​​​​​ builder.workOne();
​​​​​ builder.workTwo();
​​​​​ builder.workThree();
            builder.workFour();
               //...
//The order of the above content can be set, and the work items can also be set
}
}

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

3. Product House

Copy code The code is as follows:

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

4. How to use

Copy code The code is as follows:

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

var house = builder.getResult();

The fourth step is equivalent to the customer: the house owner. The house owner asks the Director to build the house, but the foreman does not do anything, so he instructs the builders to build the house. Finally, the house owner obtains the construction from the workers. Nice house;

Other instructions

The builder mode is more suitable for situations where the content [abstraction] is complex and the actual scene performance is different, such as inconsistent work content or sequence; such as everyone's daily life process, and things like the above Examples of similar scenarios; through the instructor layer, you can reduce the number of situations where there are many similar workplaces, but the order of work rules is inconsistent; you can greatly reduce the construction abstraction of actual objects;