在JavaScript中,工厂模式是一种用于创建对象的设计模式。工厂模式基于工厂方法,即通过调用工厂方法,返回所需的对象实例。在JavaScript中,这种模式非常常见,因为它可以帮助我们快速创建多个相似的对象。
假设我们要创建一个汽车工厂,可以生产多种类型的汽车,例如轿车、越野车和卡车。我们可以使用工厂模式,通过一个工厂方法生产并返回各种汽车的实例对象。
// 定义汽车类
class Car {
constructor(model, year) {
this.model = model;
this.year = year;
}
// 汽车共有的方法
turnOn() {
console.log(this.model + " is turning on...");
}
turnOff() {
console.log(this.model + " is turning off...");
}
}
// 定义轿车类,继承自汽车类
class Sedan extends Car {
constructor(model, year) {
super(model, year);
this.type = "sedan";
}
// 轿车特有的方法
park() {
console.log(this.model + " is parked.");
}
}
// 定义越野车类,继承自汽车类
class SUV extends Car {
constructor(model, year) {
super(model, year);
this.type = "SUV";
}
// 越野车特有的方法
offroad() {
console.log(this.model + " is offroading.");
}
}
// 定义卡车类,继承自汽车类
class Truck extends Car {
constructor(model, year) {
super(model, year);
this.type = "truck";
}
// 卡车特有的方法
load() {
console.log(this.model + " is loaded.");
}
}
// 定义汽车工厂
class CarFactory {
createCar(type, model, year) {
switch(type) {
case "sedan":
return new Sedan(model, year);
case "SUV":
return new SUV(model, year);
case "truck":
return new Truck(model, year);
default:
throw new Error("Invalid car type.");
}
}
}
// 使用汽车工厂生产汽车实例
const carFactory = new CarFactory();
const mySedan = carFactory.createCar("sedan", "BMW", "2022");
mySedan.turnOn();
mySedan.park();
const mySUV = carFactory.createCar("SUV", "Jeep", "2022");
mySUV.turnOn();
mySUV.offroad();
const myTruck = carFactory.createCar("truck", "Volvo", "2022");
myTruck.turnOn();
myTruck.load();
在上面的代码中,我们使用ES6的语法定义了一个汽车类,并继承自汽车类的三种类型的车型类。然后我们定义了一个工厂类,用于返回各种类型的汽车实例。最后我们通过实例化工厂类并调用其方法创建并使用汽车实例。
假设我们要创建一个能够快速创建DOM元素的工厂,我们可以将常用的DOM元素类型和属性封装起来,通过传入参数来动态生成DOM元素实例。以下是一个示例代码:
// 定义DOM元素工厂
class DOMFactory {
createDOM(type, config) {
const element = document.createElement(type);
if(config && typeof config === "object") {
for(let prop in config) {
if(config.hasOwnProperty(prop)) {
element[prop] = config[prop];
}
}
}
return element;
}
}
// 使用DOM元素工厂创建元素,并添加到HTML文档中
const domFactory = new DOMFactory();
const heading = domFactory.createDOM("h1", { innerText: "Hello World" });
document.body.appendChild(heading);
const paragraph = domFactory.createDOM("p", { innerText: "This is a paragraph." });
document.body.appendChild(paragraph);
const button = domFactory.createDOM("button", { innerText: "Click me" });
document.body.appendChild(button);
在上面的代码中,我们使用ES6的语法定义了一个DOM元素工厂类,并定义了一个创建DOM元素实例的方法。该方法接收两个参数:元素类型和元素属性对象。如果属性对象存在,则通过循环将其添加到DOM元素中,并返回该DOM元素实例。最后,我们通过实例化DOM元素工厂类并调用其方法动态创建DOM元素,并将其添加至HTML文档中。
以上是两个工厂模式的实际案例。工厂模式可以帮助我们更好地组织和管理代码,并提高代码的重用率。它可以应用于各种不同的场景,例如创建对象实例、DOM元素、HTTP请求等。了解这种设计模式的优缺点和应用情况,可以帮助我们更好地理解和应用它。