Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the builder pattern of JS design patterns

php中世界最好的语言
Release: 2018-03-14 14:09:45
Original
1818 people have browsed it

This time I will bring you a detailed explanation of JSDesign PatternBuilder Pattern, what are the Precautions for using JS Builder Pattern, the following is the actual combat Let’s take a look at the case.

Concept
The builder pattern can separate the construction of a complex object from its representation, so that the same construction process can create different representations. If we use the builder pattern, then the user needs to specify the types to be built to get them, and the specific construction process and details do not need to be known. The builder pattern is actually a commander, a builder, and a client that uses the commander to call specific builders to work and get results. Mainly used to "build a complex object step by step"

Function and precautions

Mode function:

Create a complex object step by step

Decoupling the encapsulation process and specifically creating components

No need to care about how the components are assembled

Notes:

Must be supported by a stable algorithm ("step-by-step" means a stable Algorithm)

The processing technology is exposed

After understanding the basic principles, let’s look at the following example, and then you will have a deeper understanding of the construction model.

Example

A rich man needs to build a villa, and then directly goes to the contractor, who then finds workers to build the villa. The local tycoons here don’t have to go looking for workers one by one. As long as the contractor knows the needs of the rich, he then goes to find workers, and the workers do the work. The rich don't need to know how to build the house, and they can just get the house in the end.

   //1.产出东西是房子 
            //2.包工头调用工人进行开工而且他要很清楚工人们具体的某一个大项 
            //3.工人是盖房子的 工人可以建厨房、卧室、建客厅 
            //4.包工头只是一个接口而已 他不干活 他只对外说我能建房子
            function House() { 
                this.kitchen = ""; this.bedroom = ""; this.livingroom = ""; 
            }; 
            function Contractor() { 
                this.construct = function(worker) { 
                    worker.construct_kitchen(); worker.construct_bedroom(); worker.construct_livingroom(); 
                } 
            }; 
            function Worker() {
                this.construct_kitchen =function() { 
                    console.log("厨房建好了"); 
                } 
                this.construct_bedroom = function() { 
                    console.log("卧室建好了"); 
                } 
                this.construct_livingroom = function() { 
                    console.log("客厅建好了"); 
                }                this.submit = function() {
                    var _house = new House(); 
                    _house.kitchen = "finished"; 
                    _house.bedroom = "finished"; 
                    _house.livingroom = "finished"; 
                    return _house; 
                }
            }; 
            var worker = new Worker(); 
            var contractor = new Contractor(); 
            contractor.construct(worker); 
            // 主人要房子 var myhouse = worker.submit(); console.log(myhouse);
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed Explanation of Constructor Pattern of JS Design Pattern

JS Design Pattern-Usage of Singleton Pattern

The above is the detailed content of Detailed explanation of the builder pattern of JS design patterns. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template