JavaScript 设计模式

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。

设计模式原则

S – Single Responsibility Principle 单一职责原则

1.一个程序只做好一件事
2.如果功能过于复杂就拆分开，每个部分保持独立

O – OpenClosed Principle 开放/封闭原则

1.对扩展开放，对修改封闭
2.增加需求时，扩展新代码，而非修改已有代码

L – Liskov Substitution Principle 里氏替换原则

1.子类能覆盖父类
2.父类能出现的地方子类就能出现

I – Interface Segregation Principle 接口隔离原则

1.保持接口的单一独立

D – Dependency Inversion Principle 依赖倒转原则

1.面向接口编程，依赖于抽象而不依赖于具体

设计模式

创建型

1.单例模式

一个类只有一个实例，并提供一个访问它的全局访问点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class LoginForm {
  constructor() {
    this.state = 'hide'
  }
  show() {
    console.log('show')
  }
  hide() {
    console.log('hide')
  }
}

LoginForm.getInstance = (function() {
  let instance
  return function() {
    if(!instance) {
      instance = new LoginForm()
    }
    return instance
  }
})()

let obj1 = LoginForm.getInstance()
let obj2 = LoginForm.getInstance()
console.log(obj1 === obj2)

优点
1.划分命名空间，减少全局变量
2.增强模块性，把自己的代码组织在一个全局变量名下，放在单一位置，便于维护
3.且只会实例化一次。简化了代码的调试和维护

缺点
单一访问点，有可能导致模块强耦合。

场景例子
vuex 和 redux 中的 store

参考

15 张图弄清楚 Vue2.0 Diff 算法

Http 协议简析

Http/0.9 是于 1991 年提出，用来网络之间传递 HTML 超文本的内容，所以被称为超文本传输协议

Http/0.9 完整的请求流程

1.Http 是基于 TCP 协议的，客户端要先根据 IP 地址、端口和服务器建立 TCP 连接，而建立连接的过程就是 TCP 协议协议三次握手的过程。
2.建立好连接后，会发送一个 GET 请求行的信息，如GET/index.html 来获取 index.html
3.服务器接受到请求后，读取对应的 HTML 文件，并将数据以 ASCII 字符流返回给客户端。
4.HTML 文档传输完成后，断开连接。

TCP 协议三次握手流程

所谓的三次握手(Three-way HandShake)，是指建立一个 TCP 连接时，需要客户端和服务器总共发3个包。
三次握手的目的是连接服务器指定端口，建立 TCP 连接，并同步连接双方的序列号和确认号，交换 TCP 窗口大小信息。

1.第一次握手(SYN=1，seq=x)
客户端发送一个 TCP 的 SYN 标志为 1 的包，指明客户端打算连接的服务器的端口，以及初始序号 X，保存在包头的序列号(Sequence Number)字段里

2.第二次握手(SYN=1, ACK=1, seq=y, ACKnum=x+1)

服务器发回确认包(ACK)应答。即 SYN 标志位和 ACK 标志位均为1。服务器端选择自己 ISN 序列号，放到 Seq 域里，同时将确认序号(Acknowledgement Number)设置为客户的 ISN 加1，即 X+1。

3.第三次握手(ACK=1，ACKnum=y+1)
客户端再次发送确认包(ACK)，SYN 标志位为0，ACK 标志位为1，并且把服务器发来 ACK 的序号字段+1，放在确定字段中发送给对方，并且在数据段放写ISN的+1。

当服务器端接收到第3次握手的包后，TCP握手结束。开始传输数据。

在 centos 服务器上运行 docker 容器

在本地打包好镜像后，并且导出 docker 容器。

在 centos 上安装 Docker

首先更新您的系统软件包并安装所需的依赖项

1
2

sudo yum update
sudo yum install yum-utils device-mapper-persistent-data lvm2

将 Docker 稳定存储库添加到系统

1

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

使用yum，安装最新版本的 Docker CE

1

sudo yum install docker-ce

安装 Docker 软件包后，启动 Docker 守护程序并使其在启动时自动启动

1
2
3
4
5
6
7

// 开启 dokcer
sudo systemctl start docker

sudo systemctl enable docker

// 重启 docker
sudo systemctl restart docker

验证 Docker 服务正在运行

1

sudo systemctl status docker

查看 docker 版本

1

docker -v

Docker 深入浅出

什么是 Docker

Docker 官网

在官网上下载安装成功后，使用 docker -v 可以查看 docker 版本

1
2
3

docker -v

Docker version 20.10.7, build f0df350

Docker 技术与传统虚拟化方式的区别
传统的虚拟机技术是一套完整的操作系统和应用进程。
Docker 容器内的应用进程则是直接运行于宿主内核，容器没有自己的内核和硬件虚拟。
Docker 在容器的基础上，进行了进一步的封装，从文件系统、网络互联到进程隔离等等，极大的简化了容器的创建和维护。

使用 Docker 优势

1.提供一致的运行环境。
2.轻松的项目迁移。
3.快速部署与回滚。

Vue2.0 Options API 与 Vue3.0 Composition API 区别

Vue2.0 Options API

Options API, 即大家常说的选项 API。常用的有 data、methods、computed、watch 等属性和方法，共同处理页面逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

export default {
  data() {
    return {
      属性A,
      属性B
    }
  },

  methods: {
    ...
  },

  computed: {
    ...
  },

  watch: {
    ...
  }
}

当组件变的复杂的时候，对应的属性列表也会增长，以至于最终难以维护。且对 typeScript 的支持有限。

浏览器事件循环机制

JS 是单线程的，非阻塞的。
虽然 JS 运行在浏览器中是单线程的，但是浏览器是事件驱动的(Event Driven), 浏览器中很多行为是异步的 (Asynchronized), 会创建事件并放入执行队列。
浏览器中很多异步行为都是由浏览器中的线程去完成，主要由以下 3 个线程去执行：

1.JS 引擎线程
2.GUI 渲染线程
3.事件触发线程

JS 非阻塞的主要通过 Event Loop 来实现。

浏览器的事件循环

浏览器中的事件循环 Event Loop，分为同步执行栈和异步队列，首先会执行同步的任务，当同步任务执行完之后会从异步队列中取异步任务拿到同步执行栈中进行执行。

执行栈和事件队列

JavaScript 引擎线程专门处理 JavaScript 脚本，JS 引擎主要由 2 个组件构成

1.堆(Memory Heap) - 内存分配发生的地方
2.栈(Call Stack) - 函数调用时会形成一个个栈帧(frame)

可以使用Loupe 工具来了解 JavaScript 的调用堆栈、事件循环、回调队列如何执行的。

执行栈

每个函数执行的时候都会生成新的 execution context(执行上下文)，执行上下文会包含一些当前函数的参数、局部变量，它会被推入栈中，running execution context(正在执行的上下文)始终处于栈的顶部。当函数执行完后，它的上下文会从栈弹出。

事件队列 FIFO队列

先执行同步代码，遇到异步代码的执行，不会等待异步事件结果返回，而是将事件挂起，继续执行执行栈中的其他任务。
当异步事件返回结果，将它放到事件队列中，等待执行栈中的任务全部执行完成，然后主线程空闲状态，主线程会去查找事件队列中的任务，取第一个事件，然后把事件回调放到执行栈中，然后执行同步代码。

同步代码属于宏任务会开始执行一次，不同的异步任务又被分为宏任务和微任务。

浏览器进程与线程详解

进程与线程

进程

进程是 CPU 资源分配的最小单位。
多进程：多进程是指同一个时间里，同一个计算机系统允许多个进程处于运行状态。多进程可以在编代码的时候，同时听歌，且进程之间不会相互干扰。

线程

1.一个进程由一个或者多个线程组成，线程是一个进程中代码的不同执行路线。
2.进程相互独立，同一个进程下的各个线程共享程序的内存空间，包括代码段、数据集、堆等。

浏览器中的进程与线程

浏览器是多进程的

1.Browser 进程: 浏览器的主进程(负责协调、主控)
2.第三方插件进程: 每种类型的插件对应一个进程，仅当适用该插件时才创建。
3.GPU进程: 最多一个，用于 3D 绘制
4.浏览器渲染进程(内核): 默认每个 Tab 标签页面就是一个进程，互不影响，控制页面的渲染，脚本执行，事件处理等。

浏览器会优化:多个空白的 tab 标签会合并成一个进程。