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

最新推荐文章于 2024-10-10 19:53:01 发布

一天只码五十行

最新推荐文章于 2024-10-10 19:53:01 发布

阅读量471

点赞数 9

文章标签：设计模式学习笔记 vue.js

本文链接：https://blog.csdn.net/qq_45820271/article/details/136538862

版权

本文介绍了工厂方法模式在Vue3项目中的应用，通过抽象工厂和具体工厂类实现对象的创建，降低客户端与产品类的耦合，增强代码复用性和扩展性。同时讨论了该模式的优缺点，包括降低复杂性、隐藏细节和潜在的复杂性提升等。

摘要由CSDN通过智能技术生成

一、定义

工厂方法模式（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>

图片简单描述：