A deep understanding of the JavaScript series (27): a detailed explanation of the builder mode of the Design Mode

A deep understanding of the JavaScript series (27): a detailed explanation of the builder mode of the Design Mode

This article mainly introduces a deep understanding of the JavaScript series (27): a detailed explanation of the builder mode of design patterns. The Builder mode can separate the construction of a complex object from its representation, this allows you to create different representations for the same build process. For more information, see

 

 

Introduction

In a software system, sometimes it is faced with the creation of "a complex object", which is usually composed of sub-objects of each part using a certain algorithm; due to changes in requirements, the various parts of this complex object often face drastic changes, but the algorithms that combine them are relatively stable. How to deal with this change? How can we provide a "encapsulation mechanism" to isolate the changes of "various parts of complex objects", so as to keep the "stable Construction Algorithm" in the system from changing with demand? This is the builder mode.

The builder mode separates the construction of a complex object from its representation, so that different representations can be created during the same construction process. That is to say, if we use the builder mode, users need to specify the types to be built to get them, and the specific construction process and details do not need to be known.

Body

This mode is relatively simple. first go to the code and then explain it.

The Code is as follows:

Function getBeerById (id, callback ){
// Use ID to request data and then return data.
AsyncRequest ('get', 'beer. uri? Id = '+ id, function (resp ){
// Callback calls response
Callback (resp. responseText );
});
}

 

Var el = document. querySelector ('# test ');
El. addEventListener ('click', getBeerByIdBridge, false );

Function getBeerByIdBridge (e ){
GetBeerById (this. id, function (beer ){
Console. log ('requested Beer: '+ beer );
});
}

 

According to the builder's definition, the table phase is callback. That is to say, how to display and process data after obtaining data depends on the callback function. When processing data, the corresponding callback function does not need to focus on how to obtain data, in the same example, we can see in jquery's ajax method that there are many callback functions (such as success and error callback), with the main purpose of separation of duties.

Let's use another jQuery example:

The Code is as follows:

$ ('<Div class = "foo"> bar </div> ');

We only need to input the HTML characters to be generated, instead of how the specific HTML object is produced.

 

Summary

The builder mode is mainly used to "build a complex object by step". In this mode, "Step by Step" is a stable algorithm, while each part of the complex object changes frequently. Its advantages include: the "processing process" of the builder mode is exposed, which makes the builder mode more flexible, and the builder mode decouples the assembly process and creates specific parts, so that we don't have to worry about how each part is assembled.