JavaScript设计模式——建造者模式

写在前面

早该更新文章了，然而最近深陷项（囹）目（圄）。为了适配万恶的IE8，不得不使用陈旧的框架Ext，从未接触过，纯英文的文档，心中的苦闷自是不得而知。因此，拖拖沓沓，迎来了久违的建造者模式。

什么是建造者模式

将一个复杂对象的构建层与其表现层相互分离，同样的构建过程可以采用不同的表示。

当我们创建一个复杂的对象时，我们需要更多的关心创建这个对象的整个过程，甚至是创建对象的每一个细节。那这个时候，我们使用建造者模式，在这个模式中，有一个指挥者，一个建造者，由指导者来管理建造者，用户是与指导者联系的，指导者联系建造者最后得到产品。主要用于“分步骤构建一个复杂的对象”。

四要素

1.产品类Product：一般是一个较为复杂的对象，也就是说创建对象的过程比较复杂，一般会有比较多的代码量。
2.抽象建造者类Builder: 将建造的具体过程交与它的子类来实现，这样更容易扩展。
3.建造者类ConcreteBuilder: 组建产品；返回组建好的产品。
4.指导类Director: 负责调用适当的建造者来组建产品，指导类一般不与产品类发生依赖关系，与指导类直接交互的是建造者类

举个栗子🌰

// 产品类
class Car {
    constructor() {
      this.frame = false;
      this.engine = false;
      this.wheel = false;
    }
}

// 建造者
class CarBuilder extends Car{
    constructor(name) {
      super();
      this.name = name;
    }
    
    buildFrame() {
      this.frame = true;
      console.log('🚗车框架搭建完毕');
      return this;
    }

    buildEngine() {
      this.engine = true;
      console.log('🚗引擎制造完毕');
      return this;
    }

    buildWheel() {
      this.wheel = true;
      console.log('🚗车轱辘制造完毕');
      return this;
    }
    
    build() {
      console.log(this.name + '🚗车拼装完成✅')
      return {
        name: this.name,
        frame: this.frame,
        engine: this.engine,
        wheel: this.wheel
      }
    }
}

// 指挥者
class Director {
    constructor(builder) {
      this.action = (builder) => {
        builder.buildFrame();
        builder.buildEngine();
        builder.buildWheel();
        builder.build();
      }
    }
}

let carBuilder = new CarBuilder('保时捷');
let director = new Director();
director.action(carBuilder)

我们可以看到，一个零件，对应会有一个制造该零件的方法，每次都要去写一个方法，显得很浪费时间，又多余。我们可以对此做简化：

// 产品类
class Car {
  constructor() {
    this.frame = false;
    this.engine = false;
    this.wheel = false;
  }
}

// 建造者
class CarBuilder extends Car {
  constructor(name) {
    super();

    Object.keys(this).forEach(key => {
      const buildName = `build${key
        .substring(0, 1)
        .toUpperCase()}${key.substring(1)}`;
      this[buildName] = () => {
        console.log("汽车🚗零件" + key + "制造完成");
        this[key] = true;
      };
      return this;
    });
    this.name = name;
  }

  build() {
    console.log(this.name + "🚗车拼装完成✅");
    return {
      name: this.name,
      frame: this.frame,
      engine: this.engine,
      wheel: this.wheel
    };
  }
}

// 指挥者
class Director {
  constructor(builder) {
    this.action = builder => {
      builder.buildFrame();
      builder.buildEngine();
      builder.buildWheel();
      builder.build();
    };
  }
}

let carBuilder = new CarBuilder("保时捷");
let director = new Director();
director.action(carBuilder);

同样的，对于build()方法，我们也可以利用这种方式，进行精简：

// 产品类
class Car {
  constructor() {
    this.frame = false;
    this.engine = false;
    this.wheel = false;
  }
}

// 建造者
class CarBuilder extends Car {
  constructor(name) {
    super();

    Object.keys(this).forEach(key => {
      const buildName = `build${key
        .substring(0, 1)
        .toUpperCase()}${key.substring(1)}`;
      this[buildName] = () => {
        console.log("汽车🚗零件" + key + "制造完成");
        this[key] = true;
      };
      return this;
    });
    this.name = name;
  }

  build() {
    console.log(this.name + "🚗车拼装完成✅");
    const keysNoBuilders = Object.keys(this).filter(key => typeof this[key] !== 'function');

    return keysNoBuilders.reduce((returnValue, key) => {
      return {
        ...returnValue,
        [key]: this[key]
      }
    }, {})
  }
}

// 指挥者
class Director {
  constructor(builder) {
    this.action = builder => {
      for (const key in builder) {
        builder.hasOwnProperty(key) &&
          typeof builder[key] === "function" &&
          builder[key]();
      }
      builder.build();
    };
  }
}

let carBuilder = new CarBuilder("保时捷");
let director = new Director();
director.action(carBuilder);

最后

更新不易，且读且珍惜。🙏