设计模式解析与实战

设计模式介绍

设计模式

软件设计中常见问题的典型解决方案。

解决特定问题的一般性概念。

算法 vs 模式

历史

模式 《建筑模式语言》

《设计模式》 =》 应用到程序开发领域

创建型模式

提供创建对象的机制，增加代码的灵活性以及可复用性。

单例模式

保证一个类只有一个实例，并且提供一个全局可访问该实例的节点。

比如说：vue中的路由、store、全局配置文件

建造者模式

将一个复杂的对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示

比如说：你去kfc吃炸鸡薯条汉堡包都是不变的，但是套餐会发生变化；再说电脑，CPU、内存、硬盘、主机、显示器等硬件设备组装在一起构成一台完整的计算机，且构成的计算机可以是笔记本，也可以是台式机，还可以是不提供显示器的服务器主机

function getPhone(size, type, screen, price, disount){}

// 优化为建造者模式，忽略位置且不需要关心没有填写的参数

function getPhone({size, type, screen = 'big', price, disount} = {}){}

// 注意这里一定要加 ={} 防止方法空传参调用 对undefined 结构然后typeError

结构型模式

如何将对象和类组装成较大的结构，同时保持结构的灵活和高效

代理模式

对原有对象进行扩展，从而实现对原有对象的控制或者额外的操作。

比如说：nginx，各种语言的后台,自己封装的axios

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 20000
})

装饰器模式

一种动态的往一个类中添加新的行为，往往是一种增强。把对象和函数各个功能独立，降低耦合性。

举例：我把藏宝图放到了俄罗斯套娃中；孙悟空有72变(装饰器)，当他变成"庙宇"后，他的根本还是一只猴子，但是他又有了庙宇的功能。

熟悉vue源码的话对这段应该不陌生，这里就是一个装饰器

const effect = function (fn, options = {}) {
    const effectFn = function () {
        cleanup(effectFn)
        activeEffect = effectFn

        effectStack.push(effectFn)
        fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
    }
    effectFn.deps = []
    effectFn.options = options 
    effectFn()
    return effectFn
}

与代理模式的区别？

• 强调的是在不改变对象的基础上，动态地给对象添加功能；
• 代理模式强调的是对对象访问的控制，可以在访问对象之前进行额外的操作；

适配器模式

让接口不兼容的对象能够相互合作。

比如说：去日本需要一个110V转220V的转接头，不然你手机咋充电。前端传给后端的数据要给对应的数据格式吗，不然就报错。后端给前端的数据格式也要转，不然用不了一点！毕竟你让他改他也不改。

外观(门面)模式

能为程序库、 框架或其他复杂类提供一个简单的接口。

比如说：swagger页面，或者说把某几个方法整合为一个方法然后暴露出去。

行为型模式

负责对象间的高效沟通和职责委派

观察者模式

允许你定义一种订阅机制， 可在对象事件发生时通知多个 “观察” 该对象的其他对象

比如说：vue中的watch，比如vue源码中的deps

发布订阅

发布者负责发布消息，而订阅者则可以选择订阅他们感兴趣的消息类型

比如说：你的手机app总是偷偷用你流量给你发所谓的最新消息，但是大部分你根本不关心，所以你选择了屏蔽他们。再比如vx的公众号，无论你关注与否，如果运营人员还健在，都会发布文章，但是你只有关注了才看得到。

发布订阅与观察者模式的区别：

• 观察者模式是1对多，发布订阅是多对多
• 发布订阅中间有一个中间层，发布者和订阅者不是直接信息交换
• 发布订阅是异步的，观察者模式是同步的

其他

还有一些没说的设计模式，可以看看 这个