设计模式:抽象工厂、适配器与装饰器模式解析
立即解锁
发布时间: 2025-09-05 00:19:23 阅读量: 3 订阅数: 6 AIGC 

### 设计模式:抽象工厂、适配器与装饰器模式解析
#### 抽象工厂模式
抽象工厂模式是一种创建型设计模式,它提供了一种方式来封装一组具有共同主题的单个工厂的创建对象的方式。
##### 抽象工厂模式的实现
假设我们要为创建网站页面定义一个抽象工厂。一个网站页面可以看作由三部分组成:头部(Header)、内容区域(Content)和页脚(Footer)。可以用接口来描述这个抽象工厂:
```typescript
// AbstractFactory.ts
interface WebsitePageFactory {
createHeader(): Header;
createContent(): Content;
createFooter(): Footer;
}
interface Header {
content: string;
}
interface Content {
content: string;
}
interface Footer {
content: string;
}
```
这些接口只是创建新工厂的占位符。最简单的用法是实现一个用于创建 HTML 元素的 HTML 抽象工厂,也可以用于 PDF 文档,这样可以重用相同的接口。以下是 HTML 工厂的实现示例:
```typescript
// AbstractFactory.ts
class HTMLWebsitePageFactory implements WebsitePageFactory {
createHeader(text: string): HTMLHeader {
return new HTMLHeader(text);
}
createContent(text: string): HTMLContent {
return new HTMLContent(text);
}
createFooter(text: string): HTMLFooter {
return new HTMLFooter(text);
}
}
class HTMLHeader implements Header {
content: string;
constructor(text: string) {
this.content = `<head>${text}</head>`;
}
}
class HTMLContent implements Content {
content: string;
constructor(text: string) {
this.content = `<main>${text}</main>`;
}
}
class HTMLFooter implements Footer {
content: string;
constructor(text: string) {
this.content = `<footer>${text}</footer>`;
}
}
```
可以运行一些示例对象来检查它们的输出行为:
```typescript
const wpf: WebsitePageFactory = new HTMLWebsitePageFactory();
console.log(wpf.createContent("Content").content);
console.log(wpf.createHeader("Header").content);
console.log(wpf.createFooter("Footer").content);
```
由于该模式依赖于接口,因此在未来更具可扩展性。只要有对多种不同类型工厂的需求,这种模式就很有意义。
##### 抽象工厂模式的测试
测试抽象工厂模式时,需要验证抽象工厂的具体实现是否能产生正确类型的对象。以下是一些典型的测试用例:
```typescript
// AbstractFactory.test.ts
import {
HTMLWebsitePageFactory,
WebsitePageFactory,
HTMLContent,
HTMLHeader,
HTMLFooter,
} from "./AbstractFactory";
const wpf: WebsitePageFactory = new HTMLWebsitePageFactory();
test("it creates an HTML Content type", () => {
const content = wpf.createContent("Content");
expect(content).toBeInstanceOf(HTMLContent);
expect(content.content).toBe("<main>Content</main>");
});
test("it creates an HTML Header type", () => {
const header = wpf.createHeader("Header");
expect(header).toBeInstanceOf(HTMLHeader);
expect(header.content).toBe("<head>Header</head>");
});
test("it creates an HTML Footer type", () => {
const footer = wpf.createFooter("Footer");
expect(footer).toBeInstanceOf(HTMLFooter);
expect(footer.content).toBe("<footer>Footer</footer>");
});
```
##### 抽象工厂模式的批评
与类似的设计模式一样,使用抽象工厂模式可能会导致不必要的复杂性和额外的代码编写工作。此外,更高程度的分离和抽象可能会使系统更难调试和维护。通常需要经过多次迭代才能清晰地定义对象层次结构并实现抽象工厂,这意味着很可能需要在开发过程的前期重构代码以遵循该模式。
##### 抽象工厂模式的现实案例
在实际应用中,可能会遇到需要根据不同的渲染输出支持页面上的各种 UI 元素的情况。例如,使用 Canvas 时,可以定义一个 Circle 接口和一个 drawCircle 方法,该方法由运行时环境调用。如果还想支持 SVG,则需要扩展 BrowserGraphicsFactory 接口并实现绘制圆形的方法:
```typescript
type Circle = string;
type Rectangle = string;
type CircleProps = {
cx: number;
cy: number;
radius: number;
};
type RectangleProps = {
x1: number;
y1: number;
width: number;
height: number;
};
interface BrowserGraphicsFactory {
drawCircle(props: CircleProps): Circle;
drawRectangle(props: RectangleProps): Rectangle;
}
class CanvasGraphicsFactory implements BrowserGraphicsFactory {
// Implementation
}
class SVGGraphicsFactory implements BrowserGraphicsFactory {
// Implementation
}
```
#### 结构型设计模式概
0
0
复制全文
相关推荐









