This is the 9th day of my participation in the August More Text Challenge

Demonstration Car Manufacturing 01:

It can be seen from the UML class diagram that the objects participating in our demonstration this time are the mechanical arm and the automobile workshop. The automobile equipment in the workshop needs to be bound with the corresponding mechanical arm to complete automatic assembly of the automobile.

Robotic arm object

class MechanicalArm {
  name: string = "Manipulator";
}
Copy the code

Automobile Workshop object

class CarWorkshop {
  mechanicalArm: MechanicalArm;

  constructor(mechanicalArm: MechanicalArm) {
    this.mechanicalArm = mechanicalArm;
  }

  installCarbody() {
    console.log(`The ${this.mechanicalArm.name}Mounting body... `);
  }

  installUnderpan() {
    console.log(`The ${this.mechanicalArm.name}Install the chassis... `);
  }

  installGlass() {
    console.log(`The ${this.mechanicalArm.name}Install glass... `);
  }

  installTyre() {
    console.log(`The ${this.mechanicalArm.name}Install tires... `); }}Copy the code

Demonstrate assembly process

Gif animation learning from the handsome ape

instructions

See our workshop at the time of assembly car need to clear every step by the caller will process all executed once, if we create more and more cars are likely to miss part of the assembly process, our 🚗 🚗 will become incomplete, so the next step for simple packaging we will our building became a little bit more simple.

Demonstration Car Manufacturing 02:

We introduced a Bmw Builder object to encapsulate the assembly of the car, making it easier to call and more stable to create multiple times.

Bmw Builder object

class BmwBuilder {
  cws: CarWorkshop;

  constructor(cws: CarWorkshop) {
    this.cws = cws;
  }

  build(type: string) {
    console.log(`The ${type}Automobile assembly: ');
    this.cws.installCarbody();
    this.cws.installGlass();
    this.cws.installTyre();
    this.cws.installUnderpan(); }}Copy the code

Demonstrate assembly process

instructions

The encapsulated Bmw Builder has no problems due to the shortage process in our 🚗 assembly for each series, but what if we want to have an Audi🚗 assembly? There will still be problems, so let’s move on.

Builder mode:

Builder, which separates the construction and representation of a complex object so that the same construction process can create different representations. Through the builder model we encapsulate the process and details of construction to make it easy for users to use.

Let’s join nowCarDirectorObject unified assembly, introductionCarBuilderAbstract objects transform our originalBmwBuilderObject is reconstructed and addedAudiBuilderObject,

CarDirector

class CarDirector {
  builder: CarBuilder;
  constructor(builder: CarBuilder) {
    this.builder = builder;
  }

  create() {
    console.log("Ready to start assembly:");
    this.builder.buildCarbody();
    this.builder.buildGlass();
    this.builder.buildTyre();
    this.builder.buildUnderpan(); }}Copy the code

CarBuilder

abstract class CarBuilder { cws! : CarWorkshop;abstract buildCarbody(): void;
  abstract buildGlass(): void;
  abstract buildTyre(): void;
  abstract buildUnderpan(): void;
}
Copy the code

BmwBuilder/AudiBuilder

class BmwBuilder extends CarBuilder {
  constructor(cws: CarWorkshop) {
    super(a);this.cws = cws;
  }

  buildCarbody() {
    this.cws.installCarbody();
  }
  buildGlass() {
    this.cws.installGlass();
  }
  buildTyre() {
    this.cws.installTyre();
  }
  buildUnderpan() {
    this.cws.installUnderpan(); }}Copy the code

Demonstrate assembly process

Look at the code directly, animation is not skilled…

// Buy the robot arm
const ma = new MechanicalArm();
// Open workshop no. 01 and install the robot arm in the vehicle workshop
const cws = new CarWorkshop(ma);
// Bmw assembly line
const bmwCws = new BmwBuilder(cws);
// Audi pipeline
const audiCws = new AudiBuilder(cws);
// select * from *
new CarDirector(bmwCws).create();
new CarDirector(audiCws).create();
Copy the code

instructions

We’ve done the same number of lines of code for two car assemblies, and we can now extend Builder to complete different car assemblies at any time, and it’s very stable and efficient.

Conclusion:

The Builder pattern is used when our algorithm for creating complex objects should be independent of the components of the object and how they are assembled. — Big Talk design Patterns [page 122]

  1. Codesandbox.io/is still recommended for online code editors, and everything else is either slow to open or sluggish.

  2. Writing always have no words, how to do XDM? 🤔 ️