React-TypeScript 设计模式 1 - 创建型设计模式 - 工厂模式
在“设计模式列表”这篇文章中，您可以找到一份按类别整理的软件工程设计模式列表。在接下来的几篇文章中，我计划对这些模式进行更深入的探讨。
创造型设计模式
设计模式 - 工厂
1. 简单工厂模式
2. 抽象工厂模式
3. 工厂方法模式
1-简易工厂模式
“简易工厂”模式就像拥有一个特殊的助手，叫做“工厂”，专门为你生产各种东西。想象一下，你想创作一件不同类型的艺术品。与其自己动手制作每一件作品，不如委托一家工厂为你制作。这家工厂懂得如何制作各种类型的艺术品。
它的运作方式如下：
-
询问工厂：你告诉工厂你想要什么样的艺术品。例如，你可以说：“嘿，工厂，给我做一个蓝色的正方形。”
-
工厂制造：工厂了解制作蓝色方形艺术品的方方面面，因此每件作品都是专门为您制作的。
-
领取您的艺术品：工厂将为您提供一件新制作的艺术品。
这样您就无需担心每件艺术品的制作过程。工厂会处理所有细节；您只需提出您的需求即可。
要点：
- 集中式生产：艺术品的生产集中在一个地点，即工厂。易于更新：如果作品的制作方法发生改变，只需更新工厂的数据，无需更新所有生产地点的数据。
- 没有具体要求：您作为想要了解细节的人，无需了解每个部件的制作过程。工厂会负责这方面的工作。
简单来说，简易工厂模式通过让辅助方（工厂）负责整个生产流程，从而简化了不同产品的生产过程。您只需告诉公司您的需求，他们就会为您完成，而无需操心复杂的细节。
import React, { useState } from 'react';
// Product: Art Piece
class ArtPiece {
constructor(public color: string, public shape: string) {}
describe(): string {
return `Piece with color ${this.color} and shape ${this.shape}`;
}
}
// Art Piece Types
class BlueSquarePiece extends ArtPiece {
constructor() {
super('blue', 'square');
}
}
class RedCirclePiece extends ArtPiece {
constructor() {
super('red', 'circle');
}
}
// Art Factory
class ArtFactory {
static createArtPiece(type: string): ArtPiece | null {
if (type === 'BlueSquare') {
return new BlueSquarePiece();
} else if (type === 'RedCircle') {
return new RedCirclePiece();
} else {
return null;
}
}
}
// React Component using the Simple Factory pattern
function ArtComponent() {
const [artPiece, setArtPiece] = useState<ArtPiece | null>(null);
const createNewPiece = (type: string) => {
const newPiece = ArtFactory.createArtPiece(type);
setArtPiece(newPiece);
};
return (
<div>
<h1>Art Piece Creation</h1>
{artPiece ? (
<div>
<p>{artPiece.describe()}</p>
</div>
) : (
<p>No art piece created yet</p>
)}
<button onClick={() => createNewPiece('BlueSquare')}>Create Blue Square Piece</button>
<button onClick={() => createNewPiece('RedCircle')}>Create Red Circle Piece</button>
</div>
);
}
export default ArtComponent;
在这个更新后的示例中，我们创建了一个名为“ArtFactory”的组件，用于生成不同类型的艺术组件（例如“BlueSquarePiece”和“RedCirclePiece”）。“Art Component” React组件利用该工厂根据用户输入创建艺术作品。这种简单的工厂模式提倡集中式的逻辑管理，便于管理和扩展各种艺术作品的创建。
2-抽象工厂模式
抽象工厂的模式类似于一个强大的工厂，它可以创建其他工厂。每个工厂负责生产相关的产品系列。想象一下，你正在制作艺术品，需要不同的组件，例如边缘、角和中心。抽象工厂可以帮助你为每种类型的艺术组件创建特定的工厂。
流程如下：
1-超级工厂：您的工厂规模庞大（抽象工厂），可以创建其他工厂。
2-特定工厂：超级工厂创建的每个特定工厂都致力于生产特定类型的艺术组件，例如边缘、角或中心。
3-获取作品：当你需要一件特定的艺术品时，你可以要求超级设施为你提供你想要的特定艺术品。
4-工厂生产艺术品：特定的工厂负责为您制作实际的艺术品。
总体而言，抽象工厂模式通过提供一系列工厂，简化了相关对象（例如艺术品）的创建过程。这种方法让您可以轻松获得所需的组件，而无需关心每个组件的具体制作方式。
import React, { useState } from 'react';
// Abstract Factory: Art Factory
interface ArtFactory {
createEdgePiece(): ArtPiece;
createCornerPiece(): ArtPiece;
createCenterPiece(): ArtPiece;
}
// Abstract Product: Art Piece
interface ArtPiece {
describe(): string;
}
// Concrete Product: Edge Art Piece
class EdgePiece implements ArtPiece {
describe(): string {
return 'Edge Art Piece';
}
}
// Concrete Product: Corner Art Piece
class CornerPiece implements ArtPiece {
describe(): string {
return 'Corner Art Piece';
}
}
// Concrete Product: Center Art Piece
class CenterPiece implements ArtPiece {
describe(): string {
return 'Center Art Piece';
}
}
// Concrete Factory: Normal Art Factory
class NormalArtFactory implements ArtFactory {
createEdgePiece(): ArtPiece {
return new EdgePiece();
}
createCornerPiece(): ArtPiece {
return new CornerPiece();
}
createCenterPiece(): ArtPiece {
return new CenterPiece();
}
}
// React Component using Abstract Factory pattern
function ArtComponent() {
const [artPieceType, setArtPieceType] = useState<string>(''); // 'Edge', 'Corner', or 'Center'
const [createdPiece, setCreatedPiece] = useState<ArtPiece | null>(null);
const createNewPiece = () => {
if (artPieceType === '') {
alert('Please select an art piece type!');
return;
}
let artFactory: ArtFactory;
// Decide which factory to use based on the selected piece type
if (artPieceType === 'Edge') {
artFactory = new NormalArtFactory();
} else if (artPieceType === 'Corner') {
artFactory = new NormalArtFactory();
} else if (artPieceType === 'Center') {
artFactory = new NormalArtFactory();
} else {
alert('Invalid art piece type!');
return;
}
// Create the specific art piece using the factory
const newPiece = artPieceType === 'Edge'
? artFactory.createEdgePiece()
: artPieceType === 'Corner'
? artFactory.createCornerPiece()
: artFactory.createCenterPiece();
setCreatedPiece(newPiece);
};
return (
<div>
<h1>Art Piece Creation</h1>
<label>Select Art Piece Type: </label>
<select onChange={(e) => setArtPieceType(e.target.value)}>
<option value="">Select</option>
<option value="Edge">Edge</option>
<option value="Corner">Corner</option>
<option value="Center">Center</option>
</select>
<button onClick={createNewPiece}>Create Art Piece</button>
{createdPiece && (
<div>
<p>{createdPiece.describe()}</p>
</div>
)}
</div>
);
}
export default ArtComponent;
在这个例子中：
ArtFactory是抽象工厂接口，NormalArtFactory是实现该接口的具体工厂。ArtPiece
是抽象产品接口，EdgePiece、CornerPiece和CenterPiece是实现该接口的具体产品。ArtComponent React
组件使用抽象工厂模式，根据用户的选择创建不同类型的艺术品。用户的选择决定了使用哪个具体工厂和产品。
此示例演示了抽象工厂模式如何通过提供工厂层级结构来组织相关对象（艺术品）的创建，从而方便将来添加新的艺术品类型。
3- 工厂化方法模式
工厂模式就像一份生产蓝图，每件物品都遵循特定的设计。想象一下，你创作不同类型的艺术品，每种类型都有其独特的创作方式。工厂模式就像一套指令（方法），告诉你如何制作特定类型的艺术品。
它的运作方式如下：
1. 蓝图（接口/抽象类）：首先要制定一个蓝图，描述一件艺术作品的外观或行为方式。这就像为创作作品制定了一套规则。
2. 工厂化方法：然后，针对每种类型的艺术品，都有一种特殊的制作方法（工厂化方法），这种方法知道如何创作该特定类型的艺术品。这就像为每种类型的艺术品都制定了一套独特的操作说明。
3. 创建部件：创建部件时，请使用与所需部件类型对应的工厂方法。此方法遵循蓝图中的规则，并据此创建部件。
简单来说，工厂方法模式提供了一种通过使用特定方法（工厂方法）来创建不同事物（例如艺术品）的方式，这些方法了解每种事物的具体制作细节。这就像拥有一套用于创建每种事物的专用指令。
让我们来看一个使用工厂模式创作艺术作品的简化示例：
import React, { useState } from 'react';
// Product (Art Piece) Interface
interface ArtPiece {
describe(): string;
}
// Concrete Products (Concrete Art Pieces)
class BlueSquarePiece implements ArtPiece {
describe(): string {
return 'Blue Square Art Piece';
}
}
class RedCirclePiece implements ArtPiece {
describe(): string {
return 'Red Circle Art Piece';
}
}
// Creator (Art Factory) Interface
interface ArtFactory {
createArtPiece(): ArtPiece;
}
// Concrete Creators (Concrete Art Factories)
class BlueSquareFactory implements ArtFactory {
createArtPiece(): ArtPiece {
return new BlueSquarePiece();
}
}
class RedCircleFactory implements ArtFactory {
createArtPiece(): ArtPiece {
return new RedCirclePiece();
}
}
// React Component using Factory Method pattern
function ArtComponent() {
const [artPieceType, setArtPieceType] = useState<string>(''); // 'BlueSquare' or 'RedCircle'
const [createdPiece, setCreatedPiece] = useState<ArtPiece | null>(null);
const createNewPiece = () => {
if (artPieceType === '') {
alert('Please select a art piece type!');
return;
}
let artFactory: ArtFactory;
// Decide which factory to use based on the selected piece type
if (artPieceType === 'BlueSquare') {
artFactory = new BlueSquareFactory();
} else if (artPieceType === 'RedCircle') {
artFactory = new RedCircleFactory();
} else {
alert('Invalid art piece type!');
return;
}
// Use the factory method to create the specific art piece
const newPiece = artFactory.createArtPiece();
setCreatedPiece(newPiece);
};
return (
<div>
<h1>Art Piece Creation</h1>
<label>Select Art Piece Type: </label>
<select onChange={(e) => setArtPieceType(e.target.value)}>
<option value="">Select</option>
<option value="BlueSquare">Blue Square</option>
<option value="RedCircle">Red Circle</option>
</select>
<button onClick={createNewPiece}>Create Art Piece</button>
{createdPiece && (
<div>
<p>{createdPiece.describe()}</p>
</div>
)}
</div>
);
}
export default ArtComponent;
在这个例子中：
ArtPiece是代表艺术品的产品接口 。BlueSquarePiece和 RedCirclePiece是 实现了ArtPiece接口的具体产品。ArtFactory 是创建 器接口，声明了工厂 方法 createArtPiece。BlueSquareFactory和RedCircleFactory是 实现了ArtFactory接口并提供 特定工厂方法的具体创建器。
React 组件ArtComponent使用工厂方法模式根据用户的选择创建拼图块，演示了特定工厂如何创建不同类型的拼图块。
概括：
简单工厂模式：提供一个集中式的工厂类来创建不同类型的对象；适用于简单的场景。
抽象工厂模式：涉及多个工厂，这些工厂被组织成家族；专注于创建相关或依赖的对象。
工厂方法模式：使用带有工厂方法的抽象创建类；将对象创建委托给子类，从而提高灵活性和可扩展性。
选择哪种模式取决于系统的具体需求以及对象创建所需的灵活性。简单工厂模式最为基础，而抽象工厂模式和工厂方法模式则提供了更复杂的方法来创建对象族，并允许更动态的实例化过程。
文章来源：https://dev.to/fpaghar/reasons-why-class-selectors-shouldnt-be-used-in-javascript-3pff