Separating the construction and presentation of a complex object allows the same construction process to create different representations, focusing more on the order in which classes are assembled within the complex object.

The class diagram

  1. Conductor: Inject the concrete builder, calling the concrete builder’s methods to add parts in sequence
  2. Abstract Builder: Defines the methods that the concrete builder needs to implement, as well as the concrete methods that return the product (abstract classes)
  3. Concrete builder: a method of implementing concrete generated parts to enable products
  4. Product: Defines the product model to be built, populated by the concrete builder

The main points of

In the construction process, if a complex class needs to be constructed according to certain rules, the traditional factory mode will not work. In fact, the builder mode further encapsulates the factory in the factory method mode, making the products of each factory form a new product in a certain order.

Key points:

  • Director: defines the order of construction and the dependencies of each component
  • Abstract builder (factory) : A method provided by examples specifying the parts that a concrete builder must build

Advantages:

  • Inherits the decoupling property of the factory pattern
  • Each specific builder is relatively independent, independent of other specific builders, so that specific builders can be easily replaced, so that specific builders can obtain different products.
  • Control the details of product creation
  • The director class programs from the abstract builder class, conforming to open and closed.

Disadvantages:

  • If there are large differences between products and no common ground, it is difficult to abstract
  • If the product is complex internally, many builder classes need to be defined

contrast

  • The factory method produces products, while the Builder mode produces parts from The Builder and assembles new products from the constructor according to conditions.

chestnuts

Short and pithy chestnuts

Chestnut a

Is an example of a mobile phone to build command, define the mobile phone necessary construction parts of the screen, battery, CPU, also is the model of the product, in defining the abstract factory, decided to do specific brands factory, implemented after the concrete factory, then commander of the build method, according to the steps to build, client calls each vendor, began to build.

class Director{
    constructor(builder){
        this.builder = builder
    }
    construct(){
        this.builder.setBattery()
        this.builder.setCpu()
        this.builder.setScreen()
        return this.builder.getProduct()
    }
} 

// Define the product template
class Phone{
    constructor(){
        this.screen = ' ';
        this.battery =' '; 
        this.cpu =' '; }}// Define the abstract builder
class Builder{
    constructor(){
        this.phone = new Phone()
    }
    getProduct(){
        return this.phone; }}class HUAWEIBuilder extends Builder{
    constructor(){
        super()}setScreen(){
        this.phone.screen = 'huawei crreen 6.9 in' 
    }
    setBattery(){
        this.phone.battery = 'huawei battery 5000mAh' 
    }
    setCpu(){
        this.phone.cpu = 'Qinlin 855'}}class XIAOMIBuilder extends Builder{
    constructor(){
        super()}setScreen(){
        this.phone.screen = 'the xiaomi crreen 8.0 in' 
    }
    setBattery(){
        this.phone.battery = 'xiaomi battery 5500mAh' 
    }
    setCpu(){
        // Various crafts....
        this.phone.cpu = 'PengPai 500'}}// Huawei command
let huawei = new HUAWEIBuilder() 
let huaweiDirector = new Director(huawei) 
console.log(huaweiDirector.construct())

// Remi command
let xiaomi = new XIAOMIBuilder()
let xiaomiDirector = new Director(xiaomi)  
console.log(xiaomiDirector.construct())
Copy the code

Different calls generate different effects, interface programming.

Chestnut 2

Options are passed in as factory data, the specific format of the component is the template of the product, and the direction is Vue’s this.__init(option) method (concrete factory). After the execution is complete, you will get a new product, that is, the component, components and components between the parameters are not the same, other skeleton is exactly the same, combined with the idea of the builder mode.

When the Vue is new and commands start, the builder has actually added the prototype of the earlier commander, but there is no data, inject options and start building without returning the product, because the product to be built is his own

// Start command when Vue is new
function Vue (options) {
  if(process.env.NODE_ENV ! = ='production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')}this._init(options)
}


// The concrete builder has actually added the early commander's prototype, and does not have to return the product, because the product to be built is himself
Vue.prototype._init = function (options? :Object) {
    const vm: Component = this 
    vm._uid = uid++ 
  
    / /...
 
    /* istanbul ignore else */
    / /...
  
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    /* istanbul ignore if */
    / /...
  }
Copy the code