【速学速记】《设计模式》这样学就对了！

待我称王封你为后i 2023-01-17 10:47 175阅读 0赞

> 李运通，微医前端技术部前端工程师。最怕你一生碌碌无为，还安慰自己平凡可贵。

## 设计模式解决什么痛点？ ##

> 它是解决特定问题的一系列套路，是前辈们的代码设计经验的总结，具有一定的普遍性，可以反复使用。其目的是为了`提高代码的可复用性、可读性、可维护性`。  
> 设计模式的本质是面向对象设计原则的实际运用，是对类的封装性、继承性和多态性以及类的关联关系和组合关系的充分理解。  
> `不要重复造轮子`。

## 什么是面向对象编程 ##

*  `面向对象编程`是一种编程范式或编程风格。它以类或对象作为组织代码的基本单元，并将封装、抽象、继承、多态四大特性，作为代码设计和实现的基石。
 *  `面向对象编程语言`是支持类或对象的语法机制，并有现成的语法机制，能方便的实现面向对象编程四大特性的编程语言
 *  `面向对象开发`包括面向对象分析 OOA、面向对象设计 OOD、面向对象编程 OOP

## 10大设计原则 ##

### 1.单一职责原则 SRP ###

`实现类要职责单一`：如果一段代码块（函数 类 模块）负责多个功能，那么当 A 功能需求发生改变的时候改动了代码，就有可能导致 B 功能出现问题，所以一段代码块只应该负责一个职责。

### 2.开放-封闭原则 OCP ###

`要对扩展开放，对修改关闭`：通过修改老代码来实现新功能可能导致老模块出现 BUG，所以我们应该通过开发新代码块来实现新功能

### 3.里氏替换原则 LSP ###

`不要破坏继承体系`：程序中的子类应该可以替换父类出现的任何地方并保持预期不变。所以子类尽量不要改变父类方法的预期行为

### 4.接口隔离原则 ISP ###

`设计接口的时候要精简单一`：当类 A 只需要接口 B 中的部分方法时，因为实现接口需要实现其所有的方法，于是就造成了类 A 多出了部分不需要的代码。这时应该将 B 接口拆分，将类A需要和不需要的方法隔离开来

### 5.依赖倒置原则 DIP ###

`面向接口编程`：抽象不应该依赖细节，细节应该依赖于抽象。核心是面向接口编程，我们应该依赖于抽象接口，而不是具体的接口实现类或具体的对象

### 注意：上面的 SOLID 又称为5大设计原则 ###

### 6.最少知识原则(迪米特原则)LOD ###

`降低耦合度`：一个类或对象应该对其它对象保持最少的了解。只与直接的朋友(耦合)通信。

### 7.组合/聚合复用原则 CRP ###

`多用组合少用继承`：尽可能通过组合已有对象（借用他们的能力）来实现新的功能，而不是使用继承来获取这些能力

### 8.不要重复你自己 DRY ###

功能语义重复应该合并，代码执行重复应该删减，`代码逻辑重复但语义不同应该保留`

### 9.尽量保持简单 KISS ###

尽可能使用简单可读性高的代码实现功能，而不用逻辑复杂、实现难度高、可读性差的方式

### 10.不要过度设计你暂时用不到的逻辑 YAGNI ###

不要过度优化、不要过度预留扩展点、不要设计同事看不懂的代码。

## 23种设计模式速记 ##

*  速记：5+7=11
 *   *  5种创建型
     *  7种结构型
     *  11种行为型
 *  创建型：`抽工单建原型`
 *   *  抽象工厂、工厂、单例、建造者、原型
 *  结构型：`桥代理装饰适配器，享元组合成门面`
 *   *  桥接、代理、装饰器、适配器、享元、组合、门面（外观）
 *  行为型：`观察模板迭代的状态，命令中介解释职责链，访问策略备忘录`
 *   *  观察者、模板、迭代、状态、命令、中介者、解释器、职责链、访问者、策略、备忘录

## 创建型设计模式 ##

`封装对象创建过程，将对象的创建和使用解耦`

### 单例模式 ###

#### 应用场景 ####

处理资源访问冲突、用来创建全局唯一类

#### 解决方案 ####

*  懒汉式：用到的时候才创建（场景：不一定需要用到、创建代价大、延迟加载、需要快速启动系统）
 *  饿汉式：系统启动时创建（场景：必定用到、临时创建影响响应速度）
 *  多例：同一类的固定个数相同实例

### 工厂模式 ###

#### 应用场景 ####

用来创建`继承同一父类、实现同一接口的子类`对象，由给定的类型参数创建具体的对象。

#### 解决方案 ####

enum HelloType {
      A,
      B
    }
    
    interface Hello {
      sayHello()
    }
    
    class A implements Hello {
      sayHello() {
        console.log('A');
      }
    }
    
    class B implements Hello {
      sayHello() {
        console.log('B');
      }
    }
    
    class HelloFactory {
      static list = new Map<HelloType, Hello>([
        [HelloType.A, new A()],
        [HelloType.B, new B()]
      ])
    
      static getHello(type: HelloType) {
        return HelloFactory.list.get(type)
      }
    }
    
    // test
    HelloFactory.getHello(HelloType.A).sayHello()
    HelloFactory.getHello(HelloType.B).sayHello()

### 抽象工厂模式 ###

#### 应用场景 ####

`继承同一父类、实现同一接口的子类`对象，由给定的多个类型参数创建具体的对象。

#### 解决方案 ####

enum Type {
      A,
      B
    }
    
    enum Occupation {
      TEACHER,
      STUDENT
    }
    
    interface Hello {
      sayHello()
    }
    
    class TA implements Hello {
      sayHello() {
        console.log('Teacher A say hello')
      }
    }
    
    class TB implements Hello {
      sayHello() {
        console.log('Teacher B say hello')
      }
    }
    
    class SA implements Hello {
      sayHello() {
        console.log('Student A say hello')
      }
    }
    
    class SB implements Hello {
      sayHello() {
        console.log('Student B say hello')
      }
    }
    
    class AFactory {
      static list = new Map<Occupation, Hello>([
        [Occupation.TEACHER, new TA()],
        [Occupation.STUDENT, new SA()]
      ])
    
      static getHello(occupation: Occupation) {
        return AFactory.list.get(occupation)
      }
    }
    
    class BFactory {
      static list = new Map<Occupation, Hello>([
        [Occupation.TEACHER, new TB()],
        [Occupation.STUDENT, new SB()]
      ])
    
      static getHello(occupation: Occupation) {
        return BFactory.list.get(occupation)
      }
    }
    
    class HelloFactory {
      static list = new Map<Type, AFactory | BFactory>([
        [Type.A, AFactory],
        [Type.B, BFactory]
      ])
    
      static getType(type: Type) {
        return HelloFactory.list.get(type)
      }
    }
    
    // test
    HelloFactory.getType(Type.A).getHello(Occupation.TEACHER).sayHello()
    HelloFactory.getType(Type.A).getHello(Occupation.STUDENT).sayHello()
    HelloFactory.getType(Type.B).getHello(Occupation.TEACHER).sayHello()
    HelloFactory.getType(Type.B).getHello(Occupation.STUDENT).sayHello()

### 建造者模式 ###

#### 应用场景 ####

*  创建时有很多必填参数需要验证
 *  创建时参数求值有先后顺序、相互依赖
 *  创建有很多步骤，全部成功才能创建对象

#### 解决方案 ####

class Programmer {
      age: number
      username: string
      color: string
      area: string
    
      constructor(p) {
        this.age = p.age
        this.username = p.username
        this.color = p.color
        this.area = p.area
      }
    
      toString() {
        console.log(this)
      }
    }
    
    class Builder {
      age: number
      username: string
      color: string
      area: string
    
      build() {
        if (this.age && this.username && this.color && this.area) {
          return new Programmer(this)
        } else {
          throw new Error('缺少信息')
        }
      }
    
      setAge(age: number) {
        if (age > 18 && age < 36) {
          this.age = age
          return this
        } else {
          throw new Error('年龄不合适')
        }
      }
    
      setUsername(username: string) {
        if (username !== '小明') {
          this.username = username
          return this
        } else {
          throw new Error('小明不合适')
        }
      }
    
      setColor(color: string) {
        if (color !== 'yellow') {
          this.color = color
          return this
        } else {
          throw new Error('yellow不合适')
        }
      }
    
      setArea(area: string) {
        this.area = area
        return this
      }
    }
    
    // test
    const p = new Builder()
      .setAge(20)
      .setUsername('小红')
      .setColor('red')
      .setArea('hz')
      .build()
      .toString()

### 原型模式 ###

#### 应用场景 ####

*  原型模式是基于已有的对象克隆数据，而不是修改原型链！
 *  创建对象的代价太大，而同类的不同实例对象属性值基本一致。通过原型克隆的方式节约资源
 *  不可变对象通过浅克隆实现
 *  可变对象通过深克隆实现，深克隆占用资源多
 *  同一对象不同时间版本，可以对比没变化的浅克隆，变化的深克隆，然后新版本替换旧版本。

## 结构型设计模式 ##

`总结了一些类或对象组合在一起的经典结构，这些经典结构可以解决特定应用场景的问题，将类或对象的结构和使用解耦`

### 桥接模式 ###

#### 应用场景 ####

*  将抽象和实现解耦，让它们可以独立变化
 *  一个类存在多个独立变化的维度，我们通过组合的方式，让多个维度可以独立进行扩展
 *  非常类似于组合优于继承原则

#### 解决方案 ####

enum MsgLevel {
      ERROR,
      WARN,
    }
    
    enum MsgType {
      EMAIL,
      PHONE
    }
    
    interface MsgContent {
      content()
    }
    
    class ErrorMsg implements MsgContent {
      content() {
        return 'ERROR'
      }
    }
    
    class WarnMsg implements MsgContent {
      content() {
        return 'WARN'
      }
    }
    
    interface MsgSender {
      send()
    }
    
    class PhoneSend implements MsgSender {
      msgContent: MsgContent
    
      constructor(msgContent: MsgContent) {
        this.msgContent = msgContent
      }
    
      send() {
        console.log(`phone send ${this.msgContent.content()}`)
      }
    }
    
    class EmailSend implements MsgSender {
      msgContent: MsgContent
    
      constructor(msgContent: MsgContent) {
        this.msgContent = msgContent
      }
    
      send() {
        console.log(`email send ${this.msgContent.content()}`)
      }
    }
    
    // test 此处还可以做成map结构继续优化（略）
    new PhoneSend(new WarnMsg()).send()
    new PhoneSend(new ErrorMsg()).send()
    new EmailSend(new WarnMsg()).send()
    new EmailSend(new ErrorMsg()).send()

### 代理模式 ###

#### 应用场景 ####

*  给原类添加非功能性需求，为了将代码与原业务解耦
 *  业务系统的非功能性需求开发：监控、统计、鉴权、限流、日志、缓存

#### 解决方案 ####

*  通过继承实现（不推荐）

class User{
      login(){
        console.log('user login...')
      }
    }
    
    class UserProxy extends User{
      login() {
        console.log('login before')
        super.login()
        console.log('login after')
      }
    }

*  通过接口实现（推荐）

interface Login {
      login()
    }
    
    class User implements Login {
      login() {
        console.log('user login...')
      }
    }
    
    class UserProxy implements Login {
      user = new User()
    
      login() {
        console.log('login before')
        this.user.login()
        console.log('login after')
      }
    }

### 装饰器模式 ###

#### 应用场景 ####

*  装饰器类是对原始功能的增强
 *  装饰器类和原始类继承同样的父类，这样我们可以对原始类嵌套多个装饰器类
 *  主要解决继承关系过于复杂的问题，通过组合来替代继承
 *  可以通过对原始类嵌套使用多个装饰器

#### 解决方案 ####

*  通过 AOP 实现

Function.prototype.before = function (beforeFn) {
      return (...arg) => {
        beforeFn(...arg);
        return this(...arg);
      }
    };
    Function.prototype.after = function (afterFn) {
      return (...arg) => {
        const result = this(...arg);
        afterFn(...arg);
        return result;
      }
    };
    
    function ImportEvent1 {
      console.log('重要的事情说三遍 1')
    }
    
    function ImportEvent2 {
      console.log('重要的事情说三遍 2')
    }
    
    function ImportEvent3 {
      console.log('重要的事情说三遍 3')
    }
    
    // test
    ImportEvent2.before(ImportEvent1).after(ImportEvent3)()

### 适配器模式 ###

#### 应用场景 ####

*  适配器模式用于补救设计上的缺陷，将不兼容的接口变得兼容
 *  封装有缺陷的接口设计
 *  统一多个类的接口设计
 *  替换依赖的外部系统
 *  兼容老版本接口
 *  适配不同格式的数据

#### 解决方案 ####

*  原接口方法不多，类适配器和对象适配器都可以
 *  如果原类方法很多，并且和目标接口差异小，用类适配器减少代码量
 *  如果原类方法很多，并且和目标接口差异大，用对象适配器，组合优于继承

// 目标接口格式
    interface ITarget {
      f1()
    
      f2()
    
      f3()
    }
    
    // 原有类与目标接口不兼容
    class Origin {
      fa() {
      }
    
      fb() {
      }
    
      f3() {
      }
    }
    
    // 使用适配器来兼容
    class Adaptor implements ITarget {
      origin = new Origin()
    
      f1() {
        this.origin.fa()
      }
    
      f2() {
        this.origin.fb()
      }
    
      f3() {
        this.origin.f3()
      }
    }

### 享元模式 ###

#### 应用场景 ####

*  共享的单元。复用对象，节省内存，前提是享元对象是不可变对象(初始化之后不再改变)。

#### 解决方案 ####

*  比如网上象棋游戏有1000个房间，每个房间有1个棋盘，棋盘当前状态(棋子位置)各不相同，但棋子的大小、颜色、名字是相同且固定的，可以设计成享元

### 组合模式 ###

#### 应用场景 ####

将一组对象组织成树形结构，以表示一种“部分-整体”的层次结构。组合模式让客户端可以统一单个对象和组合对象的处理逻辑(递归遍历)

#### 解决方案 ####

abstract class FileSystemNode {
      path: string
    
      abstract getFilesCount()
    
      abstract getFilesSize()
    }
    
    class FileNode extends FileSystemNode {
      constructor(path) {
        super();
        this.path = path
      }
    
      getFilesCount() {
        return 1
      }
    
      getFilesSize() {
        return require(this.path).length
      }
    }
    
    class Directory extends FileSystemNode {
      subNodes = []
    
      constructor(path) {
        super();
        this.path = path
      }
    
      getFilesCount() {
        return this.subNodes.reduce(item => item.getCount(), 0)
      }
    
      getFilesSize() {
        return this.subNodes.reduce(item => item.getSize(), 0)
      }
    }

### 门面(外观)模式 ###

#### 应用场景 ####

*  将多个后端接口请求合并为一个（冗余接口），提高响应速度，解决性能问题
 *  通过封装细粒度接口，提供组合各个细粒度接口的高层次接口，来提高接口的易用性

## 行为型设计模式 ##

`总结了一些类或对象交互的经典方式，将该行为相关的类或对象解耦`

### 观察者模式 ###

#### 应用场景 ####

*  将观察者与被观察者解耦
 *  发布订阅模式有发布订阅调度中心(中间商)，观察者模式没有！

#### 解决方案 ####

// 目标对象
    class Subject {
      observerList: Observer[]
    
      constructor() {
        this.observerList = [];
      }
    
      addObserver(observer) {
        this.observerList.push(observer);
      }
    
      notify() {
        this.observerList.forEach((observer) => {
          observer.update();
        });
      }
    }
    
    // 观察者
    class Observer {
      cb: Function
    
      constructor(cb: Function) {
        if (typeof cb === "function") {
          this.cb = cb;
        } else {
          throw new Error("Observer构造器必须传入函数类型！");
        }
      }
    
      update() {
        this.cb();
      }
    }
    
    
    // test
    const observerCallback = function () {
      console.log("我被通知了");
    };
    const observer = new Observer(observerCallback);
    const subject = new Subject();
    subject.addObserver(observer);
    subject.notify();

### 模板模式 ###

#### 应用场景 ####

*  在一个方法里定义一个算法(业务逻辑)骨架，并将某些步骤推迟到子类中实现。模板方法模式可以让子类在不改变算法整体结构的情况下，重新定义算法中的某些步骤。
 *  复用 扩展

#### 解决方案 ####

abstract class Drinks {
      firstStep() {
        console.log('烧开水')
      }
    
      abstract secondStep()
    
      thirdStep() {
        console.log('倒入杯子')
      }
    
      abstract fourthStep()
    
      drink() {
        this.firstStep()
        this.secondStep()
        this.thirdStep()
        this.fourthStep()
      }
    }
    
    class Tea extends Drinks {
      secondStep() {
        console.log('浸泡茶叶')
      }
    
      fourthStep() {
        console.log('加柠檬')
      }
    }
    
    class Coffee extends Drinks {
      secondStep() {
        console.log('冲泡咖啡')
      }
    
      fourthStep() {
        console.log('加糖')
      }
    }
    
    // test
    const tea = new Tea()
    tea.drink()
    const coffee = new Coffee()
    coffee.drink()

### 策略模式 ###

#### 应用场景 ####

*  定义一族算法族，将每个算法分别封装起来，让他们可以相互替换。
 *  避免冗长的 if-else 或 switch 分支判断

#### 解决方案 ####

enum StrategyType {
      S,
      A,
      B
    }
    
    const strategyFn = {
      'S': function (salary: number) {
        return salary * 4
      },
      'A': function (salary: number) {
        return salary * 3
      },
      'B': function (salary: number) {
        return salary * 2
      }
    }
    
    const calculateBonus = function (level: StrategyType, salary: number) {
      return strategyFn[level](salary)
    }
    
    calculateBonus(StrategyType.A, 10000) // 30000

### 职责链模式 ###

#### 应用场景 ####

*  多个处理器 ABC 依次处理同一个请求，形成一个链条，当某个处理器能处理这个请求，就不会继续传递给后续处理器了
 *  过滤器 拦截器 处理器

#### 解决方案 ####

const order500 = function (orderType, pay, stock) {
      if (orderType === 1 && pay === true) {
        console.log("500 元定金预购, 得到 100 元优惠券");
        return true;
      } else {
        return false;
      }
    };
    
    const order200 = function (orderType, pay, stock) {
      if (orderType === 2 && pay === true) {
        console.log("200 元定金预购, 得到 50 元优惠券");
        return true;
      } else {
        return false;
      }
    };
    
    const orderCommon = function (orderType, pay, stock) {
      if ((orderType === 3 || !pay) && stock > 0) {
        console.log("普通购买, 无优惠券");
        return true;
      } else {
        console.log("库存不够, 无法购买");
        return false;
      }
    };
    
    class chain {
      fn: Function
      nextFn: Function
    
      constructor(fn: Function) {
        this.fn = fn;
        this.nextFn = null;
      }
    
      setNext(nextFn) {
        this.nextFn = nextFn
      }
    
      init(...arguments) {
        const result = this.fn(...arguments);
        if (!result && this.nextFn) {
          this.nextFn.init(...arguments);
        }
      }
    }
    
    const order500New = new chain(order500);
    const order200New = new chain(order200);
    const orderCommonNew = new chain(orderCommon);
    
    order500New.setNext(order200New);
    order200New.setNext(orderCommonNew);
    
    order500New.init(3, true, 500); // 普通购买, 无优惠券

### 状态模式 ###

#### 应用场景 ####

*  将事物内部的每个状态分别封装成类, 内部状态改变会产生不同行为

#### 解决方案 ####

class weakLight {
      light: Light
    
      constructor(light: Light) {
        this.light = light
      }
    
      press() {
        console.log('打开强光')
        this.light.setState(this.light.strongLight)
      }
    }
    
    class strongLight {
      light: Light
    
      constructor(light: Light) {
        this.light = light
      }
    
      press() {
        console.log('关灯')
        this.light.setState(this.light.offLight)
      }
    }
    
    class offLight {
      light: Light
    
      constructor(light: Light) {
        this.light = light
      }
    
      press() {
        console.log('打开弱光')
        this.light.setState(this.light.weakLight)
      }
    }
    
    
    class Light {
      weakLight: weakLight
      strongLight: strongLight
      offLight: offLight
      currentState: offLight | weakLight | strongLight //当前状态: 默认关灯状态
    
      constructor() {
        this.weakLight = new weakLight(this)
        this.strongLight = new strongLight(this)
        this.offLight = new offLight(this)
        this.currentState = this.offLight
      }
    
      press() {
        this.currentState.press()
      }
    
      setState(state) {
        this.currentState = state
      }
    }
    
    // test
    const light = new Light()
    light.press()
    light.press()
    light.press()
    light.press()
    light.press()
    light.press()

### 迭代器模式 ###

#### 应用场景 ####

*  遍历集合对象

### 访问者模式 ###

#### 应用场景 ####

*  允许一个或多个操作应用到一组对象上，解耦操作和对象本身

### 备忘录模式 ###

#### 应用场景 ####

*  在不违背封装原则的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态，以便之后恢复对象为先前的状态

### 解决方案 ###

class Programmer {
      age: number
      username: string
      color: string
      area: string
    
      constructor(p) {
        this.age = p.age
        this.username = p.username
        this.color = p.color
        this.area = p.area
      }
    
      // 创建一个快照
      createSnapshot() {
        return {
          age: this.age,
          username: this.username,
          color: this.color,
          area: this.area
        }
      }
    
      // 通过快照恢复对象状态
      restoreSnapshot(snapshot: Programmer) {
        this.age = snapshot.age
        this.username = snapshot.username
        this.color = snapshot.color
        this.area = snapshot.area
      }
    }

### 命令模式 ###

#### 应用场景 ####

*  命令模式的主要作用和应用场景，是用来控制命令的执行，比如，异步、延迟、排队执行命令、撤销重做命令、存储命令、给命令记录日志等。将命令的发起者和执行者解耦。

#### 解决方案 ####

interface Command {
      execute()
    }
    
    class closeDoorCommand implements Command {
      execute() {
        console.log('close door');
      }
    }
    
    class openPcCommand implements Command {
      execute() {
        console.log('open pc');
      }
    }
    
    class openQQCommand implements Command {
      execute() {
        console.log('login qq');
      }
    }
    
    class CommandManager {
      commandList: Command[] = []
    
      addCommand(command: Command) {
        this.commandList.push(command)
      }
    
      execute() {
        this.commandList.forEach(command => {
          command.execute()
        })
      }
    }
    
    //test
    const commandManager = new CommandManager();
    commandManager.addCommand(new closeDoorCommand());
    commandManager.addCommand(new openPcCommand());
    commandManager.addCommand(new openQQCommand());
    commandManager.execute();

### 解释器模式 ###

#### 应用场景 ####

给定一个语言，定义它的文法表示，并定义一个解释器，这个解释器使用该标识来解释语言中的句子

### 中介模式 ###

#### 应用场景 ####

*  中介模式的设计思想跟中间层很像，通过引入中介这个中间层，将一组对象之间的交互关系（依赖关系）转换成一对多（星状关系）。原本一个对象要跟n个对象交互，现在只需要跟一个中介对象交互，从而最小化对象间的交互关系，降低了代码复杂度，提高了代码的可读性和可维护性。

## 如何评价代码的质量？ ##

*  可读性、可扩展性、可维护性、可复用性、可测试性...
 *  高内聚低耦合
 *  `善战者无赫赫之功善医者无煌煌之名，大智若愚大巧若拙，真正的好代码并不是用了多少厉害的技术与奇技淫巧，而是看尽人世繁华后的返璞归真，寥寥几笔实现了功能的同时却没有任何个人风格的痕迹，小白都能看得懂的代码才是好代码。`

## 怎样形成长期记忆？ ##

*  `想办法把零散的知识点串联起来记忆`
 *   *  自顶向下形成金字塔结构记忆
     *  编成关键字口诀记忆
 *  `得意忘形`
 *   *  将知识的精华枝干提取出来强化记忆，去粗取精
 *  `学而不思则罔，思而不学则殆`
 *   *  深度思考能将他人的知识真正转化成自己的
 *  `学而时习之，不亦说乎`
 *   *  第一次学会只是脑海中的短时记忆，`需要多次复习强化才能形成长期记忆`

## 注意事项 ##

> 知识是死的，而代码是活的，不要用固化的设计模式实现硬套在活的业务逻辑里。  
> 能学以致用是我们的学习目标，但是如果写出来的代码同组的其他人都看不懂，更加影响项目的可维护性和开发效率。所以我们可以少用慎用，但是我们必须掌握其思想。  
> 牢牢掌握设计模式，拿去面试、面试别人、组内分享还是可以震慑群雄的，啊哈哈哈

`别忘记对我素质三连，点赞、关注、评论`

最后

*  欢迎加我微信，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![6bcc419e734abf8a066d95cedc08e6e5.png][]

![beaf12525b612bcc9c974c5a43c8f15c.png][]

点个**在看**支持我吧

![c96710b07aeb86ae0deff7766fc5dd42.gif][]

[6bcc419e734abf8a066d95cedc08e6e5.png]: /images/20221021/b4368fa921a241ee81962847950dbf54.png
[beaf12525b612bcc9c974c5a43c8f15c.png]: /images/20221021/012966e05b50450590e1524c1e2a164b.png
[c96710b07aeb86ae0deff7766fc5dd42.gif]: /images/20221021/cdb8e3c1124f42afb0609357df37e20a.png