前端设计模式之旅：命令模式

5. 需要支持队列请求的场景。

命令模式可以将请求封装成对象，并将请求放入队列中，从而支持队列请求的场景。

案例实践

假设我们有一个简单的计算器，它可以执行加、减、乘、除四种操作。

我们可以使用命令模式来实现这个计算器，将每个操作封装成一个命令对象，然后将命令对象传递给计算器，从而实现不同的操作。

整体步骤

1. 第一步：我们定义一个命令接口，它包含一个execute方法
2. 第二步：我们定义四个具体的命令类，分别对应加、减、乘、除四种操作
3. 第三步：我们定义一个计算器类，它包含一个命令队列和一个执行命令的方法
4. 第四步：使用这些类来实现一个简单的计算器

第一步，我们定义一个命令接口，它包含一个execute方法：

class Command {
  execute() {}
}

第二步，我们定义四个具体的命令类，分别对应加、减、乘、除四种操作：

加法操作：AddCommand类继承Command

class AddCommand extends Command {
  constructor(receiver, value) {
    super();
    this.receiver = receiver;
    this.value = value;
  }

  execute() {
    this.receiver.add(this.value);
  }
}

减法操作：SubCommand类继承Command

class SubCommand extends Command {
  constructor(receiver, value) {
    super();
    this.receiver = receiver;
    this.value = value;
  }

  execute() {
    this.receiver.sub(this.value);
  }
}

乘法操作：MulCommand类继承Command

class MulCommand extends Command {
  constructor(receiver, value) {
    super();
    this.receiver = receiver;
    this.value = value;
  }

  execute() {
    this.receiver.mul(this.value);
  }
}

除法操作：DivCommand类继承Command

class DivCommand extends Command {
  constructor(receiver, value) {
    super();
    this.receiver = receiver;
    this.value = value;
  }

  execute() {
    this.receiver.div(this.value);
  }
}

其中，每个命令类都包含一个接收者对象和一个操作值，execute方法会调用接收者对象的相应方法来执行操作。

第三步，我们定义一个计算器类，它包含一个命令队列和一个执行命令的方法：

// 计算器类
class Calculator {
  constructor() {
    this.commands = [];
    this.current = 0;
  }
// addCommand方法用于将命令对象添加到命令队列中
  addCommand(command) {
    this.commands.push(command);
  }
// executeCommand方法用于执行当前命令
  executeCommand() {
    this.commands[this.current].execute();
    this.current++;
  }
// undo方法用于撤销上一个命令
  undo() {
    this.commands[this.current - 1].execute();
    this.current--;
  }
// redo方法用于重做上一个命令
  redo() {
    this.commands[this.current].execute();
    this.current++;
  }
}

其中，addCommand方法用于将命令对象添加到命令队列中，executeCommand方法用于执行当前命令，undo方法用于撤销上一个命令，redo方法用于重做上一个命令。

第四步，使用这些类来实现一个简单的计算器：

const calculator = new Calculator();


**TCP协议**

- TCP 和 UDP 的区别？
- TCP 三次握手的过程？
- 为什么是三次而不是两次、四次？
- 三次握手过程中可以携带数据么？
- 说说 TCP 四次挥手的过程
- 为什么是四次挥手而不是三次？
- 半连接队列和 SYN Flood 攻击的关系
- 如何应对 SYN Flood 攻击？
- 介绍一下 TCP 报文头部的字段
- TCP 快速打开的原理(TFO)
- 说说TCP报文中时间戳的作用？
- TCP 的超时重传时间是如何计算的？
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认？
- 如何理解 TCP 的 keep-alive？

![](https://img-blog.csdnimg.cn/img_convert/55bb9fbc62e965a77f52f9cb7d74c714.webp?x-oss-process=image/format,png)



#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

P 的 keep-alive？

[外链图片转存中...(img-PCF1RGtf-1719244411901)]



#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

![](https://img-blog.csdnimg.cn/img_convert/d21d44890541dbdd4afa967a9c696599.webp?x-oss-process=image/format,png)