设计模式

Posted 2020-11-07 日月星辰

现在我们对前端的讨论逐渐开始分化，一边是和交互有关的CSS、html，另一边开始关注前端的工程化。工程化在很大一部分在讨论的东西跟设计模式类似——其实设计模式本质上讨论的是可复用的面向对象框架。随着前端组件化程度越来越完善，我们应该对面向对象的方式如何解决问题或多或少有些了解，但如果我在一开始就来列举一下告诉大家有这么多设计模式未免有些枯燥而且毫无意义。前两章中通过对大家经常用到的工具进行分析，让大家能对设计模式学习有个基础的理解，因此我在这个系列的第三篇文章再来讨论这个话题。

设计模式本身也在演化。前面两篇文章提到的一部分设计模式在《Design Patterns : Elements of Reusable Object-Oriented Software》（下文简称《设计模式》）这本书中有完整的介绍。另外这本书也讨论了在设计框架时候我们需要使用何种设计模式来进行实现，但是随着业务逻辑越来越复杂，许多当时没有被设计出来的模式也从原有的模式中演化出来，如Promise\Rxjs从观察者模式演化而来，依赖注入是工厂方法的一种复杂的变种。因此了解旧的设计模式以及演化过程对使用新的设计模式大有裨益。因此在这篇文章中我们回来看看这些旧的设计模式有哪些。另外，由于《设计模式》中的例子都是C++来实现，有能力的朋友也可以自己来翻看这本书。

在《设计模式》中，将设计模式分为以下三类。

• 创建型模式：描述了不同场景下不同的数据应该被如何生成、获取。其中，在《设计模式》中提到的创建型模式有以下这些：

Abstract Factory : 抽象工厂
Builder : 生成器
Factory Method : 工厂方法
Prototype : 原型
Singleton : 单例

• 结构型模式：描述了不同场景下不同的数据应该被如何组合、管理。其中，在《设计模式》中提到的结构型模式有以下这些：

Adapter : 适配器
Bridge : 桥接
Composite : 组成
Decorator : 装饰
Facade : 外观
Flyweight : 享元
Proxy : 代理

• 行为模式：描述了不同场景下不同的数据应该被如何处理、使用。其中，在《设计模式》中提到的行为模式有以下这些：

Chain Of Responsibility : 责任链
Command : 命令
Interpreter : 解释器
Iterator : 迭代器
Mediator : 中介者
Memento : 备忘录
Observer : 观察者
State : 状态
Strategy : 策略
Template Method : 模版方法
Visitor : 访问者

在《从回调函数到Rx.js》中提到的设计模式属于行为模式，而在《从单例模式到控制反转》中提到的设计模式属于创建型模式。将来我们还会对剩下的设计模式及其演化做一系列介绍。

另外，在《Learning javascript Design Patterns》这本书中，对JavaScript中经常使用到的设计模式也进行了一部分的总结。有兴趣的朋友可以翻翻这本书。