从前端视角看设计模式之创建型模式篇

最新推荐文章于 2025-01-20 15:45:02 发布

原创

最新推荐文章于 2025-01-20 15:45:02 发布 · 1k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #设计模式 #javascript

设计模式简介

"设计模式"源于GOF（四人帮）合著出版的《设计模式：可复用的面向对象软件元素》，该书第一次完整科普了软件开发中设计模式的概念，他们提出的设计模式主要是基于以下的面向对象设计原则：

对接口编程而不是对实现编程
优先使用对象组合而不是继承

根据该书所提到的，总共有 23 种设计模式，这些模式可以分为以下三大类：

1）创建型模式

这些模式提供了一种在创建对象的同时隐藏创建逻辑的方式，而不是使用 new 运算符直接实例化对象，这使得程序在判断针对某个给定实例需要创建哪些对象时更加灵活

包括：工厂模式、抽象工厂模式、单例模式、建造者模式、原型模式

2）结构型模式

这些模式关注对象之间的组合和关系，旨在解决如何构建灵活且可复用的类和对象结构

包括：适配器模式、桥接模式、过滤器模式、组合模式、装饰器模式、外观模式、享元模式、代理模式

3）行为型模式

这些模式关注对象之间的通信和交互，旨在解决对象之间的责任分配和算法的封装

包括：责任链模式、命令模式、解释器模式、迭代器模式、中介者模式、备忘录模式、观察者模式、状态模式、空对象模式、策略模式、模板模式、访问者模式

下图描述设计模式之间的关系：
在这里插入图片描述

设计模式的六大原则

1）开闭原则

开闭原则是指：对扩展开发，对修改关闭。在程序需要进行扩展的时候，不能去修改原有的代码，想要达到这样的效果，我们需要使用接口和抽象类

2）里氏代换原则

里氏代换原则中说，任何基类可以出现的地方，子类一定可以出现。该原则其实是对开闭原则的补充，实现开闭原则的关键步骤是抽象化，而基类与子类的继承关系就是抽象化的具体实现，所以里氏代换原则是对实现抽象化的具体步骤的规范

3）依赖倒转原则

这个原则是开闭原则的基础，具体内容：针对接口编程，依赖于抽象而不依赖于具体

4）接口隔离原则

接口隔离原则是指：使用多个隔离的接口，比使用单个接口要好，还有个意思是：降低类之间的耦合度

5）迪米特原则（又称：最少知道原则）

最少知道原则是指：一个实体尽量少地与其他实体发生相互作用，使得系统功能模块相互独立

6）合成复用原则

合成复用原则是指：尽量使用合成/聚合的方式，而不是使用继承

工厂模式

工厂模式提供了一种创建对象的方式，而无需指定要创建的具体类。通过使用工厂模式，可以将对象的创建逻辑封装到一个工厂类里，而不是在客户端代码中直接实例化对象

工厂模式主要有以下几种类型：

1）简单工厂模式

简单工厂模式不是一个正式的设计模式，但它是工厂模式的基础，它使用一个单独的工厂类来创建不同的对象，根据传入的参数决定创建哪种类型的对象

2）工厂方法模式

工厂方法模式定义了一个创建对象的接口，但由子类决定实例化哪个类，工厂方法将对象的创建延迟到子类

3）抽象工厂模式

抽象工厂模式提供一个创建一系列相关或互相依赖对象的接口，而无需指定它们具体的类

当我们需要在不同条件下创建不同实例时可以使用工厂模式，它的使用场景主要有以下几个：

1）日志记录：日志可能记录到本地硬盘、远程服务器等，用户可以选择记录日志的位置

2）数据库访问：当用户不知道最终系统使用哪种数据库，或者数据库可能变化时

PS：工厂模式适用于生成复杂对象的场景，如果对象较为简单，通过 new 即可完成创建，而不必使用工厂模式，使用工厂模式会引入一个工厂类，增加系统复杂度

它的优缺点：

1）优点

调用者只需要知道对象的名称即可创建对象
扩展性高：如果需要增加新产品，只需扩展一个工厂类即可
屏蔽了产品的具体实现，调用者只关心产品的接口

2）缺点

每次增加一个产品时，都需要增加一个具体类和对应的工厂，使系统中类的数量成倍增加，增加了系统的复杂度和具体类的依赖

工厂模式包含以下几个主要角色：

1）抽象产品

定义了产品的共同接口或抽象类，它可以是具体产品类的父类或接口，规定了产品对象的共同方法

2）具体产品

实现了抽象产品接口，定义了具体产品的特定行为和属性

3）抽象工厂

声明了创建产品的抽象方法，可以是接口或抽象类，它可以有多个方法用于创建不同类型的产品

4）具体工厂

实现了抽象工厂接口，负责实际创建具体产品的对象

我们通过以下一个简单的实例来展示工厂模式的实现，假设我们有不同种类的button需要创建，每个按钮有不同的实现

1）定义抽象产品和具体产品

Button类是一个抽象类（接口），它有两个方法：render()用于渲染按钮，onClick()用于按钮点击后的行为

WindowsButton和 MacButton分别实现了Button接口，提供具体的渲染和点击行为

// 抽象产品：button
class Button {
    render() {
      throw new Error('方法 "render()" 被实现')
    }
    onClick() {
      throw new Error('方法 "onClick()" 被实现')
    }
}
  
// 具体产品：Windows 按钮
class WindowsButton extends Button {
    render() {
        console.log('渲染 Windows 按钮')
    }
    onClick() {
        consol