设计模式学习笔记（二）：工厂方法模式

一、定义

工厂方法模式（Factory Method Pattern）是一种创建型设计模式，它提供了一种在不指定具体类的情况下创建对象的方法。工厂方法模式定义了一个用于创建对象的接口，让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。

二、分析

1.角色分析

抽象工厂类（Abstract Factory）：
- 定义了一个创建产品对象的操作接口，这个接口是工厂方法，返回的类型是一个抽象的产品类型。
- 工厂方法可以由子类实现，以生成一组相关或相互依赖的对象。
具体工厂类（Concrete Factory）：
- 实现抽象工厂类中的工厂方法，生成一组具体对象。
抽象产品类（Abstract Product）：
- 为所有类型的产品对象声明一个通用接口。
- 客户端通过使用这个通用接口来处理所有产品对象。
具体产品类（Concrete Product）：
- 实现抽象产品接口的具体类。
- 工厂方法返回的具体产品对象，就是这些具体产品类的实例。

2.代码分析

此处代码为vue3+ts

<template><div class="page"><div class="main"><div ref="mainContainer"></div></div></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const mainContainer = ref<HTMLDivElement | null>(null);
// 抽象产品类
class AbstractDiv {element: HTMLDivElement | null;constructor() {this.element = document.createElement("div");}getElement() {if (this.element) return this.element;else return document.createElement("div");}
}
// 具体产品类 - RedDiv
class RedDiv extends AbstractDiv {setStyle() {if (!this.element) return;this.element.style.backgroundColor = "red";this.element.style.width = "100px";this.element.style.height = "100px";this.element.style.margin = "10px";this.element.style.display = "inline-block";}
}
// 具体产品类 - GreenDiv
class GreenDiv extends AbstractDiv {setStyle() {if (!this.element) return;this.element.style.backgroundColor = "green";this.element.style.width = "100px";this.element.style.height = "100px";this.element.style.margin = "10px";this.element.style.display = "inline-block";}
}// 抽象工厂类
abstract class AbstractDivFactory {abstract createDiv(color: string): AbstractDiv;
}// 具体工厂类 - ColorDivFactory
class ColorDivFactory extends AbstractDivFactory {createDiv(color: string) {let div;if (color === "red") {div = new RedDiv();} else if (color === "green") {div = new GreenDiv();} else {throw new Error(`暂不支持${color}色`);}div.setStyle(); // 在工厂内部直接调用setStyle方法return div;}
}
// 创建ColorDivFactory实例
const divFactory = new ColorDivFactory();onMounted(() => {// 示例用法const container = mainContainer.value;// 创建并添加不同颜色的div到容器中const redDivInstance = divFactory.createDiv("red");const greenDivInstance = divFactory.createDiv("green");container?.appendChild(redDivInstance.getElement());container?.appendChild(greenDivInstance.getElement());
});
</script>
<style>
.page {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;
}
</style>

图片简单描述：