前端设计模式-建造者模式

建造者模式(builder pattern)

提到建造者,我们可能第一印象就是城市中建高楼大厦,建房子一般设计到业主,项目负责人,建筑队工人。业主告诉项目负责人,需要建造什么样的房子,项目负责人告诉工人应该怎么修建,不同工人完成不同工作。大家各司其职,最终得到一个建成的房子。虽然在建房子过程中,各个部分都需要打交道,但是更多的还是各司其职,每个人完成每个人的工作。其实就是把一个复杂的建房子工程,拆分成了若干部分由不同人来完成。在编程中也是如此,如果我们需要创建一个复杂的对象,可以把这个对象进行构建,使得不同部分,完成不同功能。


建造者模式定义:将一个复杂的对象分解成多个简单的对象来进行构建,将复杂的构建层与表示层分离,使得相同的构建过程可以创建不同的表示的模式便是建造者模式。看定义通常是无法直接理解这种设计模式的,还是直接看代码:

假设我们需要创建一辆车,车的组件包括车名,车牌号,车的价钱,车的引擎等。我们先看不使用建造者模式应该如何创建:

class Car{
  constructor(){
    this.name = '';
    this.number = '';
    this.price = '';
    this.engine = '';
  }
//设置名字
  setName(){
    this.name = '宝马';
  }
//设置车牌号
  setNumber(){
    this.number = '888888'
  }
//设置价钱
  setPrice(){
    this.price = '100万'
  }
//设置引擎
  setEngine(){
    this.engine = '最好的引擎'
  }
//车的创建
  getCar(){
    this.setName();
    this.setNumber();
    this.setPrice();
    this.setEngine();
  }
}

//创建一个车:
let car = new Car();
car.getCar();
console.log(car)

从上面的代码中,我们可以看到创建一辆车需要的元素包括:name,number,price,engine。每一种元素又需要setxx来单独实现,最终车的创建还需要通过getCar来完成。也就是说在创建车的过程中需要的元素较多,创建过程相互影响,相互耦合。这只是简单的4个元素,而且耦合性也不是太高,但是假设元素他特别多,代码的耦合性也特别多,如果出现添加新的要素,那么实现起来要修改的代码就太多了。因此,我们需要对代码进行解耦,这就是建造者模式。


上面我们提到了建造一个房子,需要业主,项目负责人,建筑工人。其实建造者模式也包括这三个类:产品类(客户提出产品需要),指挥者类,建造者类
建造者模式的使用流程如下

  1.  客户提出产品需求:比如上面产品就是一辆小汽车,产品要素包括name,number,price,engine
  2. 指挥者根据产品需求,安排建造者完成需求的各个部分
  3. 建造者完成相应的部分

使用建造者模式修改上面的代码如下:

//产品类:产品要素
class Car{
  constructor(){
    this.name = '';
    this.number = '';
    this.price = '';
    this.engine = '';
  }
}


//建造者类:各种工人完成相应的部分
class CarBuilder{
  setName(){
    this.name = '宝马';
  }
  setNumber(){
    this.number = '888888';
  }
  setPrice(price){
    this.price = '100万';
  }
  setEngine(engine){
    this.engine = '最好的引擎';
  }
  getCar(){
    var car = new Car();
    car.name = this.name;
    car.number = this.number;
    car.price = this.price;
    car.engine = this.engine;
    return car;
  }
}

//指挥官类:指挥工人完成各部分工作
class Director{
  action(builder){
    builder.setName();
    builder.setNumber();
    builder.setPrice();
    builder.setEngine();
  }
}

//使用方法:

let builder = new CarBuilder();
let director = new Director();
director.action(builder);
let car = builder.getCar();
console.log(car)

从上面的代码中,我们可以看出:定义了产品类,主要负责定义产品的需求;建造者类,主要负责完成需求的各个部分;指挥者类,主要负责指挥工人完成各部分工作。实际上就是把一辆车的复杂的创建过程抽离成三个简单的类来完成,大家各司其职,减少了代码的耦合。当以后需要添加新的需求时,只需要在各个部分单独定义即可,比如现在造汽车还需要安装玻璃,那么只需要在每个类里面定义玻璃相关的要素,建造者,指挥者即可。而不需要考虑代码的各部分耦合。这就是建造者模式。

原文地址:https://www.cnblogs.com/yinhaiying/p/10782151.html