写在前面
早该更新文章了，然而最近深陷项（囹）目（圄）。为了适配万恶的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);
最后
更新不易，且读且珍惜。🙏
网友评论