# 数据可视化

数据可视化的主要任务是将数据转换为易于感知的图形。

## 一、可视化流程

很多人认为数据可视化无非就是数据几组数据，生成各自图表（或图形）等等。其实数据可视化大致可分为：

1. 信息可视化
2. 科学可视化
3. 可视化分析

之前所提到的简单图表只是信息可视化中最常见的几种。面对不同的数据体积以及不同的可视化目标，可视化系统的复杂度很可能就会超出想象。

### 通用的可视化流程

可视化整体可分为三步：分析 -》 处理 -》 生成。

### 1. 分析

分析分为三部分：任务、数据和领域。

首先，要分析该次可视化的出发点和目标是什么。遇到什么问题、展示什么信息、要得出什么结论、验证什么假说等等。数据承载的信息是多种多样的，不同的展示方式的侧重点也是不一样的（说白了，想清楚要干什么，才能确定要过滤什么数据、怎样处理数据最后怎样展示数据）。

其次，分析数据（见**数据模型**）。

最后要针对不同的领域，进行响应的分析。可视化的侧重点要跟随领域做出相应变化。

### 2. 处理

处理可分为两部分：对数据的处理、对视觉编码的处理。

在可视化之前，要对数据进行数据清洗、数据规范、数据分析等数据处理。
所谓视觉编码即指如何使用位置、尺寸、灰度值、纹理、色彩、方向、形状等视觉通道，以映射要展示的数据维度。

### 3. 生成

将之前的分析和设计实现。

## 二、数据模型

数据说白了就是可定性或可量化的一组数据。为了更准确更形象地表达数据，先了解一些数据相关的概念。

### 1. 数据模型与概念模型

数据为什么可以代表世界？带着这个问题，来了解数据和概念两个模型。

**数据模型** 是一组数字或符号的组合，其包含着数据的定义、类型等，可以进行各类数学操作。
**概念模型** 描述的是事物的语义或状态行为等。

现实世界 =》 概念模型 =》 数据模型

现实世界可以用概念模型描述，而概念模型又可以用数据模型来描述。经过两层抽象，数据便可以描述现实世界。

### 2. 数据类型

一个东西属于哪一类，取决于用什么标准划分，数据亦然。

按数据在计算机中的存储，数据可分为浮点数、整数、字符等；从关系模型的角度来说，数据可以分为实体和关系两类；从数据结构来说，数据可以分为一维、二维、三维、多维、时间序列、空间序列、树型、图型等等。接下来说一说和数据可视化有关的分类方法。

按照测量标度来分，数据一般分为四类：类别型、有序型、区间型和比值型。

- 类别型：用于区分事物。如：人可分为男女。
- 有序型：用于表示对象间的顺序关系。如：人的身高可以从矮到高。
- 区间型：用于对象间的定量比较。如：身高 160cm 和身高 158cm。
- 比值型：用于数值间的比例关系。如：6 是 3 的 2 倍。

在数据可视化中，通常不区分区间型和比值型，通一称为 **数值型** 。

### 3. 举个例子

| id  | 类型 | 款式 | 尺码 | 销量 | 年增长 |
| ---- | ---- | ---- | ---- | ---- | ---- |
|  1  | 男款 | 上衣 |  L   |  50  |  10%   |
|  2  | 女款 | 上衣 |  S   |  35  |   5%   |
|  3  | 女款 | 裤子 |  M   |  40  |  20%   |
|  4  | 男款 | 上衣 |  XL  |  30  |  15%   |

如表所示，不难看出：

- _id_ 和 _尺码_ 属于 _有序型_ 数据。
- _类型_ 和 _款式_ 数据 _类别型_ 数据。
- _销量_ 和 _年增长_ 属于 _数值型_ 数据。

## 三、视觉编码

### 1. 什么是视觉编码？

视觉编码描述的是将数据映射到最终可视化结果上的过程。

编码二字，编可以说是指设计、映射的过程，码是指一些图形符号。图形符号和信息间的映射关系可以使人迅速获取信息。可以说图形符号中携带了信息（称之为编码了一些信息）。而人从这些符号中读取信息时，可以称作时解码了一些信息。
人解码信息靠的是眼睛，人的视觉系统。如果说图形符号是编码信息的工具或通道，那么人的视觉系统便是解码信息的通道。通常把这种 **图形符号 《--》 信息 《--》 视觉系统** 的对应过程称为 **视觉通道**。

### 2. 常用的视觉通道

1967 年，Jacques Bertin 初版的《Semiology of Graphics》一书提出了图形符号与信息的对应关系，奠定了可视化编码的理论基础。该书中把图形符号分为两种：

- 位置变量：一般指二维坐标
- 视网膜变量：尺寸、数值、纹理、颜色、方向和形状

后来又补充了 **长度**、**面积**、**体积**、**透明度**、**模糊/聚焦** 和 **动画** 等视觉通道。

### 3. 视觉编码设计原则

首先说一下视觉通道的性质：

- 定性（又称分类）性质 ：适用于类别型数据。如颜色或形状。
- 定量（或定序）性质：适用于有序型和类别型数据。如长度、大小适合于编码数值/量的大小。
- 分组性质：具有相同视觉通道的数据可以分为一组，便于识别。

最后说一下视觉编码设计的两大原则：

- 表达性、一致性：可视化的结果应充分表达了数据要表达的信息，且无多余。
- 有效性、理解性：可视化之后应当比其他数据表达方案更加有效，更加容易让人理解。

数据可视化编码除了视觉通道还需考虑：

- 色彩搭配
- 交互
- 美学因素
- 信息密度
- 直观映射、隐喻

等等。

## 参考文献

- [[1] 浙江大学-陈为、巫英才数据可视化课程](http://www.cad.zju.edu.cn/home/vagblog/?page_id=1302)
- [[2] 陈为 沈则潜 陶煜波. 数据可视化[M]. 电子工业出版社, 2013.](https://book.douban.com/subject/25760272/)
- [[3] CSE512 Data Visualization (Spring 2016)](https://courses.cs.washington.edu/courses/cse512/16sp/)


数据可视化的主要任务是将数据转换为易于感知的图形。

数据可视化

## 安装 Docker


在 [Docker](https://www.docker.com/get-started) 网站下载安装 Docker 。 安装完成后，打开命令行输入 `docker version`，如果有相关输出即安装成功。

## 运行 container


docker 中与 `container` 相关的命令主要有：

*   `docker container run ...`：运行容器
*   `docker container ls`: 列出当前运行容器
*   `docker container start [container_id | container_name]`: 开始运行指定 id（或名称） 的容器
*   `docker container stop [container_id | container_name]`: 停止运行指定 id（或名称） 的容器
*   `docker container rm [container_id| container_name]`: 删除指定 id（或名称） 的容器

其中，也可以使用 `docker ps` 查看正在运行的容器。

### 运行 nginx

打开命令行，键入：

    docker container run -it -p 8080:81 nginx
    

如果报错无法拉取，执行 `docker login` 输入账号密码登录 docker hub 账号后再执行。 在浏览器访问网站：`http://localhost:8080`，如果可以访问到 nginx 相关即表示运行成功。

`-p 8080:81` 指定镜像在容器内运行的端口为：`81`，同时将端口映射到本地机器的 `8080` 端口，所以需要在浏览器访问 `http://localhost:8080` 才可。

### 运行 mysql

不同与 nginx ，运行 mysql 时可能需要设置一些变量，比如数据库密码之类的，这就需要用到 `--env` 参数。

    docker container run -d -p 3006:3036 --env MYSQL_ROOT_PASSWORD=123456 mysql
    

## 进入 container


使用 `docker container -it exec [container_id | container_name]` 可以运行指定的容器内的程序

首先，运行一个名为 `mynginx` 的容器：

    docker container run -d -p 8080:80 --name mynginx nginx
    

然后，调用 `mynginx` 的 `bash` 程序：

    docker container exec -it mynginx bash
    

如此，便可以在 container 内部操作环境执行命令，就像是进入了这个 container 操作环境内一样。

### 绑定挂载点


在上一步中，可以知道 container mynginx 的文件路径为：`/usr/share/nginx/html`。如果想要修改这些文件，就需要进入 container 内部进行修改，这样便会很麻烦。docker 提供了绑定挂载点的功能，这样便可以把本地机器的文件映射到 container 内部。

    docker container run -d -p 8080:81 -v ~/test:/usr/share/nginx/html --nmae mynginx nginx
    

在本地机器的 test 文件夹，新建一个 index.html 文件，然后浏览器访问 `http://localhost:8080`，便可以看到刚刚保存的内容。

### 制作镜像


`docker container run` 的过程是首先拉取镜像，然后运行这个镜像。如此便可以制作自己的镜像。例如：

首先新建一个文件夹，然后新建一个 `index.html` 文件并写入内容，然后再编写 `Dockerfile` 文件。

    FROM nginx:latest
    
    WORKDIR /usr/share/nginx/html
    
    COPY . .
    

然后运行 `docker image build . -t mynginx-web`（`.` 是指当前路径），便完成了镜像制作。

运行这个镜像只需要：`docker container run -it -p 8080:80 mynginx-web`。

Docker 使用笔记（一）

<p>一般情况下，个人购买的服务器可用的内存、CPU 等资源十分有限。比如，今天在服务器上安装了 elasticsearch ，没有注意它的内存占用情况，导致整个服务器内存爆了（服务器配置较低），重启了一次。</p>
<p>较新版本的 <code>docker</code> ，可以使用 <code>docker stats</code> 查看容器具体资源占用。</p>
<pre><code class="lang-bash">CONTAINER ID        NAME                CPU %               MEM USAGE / LIMIT     MEM %               NET I/O            BLOCK I/O           PIDS
1c5d2e9f1gjd        mysql               0.04%               243.3MiB / 1.795GiB   13.24%              2.08MB / 10.2MB    6.6GB / 112MB       38
</code></pre>
<p>旧版本 <code>docker</code> 可能必须使用 <code>docker stats [container id]</code>，可以使用一条命令查看所有容器资源占用。</p>
<pre><code class="lang-bash">$ docker ps -q | xargs  docker stats --no-stream

CONTAINER ID        NAME                CPU %               MEM USAGE / LIMIT     MEM %               NET I/O             BLOCK I/O           PIDS
fa8c2b0f2f7c        mysql               0.04%               243.3MiB / 1.795GiB   13.24%              2.08MB / 10.2MB     6.6GB / 112MB       38
</code></pre>

本文介绍如何查看 docker 容器的资源占用情况。

Docker 查看容器内存和 CPU 占用情况


## 1 注释（#）

行首以 `#` 开头（除 `#!` 之外）的是注释。`#!` 用于指定当前脚本的解释器。

```shell
#!/bin/bash

echo 'The # here is not comment'
echo The \# here is not comment  # 注意转义字符
echo The # here is not comment
```

## 2 分号（;）

### 2.1 命令分隔符

使用分号（;）可以在同一行写多个命令。

```shell
#!/bin/bash

echo 'Now start...';
filename=semi.sh
if [ -e "$filename" ]; then
  echo "File $filename exists."; cp $filename $filename.bak # cp 复制命令
else
  echo "File $filename not found"; touch $filename          # touch 创建文件
fi;
  echo "End"
```

### 2.2 终止 `case` 选项

使用双分号（;;）可以终止 `case` 选项（类似于其他语言中的 `break`）。

```shell
#!/bin/bash

char=b

case "$char" in
  [a-z]) echo "letter";;
  [0-9]) echo "number";;
esac
```

## 3 点号（.）

等价于 `source` 命令（bash 中的 `source` 命令用于在当前 `bash` 环境下读取并执行 指定的 sh 文件）。

```shell
$ source hello.sh
hi
$ . hello.sh
hi
```

## 4 引号

### 4.1 双引号（"）

由双引号括起来的字符，除$（美元符号）、\（反斜杠）、’（单引号）、和”（双引号）这几个字符仍是特殊字符并保留其特殊功能外，其余字符仍作为普通字符对待。

### 4.2 单引号（'）

由单引号括起来的字符都作为普通字符出现。特殊字符用单引号括起来以后，也会失去原有意义，而只作为普通字符解释。

### 4.3 区别

举个例子：

```shell
name=difference

echo '$name' # name
echo "$name" # difference
```

同样是 `$name`，单引号则认为是字符串，而双引号则认为是一个变量。

## 5 斜线和反斜线

### 5.1 斜线（/）

文件名路径分隔符。分隔文件名不同的部分（如`/home/repo`）。也可以用来作为除法算术操作符。在 linux 中表示路径的时候，许多个/跟一个/是一样的。`/home/repo` 等同于 `////home///repo`

### 5.2 反斜线（\）

转义字符。

## 6 反引号

反引号（\`）中的命令会优先执行（推荐使用`$()`代替`\``）。

```shell
cp `mkdir temp` hello.sh temp  # 先创建 temp 文件夹，再将 hello.sh 复制到 temp 文件夹
cp $(mkdir temp) hello.sh temp
```

## 7 冒号（:）

### 7.1 空命令

等价于 “NOP”（`no op`，该命令什么也不做）。`:` 命令是 bash 内建命令，退出码是 `0`。

```shell
#!/bin/bash

num=5

if [ $num -gt 2 ] # gt 表示 greater than（大于）
  then :          # 什么都不做，退出分支
else
  echo "$num"
fi
```

### 7.2 其他功能

与 `>` 重定向操作符结合使用时，可以清空一个文件，但是不会修改这个文件的权限。如果这个文件之前不存在，则先创建这个文件。

```shell
: > null.sh
```

## 8 问号（?）

在双括号中就是三元操作符。

```shell
#!/bin/bash

((t=8<10?15:5))
echo $t
```

## 9 美元符号（$）

变量替换。

```shell
#!/bin/bash

a=10
echo $a
```


bash 脚本编程系列之：bash 中的特殊字符（上）。

bash 中的特殊字符（上）


## 1 算数运算符

| 运算符 |  说明  |
| :----: | :----: |
|   +    |  加法  |
|   -    |  减法  |
|   \*   |  乘法  |
|   /    |  除法  |
|   ==   |  相等  |
|   !=   | 不相等 |

```shell
#!/bin/bash
a=10
b=20

echo "a + b = `expr $a + $b`"
echo "a - b = `expr $a - $b`"
echo "a * b = `expr $a \* $b`"
echo "a / b = `expr $a / $b`"
echo "a % b = `expr $a % $b`"

if [ $a == $b ]; then
  echo "a == b"
else
  echo "a != b"
fi
```

输出：

```shell
a + b = 30
a - b = -10
a * b = 200
a / b = 0
a % b = 10
a != b
```

> - 原生 bash 不支持简单的数学运算，但是可以通过其他命令来实现，例如 `awk` 和 `expr`。`expr` 最常用。
> - `expr` 是一款表达式计算工具，使用它能完成表达式的求值操作。
> - 表达式和运算符之间要有空格 `$a + $b` 写成 `$a+$b` 不行
> - 条件表达式要放在方括号之间，并且要有空格 `[ $a == $b ]` 写成 `[$a==$b]` 不行
> - 乘号（\*）前边必须加反斜杠（\)才能实现乘法运算

## 2 关系运算符

关系运算符只支持数字，不支持字符串，除非字符串的值是数字。

| 运算符 |         说明         |
| :----: | :------------------: |
| `-eq`  |     两数是否相等     |
| `-ne`  |    两数是否不相等    |
| `-gt`  |   左数是否大于右数   |
| `-lt`  |   左数是否小于右数   |
| `-ge`  | 左数是否大于等于右数 |
| `-le`  | 左数是否小于等于右数 |

```shell
#!/bin/bash

a=10
b=20

if [ $a -eq $b ]; then
  echo "a == b"
else
  echo "a != b"
fi
```

## 3 逻辑运算符

| 运算符 |  　说明｜  |
| :----: | :--------: |
|   &&   | 逻辑的 AND |
|  \|\|  | 逻辑的 OR  |

```shell
#!/bin/bash
a=10
b=20

if [[ $a -gt 5 && $b -le 20 ]]; then
  echo "a > 5 and b <= 20"
else :
fi
```

## 4 字符串运算符

| 运算符 |       　说明｜       |
| :----: | :------------------: |
|   =    |  两个字符串是否相等  |
|   !=   | 两个字符串是否不相等 |
|   -z   |  字符串长度是否为 0  |
|   -N   | 字符串长度是否不为 0 |
|  str   |   字符串是否不为空   |

```shell
#!/bin/bash
a="abc"
b="edf"
c=""

if [ $a = $b ]; then
  echo "$a = $b : a == b"
fi

if [ -n $a ]; then
  echo "-n $a: The string $a's length is not 0"
fi

if [ !$c ]; then
  echo "$c: The string $c is empty"
fi
```

## 5 文件操作符

|   运算符    |                   　说明｜                   |
| :---------: | :------------------------------------------: |
|    `-e`     |                   文件存在                   |
|    `-f`     | 表示文件是个一般文件，不是目录也不是设备文件 |
|    `-s`     |                文件大小不为 0                |
|    `-d`     |                表示是一个目录                |
|    `-b`     |       表示是一个块设备（软盘，光驱等）       |
|    `-c`     |      表示是一个字符设备（键盘，声卡等）      |
|    `-p`     |                表示是一个管道                |
|    `-h`     |                表示是符号链接                |
|    `-L`     |                表示是符号链接                |
|    `-S`     |              表示是一个 socket               |
|    `-r`     |                 文件是否可读                 |
|    `-w`     |                 文件是否可写                 |
|    `-x`     |                文件是否可执行                |
|    `-N`     |      从文件上一次读取到现在，是否有改动      |
| `f1 -nt f2` |            文件 f1 比 文件 f2 新             |
| `f1 -ot f2` |            文件 f1 比 文件 f2 旧             |
| `f1 -ef f2` |  文件 f1 和 文件 f2 是否是相同文件的硬链接   |


bash 脚本编程系列之：基本运算符。

bash 中的基本运算符

<p style="text-align:center;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false"><strong><span style="font-size:24px">深切哀悼为抗击新冠肺炎斗争牺牲烈士和逝世同胞</span></strong></p>

深切哀悼为抗击新冠肺炎斗争牺牲烈士和逝世同胞。

逝者安息，生者奋发

假设场景：

在某个项目下，我新建了一个本地分支 `test`，并在该分支做出了一些改动，但是我在没有 `push` 该分支代码到远程仓库之前手滑删除了该分支，那么如何在本地恢复这个分支？该场景的相关操作如下：

```shell
git branch test
git checkout test

# 做了一些改动

git status
git add .
git commit -m "some info"

git chekout - # 切到上一个分支
git branch -D test # 手滑删了 test
```

经过以上操作，本地更改的代码是没有了的。但是 `git` 中有日志（因为 git commit 到本地了），通过 `git log -g` 查看 `commit` 的记录 `hash` 值，然后执行 `git branch test hash` 即可恢复。

总结一下：

```shell
git log -g # 查找本地提交记录 hash
git branch new_branch_name hash # 新建分支
```



本文介绍 Git 如何恢复被误删的本地分支。

Git 恢复被误删的本地分支

链表存储有序的元素集合，但不同于数组，链表中的元素在内存中不是连续放置的。每个元素由一个存储元素本身的节点和指向下一个元素的 引用 组成。

```shell
------------------------------------------------------------------------
|                                                                      |
|                node                      node               null     |
|           ---------------          ---------------        --------   |
|  head ->  + item | next +    ->    + item | next +   ->   + null +   |
|           ---------------          ---------------        --------   |
|                                                                      |
------------------------------------------------------------------------
```

```js
class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class LinkList {
  constructor() {
    this.head = null;
    this.length = 0;
  }

  /**
   * 添加节点
   * @param {*} value
   */
  append(value) {
    return this.insert(value, this.length);
  }

  /**
   * 添加节点到指定位置
   * @param {*} value
   * @param {*} position
   */
  insert(value, position) {
    if (position < 0 || position > this.length) {
      return false;
    }

    let node = new Node(value);

    if (position === 0) {
      node.next = this.head;
      this.head = node;
    } else {
      let prev = null;
      let current = this.head;
      let i = 0;

      while (i++ < position) {
        prev = current;
        current = current.next;
      }

      prev.next = node;
      node.next = current;
    }

    this.length++;
    return true;
  }

  /**
   * 移出指定位置的节点
   * @param {*} position
   */
  removeAt(position) {
    if (position < 0 || position > this.length) {
      return false;
    }

    if (position === 0) {
      this.head = this.head.next;
    } else {
      let prev = null;
      let current = this.head;
      let i = 0;

      while (i++ < position) {
        prev = current;
        current = current.next;
      }

      prev.next = current.next;
    }

    this.length--;
    return true;
  }

  /**
   * 查找给定值所在索引
   * @param {*} value
   */
  indexOf(value) {
    let current = this.head;
    let index = -1;

    while (current) {
      indeex++;
      if (current.value === value) {
        return index;
      } else {
        current = current.next;
      }
    }

    return -1;
  }

  reverse() {
    let prev = null;
    let current = this.head;
    let next = null;

    while (current) {
      next = current.next;
      current.next = prev;
      prev = current;
      current = next;
    }

    this.head = prev;
  }

  traverseFromTailToHead() {
    let stack = [];
    let current = this.head;

    while (current) {
      stack.push(current);
      current = current.next;
    }

    while (stack.length) {
      stack.pop();
    }
  }

  getKthNodeFromTailToHead(k) {
    let p1 = this.head;
    let p2 = this.head;
    let i = 0;

    while (i++ < k) {
      p1 = p1.next;
    }

    while (p1) {
      p1 = p1.next;
      p2 = p2.next;
    }

    return p2;
  }
}
```

## 题目

### 1. 输出单链表倒数第 k 个节点


#### 问题描述

题目：输入一个单链表，输出此链表中的倒数第 K 个节点。（去除头结点，节点计数从 1 开始）。

#### 解题思路

倒数第 k 个节点即为整数第 n - k  个节点（n 为链表长度）

- 定义 2 个指针同时执行链表头节点
- 第 1 个指针前进 k 个 节点
- 两个指针同时前进，当第 1 个指针到达链表尾时，第 2 个指针与第一个指针相距 k 个节点，第二个指指向节点即为所求


```js
function findKthTail(linkList, k) {
  let p1 = linkList.head;
  let p2 = linkList.head;
  let i = 0;

  while (i++ < k) {
    p1 = p1.next;
  }

  while (p1) {
    p1 = p1.next;
    p2 = p2.next;
  }

  return p2; 
}
```


### 2. 判断链表是否有环


#### 问题描述

单链表中的环是指链表末尾的节点的 next 指针不为 NULL ，而是指向了链表中的某个节点，导致链表中出现了环形结构。

```shell
0 -> 1 -> 2 -> 3 -> 4
               |    |
               6 <- 5
```

链表中尾节点 `6` 指向了 节点 `3` 而非 `null`，导致出现了环形结构。 


#### 解题思路

- 定义 2 个快慢指针，初始均指向头节点
- 第 1 个指针前进 1 步，第 2 个指针前进 2 步
- 若是无环，2 个指针最后均指向 `null`，但若是有环，2 指针必定在一个节点处相遇，该节点不为 `null`


```js
/**
 * 判断链表是否存在环
 * @param {*} linkList
 */
function isExistLoop(linkList) {
  let p1 = linkList.head;
  let p2 = linkList.head;

  while (p1 && p2.next) {
    p1 = p1.next;
    p2 = p2.next.next;

    if (p1 === p2) {
      return true;
    }
  }

  return false;
}
```

#### 问题描述

定位环的起点。


#### 解题思路

定义2个快慢指针，第一次先找到 2 个指针在环中的相遇点，然后令 p1 指向 相遇点，p2 指向头节点，同时出发（每次走过的节点相同），当 2 指针指向的节点相同时，p1 即为环的起点。

```js
function getMeetingNode(linkList) {
  let p1 = linkList.head;
  let p2 = linkList.head;

  while (p1 && p2.next) {
    p1 = p1.next;
    p2 = p2.next.next;

    if (p1 == p2) {
      return p1;
    }
  }

  return null;
}

function getEntryOfLoop(linkList) {
  let meetingNode = linkList.getMeetingNode();

  if (!meetingNode) {
    return null;
  }

  let p1 = meetingNode;
  let p2 = linkList.head;

  while (p1 != p2) {
    p1 = p1.next;
    p2 = p2.next;
  }

  return p1;
}
```

链表存储有序的元素集合，但不同于数组，链表中的元素在内存中不是连续放置的。每个元素由一个存储元素本身的节点和指向下一个元素的 引用 组成。

JavaScript 数据结构：链表

字节跳动面试题目：利用已知函数 `add` 实现 `asyncSum`。

```
function add (a, b, callback) {
  callback(a + b)
}

async function asyncSum(...args) {
  // 具体实现
}

// await asyncSum(1, 2, 3, 4, 5) 的结果应当为 1 + 2 + 3 + 4+ 5 = 15
```

解题思路：

1. 实现任意参数的求和函数 sum
2. 求和函数依赖了异步的 add 函数，add 函数一次只能计算两数之和，所以任意参数要分组，每组两个参数调用 add 函数
3. 重复第 2 步，直到 可分组参数数量为 1

```
[1, 2, 3, 4, 5] // 传参
[[1, 2], [3, 4], [5, 0]] // 分组
[3, 7, 5] // 各组求和
[[3, 7], [5, 0]] // 继续分组
[10, 5] // 继续各组求和
[[10, 5]] // 继续分组
[15] // 求和
```

首先，实现分组函数，将参数分成 2 个一组。

```
function chunk(arr) {
  let ret = []

  for (let i = 0; i < arr.length; i += 2) {
    ret.push([arr[i], arr[i + 1] ? arr[i + 1] : 0])
  }

  return ret
}

chunk([1, 2, 3, 4, 5]) // [[1, 2], [3, 4], [5, 0]]
```

然后，实现 sum 函数对分组的数字依次求和。由于需要强依赖 `add` 函数，首先将 `add` 函数 `promisify`。

```
function add (a, b, callback) {
  callback(a + b)
}

function asyncAdd(a, b) {
  return new Promise(resolve => add(a, b, sum => resolve(sum)))
}
```

实现 `sum` 函数。

```
function sum(nums) {
  return Promise.all(chunk(nums).map(([a, b]) => asyncAdd(a, b)))
}

// await sum([1, 2, 3, 4, 5]) 结果 [3, 7, 5]
```

至此，可以看出数字长度在缩减，所以只需要继续拆分数组调用 `sum` 函数直到数字长度为 1 即为最终求和。

```
async function asyncSum(...args) {
  let ret = await sum(args)

  while (ret.length > 1) {
    ret = await sum(ret)
  }

  return ret[0]
}
```

完整实现。

```
function chunk(arr) {
  let ret = []

  for (let i = 0; i < arr.length; i += 2) {
    ret.push([arr[i], arr[i + 1] ? arr[i + 1] : 0])
  }

  return ret
}

function add (a, b, callback) {
  callback(a + b)
}

function asyncAdd(a, b) {
  return new Promise(resolve => add(a, b, sum => resolve(sum)))
}

function sum(nums) {
  return Promise.all(chunk(nums).map(([a, b]) => asyncAdd(a, b)))
}

async function asyncSum(...args) {
  let ret = await sum(args)

  while (ret.length > 1) {
    ret = await sum(ret)
  }

  return ret[0]
}
```

利用已知函数 add 实现 asyncSum。

实现 asyncSum


## 1. 变量定义

### 1.1 概念

变量的名字就是变量保存值的地方。引用变量的值就叫做变量替换。例如，`var` 是一个变量的名字，那么 `$var` 就是引用这个变量的值（注意：`$var` 是 `${var}` 的简写形式，在某些上下文中，可能无法使用简写）。

### 1.2 定义变量

定义变量时，变量名前不加 `$` 符号，如：`var=10`。

注意：

- 首字符必须为字母（a-z，A-Z）
- 中间不可以有空格，可以使用下划线（\_）
- 不能使用标点符号
- 不能使用 `bash` 中的关键字

## 2 使用变量

变量名前加 `$` 即可。

```shell
#!/bin/bash

a=10

echo $a
```

## 3 只读变量

使用 `readonly` 可以将变量定义为*只读*。

```shell
#!/bin/bash

a=10
readonly a
a=11 # bash: a: 只读变量
```

## 4 特殊变量

### 4.1 局部变量

这种变量只有在代码块或者函数中才可见。

### 4.2 环境变量

这种变量将影响用户接口和 shell 的行为。

在通常情况下，每个进程都有自己的“环境”，这个环境是由一组变量组成的，这些变量中存有进程可能需要引用的信息。在这种情况下，shell 与一个一般的进程没什么区别。

### 4.3 位置参数

从命令行传入到脚本的参数：$0, $1, $2...
$0 就是脚本文件自身的名字，$1 是第一个参数，$2 是第二个参数，$3 是第三个参数，然后是第四个。$9 之后的位置参数就必须用大括号括起来了，比如，${10}，${11}，${12}。

- $# ： 传递到脚本的参数个数
- $\* ： 以一个单字符串显示所有向脚本传递的参数。与位置变量不同,此选项参数可超过 9 个
- $$ ： 脚本运行的当前进程 ID 号
- $! ： 后台运行的最后一个进程的进程 ID 号
- $@ ： 与$#相同,但是使用时加引号,并在引号中返回每个参数
- $： 显示 shell 使用的当前选项,与 set 命令功能相同
- $? ： 显示最后命令的退出状态。 0 表示没有错误,其他任何值表明有错误。

```shell
#!/bin/bash

echo
echo "The name of the script is ${0}"

echo
if [ -n "$1" ]; then
  echo "Parameter #1 is $1"
fi

if [ -n "${10}" ]; then # 大于 $9 就必须用 {} 括起来
  echo "Parameter #10 is $10"
fi

echo "---------------------------"
echo "All the parameters are $*"

exit 0
```

将上面的代码保存为 `getParam.sh` ，使用命令 `bash getParam.sh 1 2 3 4 5 6 7 8 9 10` 运行，输出为：

```shell
The name of the script is getParam.sh

Parameter #1 is 1
Parameter #10 is 10
---------------------------
All the parameters are 1 2 3 4 5 6 7 8 9 10
```


bash 脚本编程系列之：变量和参数。

bash 中的变量和参数


## 二叉搜索树

二叉树中的节点最多只能有 2 个子节点：左侧子节点 和 右侧子节点。 二叉搜索树是二叉树的一种，但是它只允许在左侧子节点存储比父节点小的值，在右侧子节点存储大于等于父节点的值。


```js
class Node {
  constructor(value) {
    this.left = null;
    this.value = value;
    this.right = null;
  }
}

class BinarySearchTree {
  constructor() {
    this.root = null;
  }

  /**
   * 插入节点
   * @param {} value
   */
  insert(value) {
    const newNode = new Node(value);

    if (!this.root) {
      this.root = newNode;
    } else {
      let root = this.root;
      insertNode(root, newNode);

      function insertNode(node, newNode) {
        if (node.value < newNode.value) {
          if (node.right === null) {
            node.right = newNode;
          } else {
            insertNode(node.right, newNode);
          }
        } else {
          if (node.left === null) {
            node.left = newNode;
          } else {
            insertNode(node.left, newNode);
          }
        }
      }
    }

    return true;
  }

  /**
   * 按值查找节点
   * @param {*} value
   */
  search(value) {
    const _search = (node, value) => {
      if (node === null) {
        return false;
      }

      if (node.value > value) {
        return _search(node.left, value);
      } else if (node.value < value) {
        return _search(node.right, value);
      } else {
        return node;
      }
    };

    return _search(this.root, value);
  }
}
```

## 先序遍历

先序遍历的顺序是：**根 -> 左 -> 右**。

### 递归版

```js
function preTraverse(bsTree) {
  const traverse = (node, queue) => {
    if (!node) {
      return queue;
    } else {
      queue.push(node);
      traverse(node.left, queue);
      traverse(node.right, queue);
    }
  };
  const queue = [];
  traverse(bsTree.root, queue);
  return queue;
}
```

### 循环版


```js
function preTraverse(bsTree) {
  let stack = [];
  let queue = [];
  let node = bsTree.root;

  stack.push(node);

  while (stack.length > 0) {
    let currentNode = stack.pop();
    queue.push(currentNode);

    if (currentNode.right) {
      stack.push(currentNode.right);
    }

    if (currentNode.left) {
      stack.push(currentNode.left);
    }

  }

  return queue;
}
```


## 中序遍历

中序遍历的顺序是：**左 -> 根 -> 右**。

### 递归版

```js
function inorderTraverse(bsTree) {
  const traverse = (node, queue) => {
    if (!node) {
      return;
    }
    traverse(node.left, queue);
    queue.push(node);
    traverse(node.right, queue);
  };
  const queue = [];
  traverse(bsTree.root, queue);
  return queue;
}
```

### 循环版


```js
function inorderTraverse(bsTree) {
  const stack = [];
  const queue = [];
  let currentNode = bsTree.root;

  while (currentNode || stack.length > 0) {
    if (currentNode != null) {
      stack.push(currentNode);
      currentNode = currentNode.left;
    } else {
      currentNode = stack.pop();
      queue.push(currentNode);
      currentNode = currentNode.right;
    }
  }

  return queue;
}
```

循环版的思路：

1. 首先将所有左节点压入栈中
2. 将栈弹出到队列中
3. 当前节点回归到跟节点，依次入列右节点


```js
function inorderTraverse(bsTree) {
  const stack = [];
  const queue = [];
  let currentNode = bsTree.root;

  while (currentNode) {
    currentNode = currentNode.left;
    stack.push(currentNode);
  }

  while (stack.length) {
    queue.push(stack.pop());
  }

  currentNode = bsTree.root;

  while (currentNode) {
    queue.push(currentNode);
    currentNode = currentNode.right;
  }

  return queue;
}
```

## 后序遍历

后序遍历的顺序是：**左 -> 右 -> 根**。

### 递归版

```js
function postorderTraverse(bsTree) {
  const traverse = (node, queue) => {
    if (!node) {
      return;
    }

    traverse(node.left, queue);
    traverse(node.right, queue);
    queue.push(node);
  };
  const queue = [];
  traverse(bsTree.root, queue);
  return queue;
}
```

### 循环版

```js
function postorderTraverse(bsTree) {
  let stack = []
  let queue = []
  let node = bsTree.root
  stack.push(node)
  
  while (stack.length) {
    node = stack.pop()
    if (node.left) {
      stack.push(node.left)
    }
    if (node.right) {
      stack.push(node.right)
    }
    queue.unshift(node)
  }
  
  return queue
}
```

## 题目

### 1. 层级遍历

#### 问题描述

给定一个二叉树，返回其按层次遍历的节点值。 （即逐层地，从左到右访问所有节点）。

例如:

```shell
          11
       /      \
      7       15
     / \     /  \
    3   6   12  16
```
层级遍历结果: 

```js
[
  [11],
  [7, 15],
  [3, 6, 12, 16]
]
```

#### 解题思路

- 建立一个queue
- 先把根节点放进去，这时候找根节点的左右两个子节点
- 去掉根节点，此时queue里的元素就是下一层的所有节点
- 用for循环遍历，将结果存到一个一维向量里
- 遍历完之后再把这个一维向量存到二维向量里
- 以此类推，可以完成层序遍历

```js
function levelTraverse(bsTree) {
  let queue = []
  let ret = []
  let node = bsTree.root
  queue.push(node)
  
  while (queue.length) {
    const count = queue.length
    const subRet = []
    
    while (count > 0) {
      node = queue.pop()
      subRet.push(node)
      if (node.left) queue.push(node.left)
      if (node.right) queue.push(node.right)
    }
    
    ret.push(subRet)
  }
  
  return subRet
}
```


二叉树中的节点最多只能有 2 个子节点：左侧子节点 和 右侧子节点。 二叉搜索树是二叉树的一种，但是它只允许在左侧子节点存储比父节点小的值，在右侧子节点存储大于等于父节点的值。

JavaScript 数据结构：二叉搜索树 

## 冒泡排序

冒泡排序重复遍历数组，依次比较 2 个元素，如这 2 个元素顺序错误，就交换位置。

- 比较相邻的元素，若前者大于后者就交换
- 对每一对相邻的元素执行上一部动作
- 经过前 2 步，最大的元素已经到数组最后一项，对剩下的前 n - 1 项重复前 2 步即可

```js
function bubbleSort(arr) {
  let len = arr.length;

  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }

  return arr;
}
```

## 选择排序

选择排序时间复杂度 `O(n²)`。

- 在未排序数列中，找到最小元素，存放到起始位置
- 从剩余未排序数列中，找到最小元素，放到已排序数列末尾
- 重复第 2 步知道完成

```js
function selectSort(arr) {
  let len = arr.length
  let minIndex = 0
  
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (arr[j] < arr[minIndex]) {
        minIndex = j
      }
    }
    
    [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]]
  }
  
  return arr
}
```

## 插入排序

插入排序首先构建有序数列，然后在有序数列中从后向前插入未排序元素。

- 将第 1 个元素看作已排序数列，将其后元素看作未排序数列
- 遍历未排序数列，将元素插入到已排序数列中的合适位置

```js
function insertSort(arr) {
  let len = arr.length
  
  for (let i = 1; i < len; i++) {
    let j = i - 1;
    let tmp = arr[i]
    
    while (j >= 0 && arr[j] > tmp) {
      arr[j + 1] = arr[j]
      j--
    }
    
    arr[j + 1] = tmp
  }
  
  return arr
}
```

## 希尔排序

希尔排序是插入排序的更高效改进版。建立于插入排序的 2 点特性：

- 插入排序对几乎已经排列好的数列排序效率高
- 插入排序低效是因为 1 次只能移动 1 位


希尔排序的步骤。

- 选择一个增量序列，t1, t2, ..., tk，其中 ti > tj, tk = 1
- 按增量序列个数 k，对序列进行 k 趟排序
- 当增量因子为 1 时，整个序列进行 1 次排序

```js
function shellSort(arr) {
  let len = arr.length;
  let gap = 1;

  while (gap < len / 3) {
    gap = gap * 3 + 1;
  }

  for (; gap > 0; gap = Math.floor(gap / 3)) {
    for (let i = gap; i < len; i++) {
      let tmp = arr[i];
      let j = i - gap;

      while (j >= 0 && arr[j] > tmp) {
        arr[j + gap] = arr[j];
        j -= gap;
      }

      arr[j + gap] = tmp;
    }
  }

  return arr;
}
```

## 归并排序

归并排序是采用分治法的典型例子。

- 拆分数组为 2 部分
- 比较 2 部分数列
- 重复前 2 步

```js
function mergeSort(arr) {
  let len = arr.length
  
  if (len <= 1) {
    return arr
  }
  
  let middle = len >> 1
  let left = arr.slice(0, middle)
  let right = arr.slice(middle)
  
  const merge = (left, right) => {
    let ret = []
    
    while (left.length && right.length) {
      if (left[0] < right[0]) {
        ret.push(left.shift())
      } else {
        ret.push(right.shift())
      }
    }
    
    while (left.length) {
      ret.push(left.shift())
    }
    
    while (right.length) {
      ret.push(right.shift())
    }
    
    return ret
  }
  
  return merge(mergeSort(left), mergeSort(right))
}
```


## 快速排序

快速排序采用分治法将 1 个数列分成 2 个子数列进行处理。

- 从数列中挑出一个基准值
- 将把基准值小的值，放在前，大的放在后
- 递归地重新排列划分后的 2 个子数列

```js
function quickSort(arr, left, right) {
  if (arr.length <= 1) {
    return arr;
  }

  let pivotIndex = Math.floor(arr.length / 2);
  let pivot = arr.splice(pivotIndex, 1)[0];
  let left = [];
  let right = [];

  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }

  return quickSort(left).concat([pivot], quickSort(right));
}
```


JavaScript 排序算法


## 0. 什么是 vnode

相信大部分前端同学之前早已无数次听过或了解过 `vnode`（虚拟节点），那么什么是 `vnode`? `vnode` 应该是什么样的？
如果不使用前端框架，我们可能会写出这样的页面：

```html
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div></div>
    <script></script>
  </body>
</html>
```

不难发现，整个文档树的根节点只有一个 `html`，然后嵌套各种子标签，如果使用某种数据结构来表示这棵树，那么它可能是这样。

```javascript
{
  tagName: 'html',
  children: [
    {
      tagName: 'head',
      children: [
        {
          tagName: 'title'
        }
      ]
    },

    {
      tagName: 'body',
      children: [
        {
          tagName: 'div'
        },

        {
          tagName: 'script'
        }
      ]
    }
  ]
}
```

但是实际开发中，整个文档树中`head` 和 `script` 标签基本不会有太大的改动。频繁交互可能改动的应当是 `body` 里面的除 `script` 的部分，所以构建 虚拟节点树 应当是整个 HTML 文档树的一个子树，而这个子树应当保持和 HTML 文档树一致的数据结构。它可能是这样。

```html
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="root">
      <div class="header"></div>
      <div class="main"></div>
      <div class="footer"></div>
    </div>
    <script></script>
  </body>
</html>
```

这里应当构建的 虚拟节点树 应当是 `div#root` 这棵子树：

```javascript
{
  tagName: 'div',
  children: [
    {
      tagName: 'div',
    },
    {
      tagName: 'div',
    },
    {
      tagName: 'div',
    },
  ]
}
```

到这里，vnode 的概念应当很清晰了，vnode 是用来表示实际 dom 节点的一种数据结构，其结构大概长这样。

```javascript
{
  tagName: 'div',
  attrs: {
    class: 'header'
  },
  children: []
}
```

一般，我们可能会这样定义 `vnode`。

```javascript
// vnode.js
export const vnode = function vnode() {}
```

## 1. 从 JSX 到 vnode

使用 `React` 会经常写 `JSX`，那么如何将 `JSX` 表示成 `vnode`？这里可以借助 `@babel/plugin-transform-react-jsx` 这个插件来自定义转换函数，
只需要在 `.babelrc` 中配置：

```javascript
{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "window.h"
      }
    ]
  ]
}

```

然后在 `window` 对象上挂载一个 `h` 函数：

```javascript
// h.js
const flattern = arr => [].concat.apply([], arr)

window.h = function h(tagName, attrs, ...children) {
  const node = new vnode()
  node.tagName = tagName
  node.attrs = attrs || {}
  node.children = flattern(children)

  return node
}
```

测试一下：

![jsx->vnode](https://user-images.githubusercontent.com/26452939/49918605-beacf180-fede-11e8-80f7-541f02519a02.png)

## 2. 渲染 vnode

现在我们已经知道了如何构建 `vnode`，接下来就是将其渲染成真正的 dom 节点并挂载。

```javascript
// 将 vnode 创建为真正的 dom 节点
export function createElement(vnode) {
  if (typeof vnode !== 'object') {
    // 文本节点
    return document.createTextNode(vnode)
  }

  const el = document.createElement(vnode.tagName)
  setAttributes(el, vnode.attrs)
  vnode.children.map(createElement).forEach(el.appendChild.bind(el))
  return el
}

// render.js
export default function render(vnode, parent) {
  parent = typeof parent === 'string' ? document.querySelector(parent) : parent
  return parent.appendChild(createElement(vnode))
}
```

这里的逻辑主要为：

1. 根据 `vnode.tagName` 创建元素
2. 根据 `vnode.attrs` 设置元素的 `attributes`
3. 遍历 `vnode.children` 并将其创建为真正的元素，然后将真实子元素节点 append 到第 1 步创建的元素

## 3. diff vnode

第 2 步已经实现了 `vnode` 到 `dom` 节点的转换与挂载，那么接下来某一个时刻 `dom` 节点发生了变化，如何更新 `dom`树?显然不能无脑卸载整棵树，然后挂载新的树，最好的办法还是找出两棵树之间的差异，然后应用这些差异。

![diff-2-vnode](https://user-images.githubusercontent.com/26452939/49936056-d6e83500-ff0d-11e8-81ff-d1620acb31c4.png)

在写 `diff` 之前，首先要定义好，要 `diff`  什么，明确 `diff` 的返回值。比较上图两个 vnode，可以得出：

1. 更换第 _1、2、3_ 个 `li` 的内容
2. 在 `ul` 下创建两个 `li`，这两个 li 为 *第 4 个*和 *第 5 个*子节点

那么可能得返回值为：

```javascript
{
  "type": "UPDATE",
  "children": [
    {
      "type": "UPDATE",
      "children": [
        {
          "type": "REPLACE",
          "newVNode": 0
        }
      ],
      "attrs": []
    },
    {
      "type": "UPDATE",
      "children": [
        {
          "type": "REPLACE",
          "newVNode": 1
        }
      ],
      "attrs": []
    },
    {
      "type": "UPDATE",
      "children": [
        {
          "type": "REPLACE",
          "newVNode": 2
        }
      ],
      "attrs": []
    },
    {
      "type": "CREATE",
      "newVNode": {
        "tagName": "li",
        "attrs": {},
        "children": [
          3
        ]
      }
    },
    {
      "type": "CREATE",
      "newVNode": {
        "tagName": "li",
        "attrs": {},
        "children": [
          4
        ]
      }
    }
  ],
  "attrs": []
}
```

`diff` 的过程中，要保证节点的父节点正确，并要保证该节点在父节点 的子节点中的索引正确（保证节点内容正确，位置正确）。`diff` 的核心流程：

- case CREATE: 旧节点不存在，则应当新建新节点
- case REMOVE: 新节点不存在，则移出旧节点
- case REPLACE: 只比较新旧节点，不比较其子元素，新旧节点标签名或文本内容不一致，则应当替换旧节点
- case UPDATE: 到这里，新旧节点可能只剩下 attrs 和 子节点未进行 diff，所以直接循环 diffAttrs 和 diffChildren 即可

```javascript
/**
 * diff 新旧节点差异
 * @param {*} oldVNode
 * @param {*} newVNode
 */
export default function diff(oldVNode, newVNode) {
  if (isNull(oldVNode)) {
    return { type: CREATE, newVNode }
  }

  if (isNull(newVNode)) {
    return { type: REMOVE }
  }

  if (isDiffrentVNode(oldVNode, newVNode)) {
    return { type: REPLACE, newVNode }
  }

  if (newVNode.tagName) {
    return {
      type: UPDATE,
      children: diffVNodeChildren(oldVNode, newVNode),
      attrs: diffVNodeAttrs(oldVNode, newVNode)
    }
  }
}
```

## 4. patch 应用更新

知道了两棵树之前的差异，接下来如何应用这些更新？在文章开头部分我们提到 `dom` 节点树应当只有一个根节点，同时 `diff` 算法是保证了虚拟节点的位置和父节点是与 `dom` 树保持一致的，那么 patch 的入口也就很简单了，从 虚拟节点的挂载点开始递归应用更新即可。

```javascript
/**
 * 根据 diff 结果更新 dom 树
 * 这里为什么从 index = 0 开始？
 * 因为我们是使用树去表示整个 dom 树的，传入的 parent 即为 dom 挂载点
 * 从根节点的第一个节点开始应用更新，这是与整个dom树的结构保持一致的
 * @param {*} parent
 * @param {*} patches
 * @param {*} index
 */
export default function patch(parent, patches, index = 0) {
  if (!patches) {
    return
  }

  parent = typeof parent === 'string' ? document.querySelector(parent) : parent
  const el = parent.childNodes[index]

  /* eslint-disable indent */
  switch (patches.type) {
    case CREATE: {
      const { newVNode } = patches
      const newEl = createElement(newVNode)
      parent.appendChild(newEl)
      break
    }

    case REPLACE: {
      const { newVNode } = patches
      const newEl = createElement(newVNode)
      parent.replaceChild(newEl, el)
      break
    }

    case REMOVE: {
      parent.removeChild(el)
      break
    }

    case UPDATE: {
      const { attrs, children } = patches

      patchAttrs(el, attrs)

      for (let i = 0, len = children.length; i < len; i++) {
        patch(el, children[i], i)
      }

      break
    }
  }
}
```

## 总结

至此，`vdom` 的核心 `diff` 与 `patch` 都已基本实现。在测试 demo 中，不难发现 `diff` 其实已经很快了，但是 `patch` 速度会比较慢，所以这里留下了一个待优化的点就是 `patch`。

本文完整代码均在这个[仓库](https://github.com/fantasticit/vdom)。


相信大部分前端同学之前早已无数次听过或了解过 vnode（虚拟节点），那么什么是 vnode? vnode 应该是什么样的？

vdom 原理解析与简单实现

今天，从 MDN 上看到了 `SpeechSynthesis` 这个API。看了下它的介绍。
 网页语音 API 的 `SpeechSynthesis` 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。
卧槽，这一看不得了啊，这个接口可以调用设备接口读出文字，那这样岂不是就可以在web页面上实现朗读功能。来，试一下：

<script>
function speak() {
  let synth = window.speechSynthesis;
  let voices = synth.getVoices().filter(voice => voice.lang === 'zh-CN');
  if (voices.length == 0) return;
  let utterThis = new SpeechSynthesisUtterance(document.querySelector('#js-article-wrapper').textContent);
  utterThis.voice = voices[0];
  synth.speak(utterThis);
}

function enhanceSpeak() {
  speak();
  setTimeout(speak, 200)
}
</script>

```js
function speak() {
  let synth = window.speechSynthesis;
  let voices = synth.getVoices().filter(voice => voice.lang === 'zh-CN');
  if (voices.length == 0) return;
  let utterThis = new SpeechSynthesisUtterance(document.querySelector('#js-article-wrapper').textContent);
  utterThis.voice = voices[0];
  synth.speak(utterThis);
}

```

可在本博客页面打开控制台，并执行代码，体验一下“朗读功能”。(如果没有朗读，可以再调一次 speak()❤️😄😁)

在控制台打印一下 `voices `。

![](https://wipi.oss-cn-shanghai.aliyuncs.com/2020-03-27/QQ%E6%88%AA%E5%9B%BE20200327235302.png)

应该是不同的硬件设备，不同的操作系统，可用的 voices 不一样，比如 mac 和 windows。

![](https://wipi.oss-cn-shanghai.aliyuncs.com/2020-03-27/QQ%E6%88%AA%E5%9B%BE20200327235612.png)


最后，看一下兼容性还不错。 <button onclick="enhanceSpeak()" class="ant-btn">点我朗读😹💓</button>


网页语音 API 的SpeechSynthesis 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。

使用 JS 朗读文章内容


## 1 小括号（`()`）

### 1.1 命令组

在括号中的命令会作为一个子 shell 来运行。在括号中的变量，由于是在子 shell 中，所以对于脚本剩下的部分是不可用的。父进程，也就是脚本本身，将不能够读取在子进程中创建的变量，也就是在子 shell 中创建的变量。

```shell
#!/bin/bash

a=10
( a=20; )

echo $a   # 10
```

### 1.2 初始化数组

创建数组。

```shell
#!/bin/bash

arr=(1 2 3)   # 注意是以空格分割
echo ${arr[0]} # 1
```

## 2 大括号（{}）

### 2.1 文件名扩展

举个例子，复制 `t.txt` 内容到 `t.bak`中：

```shell
#!/bin/bash

if [ ! -w 't.txt' ]; then
  touch t.txt
fi

echo 'hello t.txt' > t.txt;
cp t.{txt,bak}
```

注意： 在大括号中，不允许有空白，除非这个空白被引用或转义。

### 2.2 代码块

代码块，又称 _内部组_，这个结构实际上是创建了一个匿名函数，但是其中声明的变量，对于脚本其他部分可见。

```shell
#!/bin/bash

a=10
{ a=20; }

echo $a # 20
```

## 3 中括号

### 3.1 条件测试

条件测试表达式放置于 `[]` 中。

```shell
#!/bin/bash

a=10

if [ $a -lt 15 ]; then
  echo "$a < 15"
else
  echo "$a > 15"
fi
```

### 3.2 数组元素

```shell
#!/bin/bash

arr=(10 11 12)
arr[0]=13
echo ${arr[0]} # 13
```

## 4 尖括号（< & >）

重定向。

- test.sh > filename：重定向 test.sh 的输出到文件 filename 中。如果 filename 存在的话，那么将会被覆盖。

- test.sh &> filename：重定向 test.sh 的 stdout（标准输出）和 stderr（标准错误）到 filename 中。

- test.sh >&2：重定向 test.sh 的 stdout 到 stderr 中。

- test.sh >> filename：把 test.sh 的输出追加到文件 filename 中。如果 filename 不存在的话，将会被创建。

## 5 管道（|）

分析左侧命令的输出，并将该输出作为右侧命令的输入。

```shell
ps -aux | grep 8080
```

## 6 波浪号（~）

表示 `home` 目录。


bash 脚本编程系列之：bash 中的特殊字符（下）。

bash 中的特殊字符（下）

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">二叉树的前序遍历</h2><p>给定一个二叉树，返回它的 前序 遍历。</p><p></p><p><strong>示例:</strong> </p><pre data-lang="javascript" class="lang-javascript"><code>输入: [1,null,2,3]  <br/>   1<br/>    \<br/>     2<br/>    /<br/>   3 <br/><br/>输出: [1,2,3]</code></pre><p></p><h3>思路</h3><p>前序遍历：跟 -&gt; 左 -&gt; 右。</p><p></p><h4>递归：</h4><pre data-lang="javascript" class="lang-javascript"><code>/**<br/> * @param {TreeNode} root<br/> * @return {number[]}<br/> */<br/>var preorderTraversal = function (root) {<br/>  let ret = [];<br/>  let node = root;<br/><br/>  function traverse(node, ret) {<br/>    if (!node) {<br/>      return;<br/>    }<br/>    ret.push(node.val);<br/><br/>    if (node.left) {<br/>      traverse(node.left, ret);<br/>    }<br/><br/>    if (node.right) {<br/>      traverse(node.right, ret);<br/>    }<br/>  }<br/><br/>  traverse(node, ret);<br/>  return ret;<br/>};</code></pre><p></p><pre data-lang="javascript" class="lang-javascript"><code>Accepted<br/>68/68 cases passed (68 ms)<br/>Your runtime beats 48.83 % of javascript submissions<br/>Your memory usage beats 72.22 % of javascript submissions (33.7 MB)</code></pre><p></p><h4>循环：</h4><pre><code>/**<br/> * @param {TreeNode} root<br/> * @return {number[]}<br/> */<br/>var preorderTraversal = function (root) {<br/>  if (!root) {<br/>    return [];<br/>  }<br/><br/>  let ret = [];<br/>  let stack = [];<br/>  stack.push(root);<br/><br/>  while (stack.length) {<br/>    let node = stack.pop();<br/>    ret.push(node.val);<br/><br/>    if (node.right) {<br/>      stack.push(node.right);<br/>    }<br/><br/>    if (node.left) {<br/>      stack.push(node.left);<br/>    }<br/>  }<br/><br/>  return ret;<br/>};</code></pre><p></p><pre><code>Accepted<br/>68/68 cases passed (64 ms)<br/>Your runtime beats 69.91 % of javascript submissions<br/>Your memory usage beats 72.22 % of javascript submissions (33.8 MB)</code></pre>

LeetCode：二叉树的前序遍历

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">斐波那契数</h2><p style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false"><strong>斐波那契数</strong>，通常用 <code>F(n)</code> 表示，形成的序列称为<strong>斐波那契数列</strong>。该数列由 <code>0</code> 和 <code>1</code> 开始，后面的每一项数字都是前面两项数字的和。也就是：</p><pre><code>F(0) = 0,   F(1) = 1<br/>F(N) = F(N - 1) + F(N - 2), 其中 N &gt; 1.</code></pre><p style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">给定 <code>N</code>，计算 <code>F(N)</code>。</p><p></p><p><strong>示例:</strong> </p><pre data-lang="javascript" class="lang-javascript"><code>输入：2<br/>输出：1<br/>解释：F(2) = F(1) + F(0) = 1 + 0 = 1.<br/><br/>输入：3<br/>输出：2<br/>解释：F(3) = F(2) + F(1) = 1 + 1 = 2.</code></pre><h3>思路</h3><h4>普通递归</h4><pre><code>/**<br/> * @param {number} n<br/> * @return {number}<br/> */<br/>var fib = function (n) {<br/>  if (n &lt; 2) return n;<br/>  return fib(n) + fib(n - 1);<br/>};</code></pre><p></p><pre><code>Accepted<br/>31/31 cases passed (100 ms)<br/>Your runtime beats 10.54 % of javascript submissions<br/>Your memory usage beats 60 % of javascript submissions (34.2 MB)</code></pre><h4>循环实现</h4><p>f(2) = f(1) + f(0) =&gt; f(3) = f(2) + f(1)，所以可以直接从 0 和 1 循环到 n 即可。</p><p></p><pre><code>/**<br/> * @param {number} n<br/> * @return {number}<br/> */<br/>var fib = function (n) {<br/>  let a = 0;<br/>  let b = 1;<br/>  let t = 0;<br/>  while (n-- &gt; 0) {<br/>    t = a;<br/>    a = b;<br/>    b += t;<br/>  }<br/>  return a;<br/>};</code></pre><p></p><pre><code>Accepted<br/>31/31 cases passed (64 ms)<br/>Your runtime beats 67.36 % of javascript submissions<br/>Your memory usage beats 84 % of javascript submissions (33.7 MB)</code></pre><p></p><h4>尾递归</h4><p>与循环实现思路一致，改造成尾递归减少调用栈。</p><pre><code>/**<br/> * @param {number} n<br/> * @return {number}<br/> */<br/>var fib = function (n) {<br/>  function f(a, b, n) {<br/>    if (n &lt; 1) return a;<br/>    return f(b, a + b, n - 1);<br/>  }<br/><br/>  return f(0, 1, n);<br/>};</code></pre><p></p><pre><code>Accepted<br/>31/31 cases passed (56 ms)<br/>Your runtime beats 93.71 % of javascript submissions<br/>Your memory usage beats 84 % of javascript submissions (33.7 MB)</code></pre>

LeetCode：斐波那契数

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">存在重复元素</h2><p>给定一个整数数组，判断是否存在重复元素。<br/>如果任意一值在数组中出现至少两次，函数返回 <code>true</code> 。如果数组中每个元素都不相同，则返回 <code>false</code>。</p><p><strong>示例:</strong> </p><pre data-lang="javascript" class="lang-javascript"><code>输入: [1,2,3,1]<br/>输出: true<br/><br/>输入: [1,2,3,4]<br/>输出: false<br/><br/>输入: [1,1,1,3,3,4,3,2,4,2]<br/>输出: true</code></pre><h3>思路</h3><p>利用对象对数字计数</p><pre data-lang="javascript" class="lang-javascript"><code>/**<br/> * @param {number[]} nums<br/> * @return {boolean}<br/> */<br/>var containsDuplicate = function (nums) {<br/>  if (!nums || nums.length === 0 || nums.length == 1) return false;<br/>  if (nums.length === 2) return nums[0] === nums[1];<br/><br/>  let map = {};<br/><br/>  for (let num of nums) {<br/>    if (map[num]) {<br/>      return true;<br/>    } else {<br/>      map[num] = !map[num] ? 1 : map[num] + 1;<br/>    }<br/>  }<br/><br/>  return false;<br/>};</code></pre><p>运行结果：</p><pre data-lang="javascript" class="lang-javascript"><code>Accepted<br/>18/18 cases passed (88 ms)<br/>Your runtime beats 54.62 % of javascript submissions<br/>Your memory usage beats 41.31 % of javascript submissions (42.6 MB)</code></pre>

给定一个整数数组，判断是否存在重复元素。如果任意一值在数组中出现至少两次，函数返回 true 。如果数组中每个元素都不相同，则返回 false。

LeetCode：存在重复元素

## 前言

最近看了不少关于 h5 页面制作工具。端午闲来无事，决定尝试下一个页面搭建工具。效果如下：

![](https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-28/QQ20200628-105408-HD.gif)
![](https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-27/ramiko-ditor.png)
![](https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-27/ramiko-page.png)

gif 录制效果不佳，可以访问以下链接进行体验。

- Github：[传送门](https://github.com/fantasticit/ramiko)
- 编辑器：[传送门](https://blog.wipi.tech/ramiko/editor)
- demo：[传送门](https://blog.wipi.tech/ramiko/page/85333d78-ed24-4adf-8d09-b185fddd73fc)

## 技术栈

- next.js：前端模块化开发
- sass: 配合使用 css modules
- nest.js：服务端语言
- MySQL：数据存储

## 整体架构

![](https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-28/ramiko-jiagou.png)

前端开发组件库，完善组件类型，编辑器读取组件完成页面搭建，将页面数据发送至服务端保存。
访问页面，从服务端拉取页面数据，前端渲染页面即可。

## 编辑器设计

![编辑器整体结构图](https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-28/ramiko.png)

```shell
.
|____index.tsx
|____plugins               ## 组件库管理
|____Editor.tsx            ## 编辑器
|____type.ts               ## 类型定义
|____components
| |____Pannel              ## 左侧组件面板
| |____Preview             ## 中间预览面板
| |____Editor              ## 组件编辑器实现
| | |____index.tsx
| | |____PropsEditor
| | | |____index.tsx
| | | |____components
| | | | |____SwitchEditor
| | | | |____RadioEditor
| | | | |____ImgEditor
| | | | |____ColorEditor
| | | | |____TextEditor
| | | | |____TextareaEditor
| | | | |____NumberEditor
| | | |____renderEditorItem.tsx
| | | |____UnionEditor.tsx
| | |____FunctionEditor
| | |____SettingEditor
|____renderPage.tsx
```

## 数据结构

### 定义页面数据结构

既然是可视化页面搭建，那么页面必须可以以某种数据结构进行描述。比如：

```js
{
  setting: {
  } // 页面设置
  components: []; // 页面使用到的组件
}
```

### 定义组件数据结构

页面核心是由组件搭建而成的，那么就要定义组件的数据结构。

```tsx
import React from 'react';

export const Title = ({ title, style }) => {
  return <h1>{title}</h1>;
};

Title.defaultProps = {
  title: '标题'
};

Title.schema = {
  title: {
    title: '标题',
    type: 'text'
  }
};
```

核心可以抽象为：

```js
{
  name: 'Title'; // 对应组件名
  props: {
  }
  schema: {
  }
}
```

#### `name`

不可能把组件源代码保存到服务端，所以这里只保存组件的名称，前端渲染时，根据该名称找到对应组件渲染即可（类似 Vue.js 的动态组件）

#### `props`

React 组件的 props，这里使用 `defaultProps` 赋值默认值

#### `schema`

对应 `props` 各个属性的描述，用于编辑器针对进行渲染。进行组件编辑，实际上编辑的是组件的 `props`，`props` 改变组件的渲染结果自然改变。为了对 `props` 进行编辑，需要定义 `props` 的描述语言，通过 `props` 描述来进行属性编辑。这里使用如下的 `schema`。

```js
{
  title: '标题';
  type: 'text';
}
```

对应组件 `props.title`，通过 `type` 可以决定如何渲染编辑器组件。

## 无渲染组件

可能光能渲染组件是不够的，也许需要更多的功能包装，比如埋点。这一类函数本质上也是组件。可以通过 `schema` 定义进行 `props` 编辑。举个例子：

```js
import React from 'react';

export const Tracking = ({ op, pageSn, pageElSn, children }) => {
  const onClick = () => {
    alert('埋点测试：' + op + '_' + pageSn + '_' + pageElSn);
  };

  return <div onClick={onClick}>{children}</div>;
};

Tracking.defaultProps = {
  op: 'click',
  pageSn: null,
  pageElSn: null
};

Tracking.schema = {
  op: {
    title: '曝光方式',
    type: 'radio',
    options: ['click', 'pv']
  },
  pageSn: {
    title: '页面编号',
    type: 'number'
  },
  pageElSn: {
    title: '元素编号',
    type: 'number'
  }
};
```

## 丰富完善

1. 丰富组件库
2. 优化编辑器：比如添加组件拖拽功能。

## 项目启动

Github：[传送门](https://github.com/fantasticit/ramiko)

在 `client` 和 `server` 分别执行 `yarn dev` 即可。


next.js + nest.js 构建页面可视化编辑器 -- Ramiko

# Leetcode

✅ Solutions to LeetCode by JavaScript.

## 简单

- [两数之和](https://github.com/fantasticit/LeetCode/tree/master/Easy/0001.两数之和.js)
- [整数反转](https://github.com/fantasticit/LeetCode/tree/master/Easy/0007.整数反转.js)
- [回文数](https://github.com/fantasticit/LeetCode/tree/master/Easy/0009.回文数.js)
- [有效的括号](https://github.com/fantasticit/LeetCode/tree/master/Easy/0020.有效的括号.js)
- [合并两个有序链表](https://github.com/fantasticit/LeetCode/tree/master/Easy/0021.合并两个有序链表.js)
- [删除排序数组中的重复项](https://github.com/fantasticit/LeetCode/tree/master/Easy/0026.删除排序数组中的重复项.js)
- [移除元素](https://github.com/fantasticit/LeetCode/tree/master/Easy/0027.移除元素.js)
- [实现-str-str](https://github.com/fantasticit/LeetCode/tree/master/Easy/0028.实现-str-str.js)
- [搜索插入位置](https://github.com/fantasticit/LeetCode/tree/master/Easy/0035.搜索插入位置.js)
- [最大子序和](https://github.com/fantasticit/LeetCode/tree/master/Easy/0053.最大子序和.js)
- [最后一个单词的长度](https://github.com/fantasticit/LeetCode/tree/master/Easy/0058.最后一个单词的长度.js)
- [加一](https://github.com/fantasticit/LeetCode/tree/master/Easy/0066.加一.js)
- [二进制求和](https://github.com/fantasticit/LeetCode/tree/master/Easy/0067.二进制求和.js)
- [爬楼梯](https://github.com/fantasticit/LeetCode/tree/master/Easy/0070.爬楼梯.js)
- [删除排序链表中的重复元素](https://github.com/fantasticit/LeetCode/tree/master/Easy/0083.删除排序链表中的重复元素.js)
- [合并两个有序数组](https://github.com/fantasticit/LeetCode/tree/master/Easy/0088.合并两个有序数组.js)
- [相同的树](https://github.com/fantasticit/LeetCode/tree/master/Easy/0100.相同的树.js)
- [对称二叉树](https://github.com/fantasticit/LeetCode/tree/master/Easy/0101.对称二叉树.js)
- [二叉树的最大深度](https://github.com/fantasticit/LeetCode/tree/master/Easy/0104.二叉树的最大深度.js)
- [二叉树的层次遍历-ii](https://github.com/fantasticit/LeetCode/tree/master/Easy/0107.二叉树的层次遍历-ii.js)
- [平衡二叉树](https://github.com/fantasticit/LeetCode/tree/master/Easy/0110.平衡二叉树.js)
- [二叉树的最小深度](https://github.com/fantasticit/LeetCode/tree/master/Easy/0111.二叉树的最小深度.js)
- [只出现一次的数字](https://github.com/fantasticit/LeetCode/tree/master/Easy/0136.只出现一次的数字.js)
- [环形链表](https://github.com/fantasticit/LeetCode/tree/master/Easy/0141.环形链表.js)
- [反转链表](https://github.com/fantasticit/LeetCode/tree/master/Easy/0206.反转链表.js)
- [最小栈](https://github.com/fantasticit/LeetCode/tree/master/Easy/0155.最小栈.js)
- [移除链表元素](https://github.com/fantasticit/LeetCode/tree/master/Easy/0203.移除链表元素.js)
- [存在重复元素](https://github.com/fantasticit/LeetCode/tree/master/Easy/0217.存在重复元素.js)
- [回文链表](https://github.com/fantasticit/LeetCode/tree/master/Easy/0234.回文链表.js)
- [各位相加](https://github.com/fantasticit/LeetCode/tree/master/Easy/0258.各位相加.js)
- [反转字符串](https://github.com/fantasticit/LeetCode/tree/master/Easy/0344.反转字符串.js)
- [找不同](https://github.com/fantasticit/LeetCode/tree/master/Easy/0389.找不同.js)
- [用队列实现栈](https://github.com/fantasticit/LeetCode/tree/master/Easy/0225.用队列实现栈.js)
- [斐波那契数](https://github.com/fantasticit/LeetCode/tree/master/Easy/0509.斐波那契数.js)
- [二分查找](https://github.com/fantasticit/LeetCode/tree/master/Easy/0704.二分查找)
- [反转字符串-ii](https://github.com/fantasticit/LeetCode/tree/master/Easy/0541.反转字符串-ii.js)

## 中等

- [两数相加](https://github.com/fantasticit/LeetCode/tree/master/Medium/0002.两数相加.js)
- [字符串转换整数-atoi](https://github.com/fantasticit/LeetCode/tree/master/Medium/0008.字符串转换整数-atoi.js)
- [盛最多水的容器](https://github.com/fantasticit/LeetCode/tree/master/Medium/0011.盛最多水的容器.js)
- [三数之和](https://github.com/fantasticit/LeetCode/tree/master/Medium/0015.三数之和.js)
- [最接近的三数之和](https://github.com/fantasticit/LeetCode/tree/master/Medium/0016.最接近的三数之和.js)
- [四数之和](https://github.com/fantasticit/LeetCode/tree/master/Medium/0018.四数之和.js)
- [删除链表的倒数第 n 个节点](https://github.com/fantasticit/LeetCode/tree/master/Medium/0019.删除链表的倒数第n个节点.js)
- [括号生成](https://github.com/fantasticit/LeetCode/tree/master/Medium/0022.括号生成.js)
- [两两交换链表中的节点](https://github.com/fantasticit/LeetCode/tree/master/Medium/0024.两两交换链表中的节点.js)
- [两数相除](https://github.com/fantasticit/LeetCode/tree/master/Medium/0029.两数相除.js)
- [在排序数组中查找元素的第一个和最后一个位置](https://github.com/fantasticit/LeetCode/tree/master/Medium/0034.在排序数组中查找元素的第一个和最后一个位置.js)
- [有效的数独](https://github.com/fantasticit/LeetCode/tree/master/Medium/0036.有效的数独.js)
- [字符串相乘](https://github.com/fantasticit/LeetCode/tree/master/Medium/0043.字符串相乘.js)
- [字母异位词分组](https://github.com/fantasticit/LeetCode/tree/master/Medium/0049.字母异位词分组.js)
- [pow-x-n](https://github.com/fantasticit/LeetCode/tree/master/Medium/0050.pow-x-n.js)
- [二叉树的前序遍历](https://github.com/fantasticit/LeetCode/tree/master/Medium/0144.二叉树的前序遍历.js)
- [lru 缓存机制](https://github.com/fantasticit/LeetCode/tree/master/Medium/0146.lru缓存机制.js)
- [最长上升子序列](https://github.com/fantasticit/LeetCode/tree/master/Medium/0300.最长上升子序列)
- [二叉树的中序遍历](https://github.com/fantasticit/LeetCode/tree/master/Medium/0094.二叉树的中序遍历)

## 困难

- [缺失的第一个正数](https://github.com/fantasticit/LeetCode/tree/master/Hard/0041.缺失的第一个正数.js)
- [最小覆盖子串](https://github.com/fantasticit/LeetCode/tree/master/Hard/0076.最小覆盖子串)
- [二叉树的后序遍历](https://github.com/fantasticit/LeetCode/tree/master/Hard/0145.二叉树的后序遍历)

## LICENSE

MIT


LeetCode 刷题

## 背景

团队使用 TypeScript 进行 React 组件开发。开发组件的同时，需要为组件撰写文档（使用 Markdown 编写文档）。文档中需要对组件的 props 定义进行说明。

![Antd 组件的 API 说明](https://wipi.oss-cn-shanghai.aliyuncs.com/2020-04-26/WX20200426-105830%402x.png)

在开发组件的时候，是编写组件 props 的接口定义。这时候就希望能够偷懒了，直接抽取组件源代码中的接口定义和注释来生成这部分文档。

## 分析

基于上面背景进行分析，可以发现核心需求是抽取组件接口定义和注释形成特定格式的文档。

```ts
import React from "react";

export interface IProps {
  // 文字
  text: string;
  // 点击事件
  onClick: () => void;
}

const Button = ({ text }) => {
  return <button>{text}</button>;
};

export default Button;
```

其实就是抽取 `IProps` 定义然后转换成其他格式文档。

## 思路

在人人都说 `AST` 的今天，我们肯定是要使用 `AST` 来完成。

1. 将源代码转换成 `AST`
2. 遍历 `AST` 抽取 `interface` 定义
3. 继续遍历 `interface` 抽取各个字段定义 `definition`

```shell
code -> ast -> interface -> definitions
```

## 源代码 -> `AST`

站在巨人的肩膀上，使用 `babel` 解析源代码即可。

```js
const parser = require("@babel/parser");

function transformCode2Ast(code) {
  return parser.parse(code, {
    sourceType: "module",
    plugins: [
      "jsx",
      "typescript",
      "asyncGenerators",
      "bigInt",
      "classProperties",
      "classPrivateProperties",
      "classPrivateMethods",
      ["decorators", { decoratorsBeforeExport: false }],
      "doExpressions",
      "dynamicImport",
      "exportDefaultFrom",
      "exportNamespaceFrom",
      "functionBind",
      "functionSent",
      "importMeta",
      "logicalAssignment",
      "nullishCoalescingOperator",
      "numericSeparator",
      "objectRestSpread",
      "optionalCatchBinding",
      "optionalChaining",
      ["pipelineOperator", { proposal: "minimal" }],
      "throwExpressions",
      "topLevelAwait",
      "estree",
    ],
  });
}
```

转换上面的 Button 组件，`AST` 大概长这样：

```js
Node {
  type: 'File',
  start: 0,
  end: 207,
  loc:
   SourceLocation {
     start: Position { line: 1, column: 0 },
     end: Position { line: 16, column: 0 } },
  errors: [],
  program:
   Node {
     type: 'Program',
     start: 0,
     end: 207,
     loc: SourceLocation { start: [Position], end: [Position] },
     sourceType: 'module',
     interpreter: null,
     body: [ [Node], [Node], [Node], [Node] ] },
  comments:
   [ { type: 'CommentLine',
       value: ' 文字',
       start: 57,
       end: 62,
       loc: [SourceLocation] },
     { type: 'CommentLine',
       value: ' 点击事件',
       start: 81,
       end: 88,
       loc: [SourceLocation] } ] }
```

## 遍历 `AST`

同样站在巨人的肩膀上，使用 `ast-types` 对 `ast` 进行遍历。

```ts
const { visit } = require("ast-types");

function findInterface(ast) {
  let ret = Object.create(null);
  let currentInterface = null;

  visit(ast, {
    visitTSInterfaceDeclaration(nodePath) {
      currentInterface = nodePath.value.id.name;
      this.traverse(nodePath);
    },
    visitTSPropertySignature(nodePath) {
      ret[currentInterface] = ret[currentInterface] || [];
      ret[currentInterface].push(nodePath.value);
      return false;
    },
  });
  return ret;
}
```

对 `AST` 遍历抽取 `Interface` 后的结果大概长这样。

```js
Node {
  type: 'TSPropertySignature',
  start: 65,
  end: 78,
  loc: [SourceLocation],
  key: [Node],
  computed: false,
  typeAnnotation: [Node],
  leadingComments: [Array],
  trailingComments: [Array] },
Node {
  type: 'TSPropertySignature',
  start: 91,
  end: 111,
  loc: [SourceLocation],
  key: [Node],
  computed: false,
  typeAnnotation: [Node],
  leadingComments: [Array] } ] }
```

会发现各个定义在 `typeAnnotation` 中，这时候对它进行解析即可。

## 解析 TypeAnnotation

通过分析 `typeAnnotation` 很容易写出。

```js
const get = require("lodash/get");

function parseTSTypeReference(typeName) {
  const type = get(typeName, "type");
  switch (type) {
    case "TSQualifiedName":
      return `${get(typeName, "left.name")}.${get(typeName, "right.name")}`;
    default:
      return `Unknown ReferenceType`;
  }
}

function parseTSFunctionType(parameters, typeAnnotation) {
  const parseTSFunctionParameters = (parameters) => {
    if (!parameters || !parameters.length) {
      return `()`;
    }
    let args = parameters.map((parameter) => {
      return `${get(parameter, "name")}: ${parseTypeAnnotation(
        get(parameter, "typeAnnotation.typeAnnotation")
      )}`;
    });
    return "( " + args.join(", ") + ")";
  };
  const parseTSFunctionReturn = (typeAnnotation) => {
    const type = get(typeAnnotation, "type");
    switch (type) {
      case "TSVoidKeyword":
        return "void";
      case "TSTypeReference":
        return parseTSTypeReference(get(typeAnnotation, "typeName"));
      default:
        return `Unknown FunctionType`;
    }
  };
  return `${parseTSFunctionParameters(parameters)} => ${parseTSFunctionReturn(
    typeAnnotation
  )}`;
}

function parseTSTypeLiteral(members) {
  const ret = parseInterfaceDefinitions(members);
  let args = ret.map((t) => `${t.name}: ${t.type}`);
  return "{ " + args.join(", ") + " }";
}

function parseTypeAnnotation(typeAnnotation) {
  const type = get(typeAnnotation, "type");
  switch (type) {
    case "TSNumberKeyword":
    case "TSStringKeyword":
    case "TSBoleanKeyword":
    case "TSNullKeyword":
    case "TSUndefinedKeyword":
    case "TSSymbolKeyword":
    case "TSAnyKeyword":
      return type.match(/TS(\w+)Keyword/)[1].toLowerCase();
    case "TSUnionType":
      return get(typeAnnotation, "types", [])
        .map((type) => get(type, "literal.value"))
        .join(" | ");
    case "TSFunctionType":
      return parseTSFunctionType(
        get(typeAnnotation, "parameters"),
        get(typeAnnotation, "typeAnnotation.typeAnnotation")
      );
    case "TSTypeReference":
      return parseTSTypeReference(get(typeAnnotation, "typeName"));
    case "TSTypeLiteral":
      return parseTSTypeLiteral(get(typeAnnotation, "members"));
    default:
      return "UnKnowType";
  }
}

function parseInterfaceDefinitions(nodePaths) {
  const parseInterfaceDefinitionsNode = (nodePath) => {
    const name = get(nodePath, "key.name");
    const comments = get(nodePath, "leadingComments.0.value", "")
      .trim()
      .split(/[\r\n]/)
      .map((str) => str.trim().replace(/^\*/g, "").trim())
      .filter(Boolean);
    const typeAnnotation = get(nodePath, "typeAnnotation.typeAnnotation");
    const type = parseTypeAnnotation(typeAnnotation);
    return { name, type, comments };
  };
  return nodePaths.map(parseInterfaceDefinitionsNode);
}
```

至此，可以得到 `Button` 的接口定义。

```js
[
  [
    {
      name: "text",
      type: "string",
      comments: ["文字"],
    },
    {
      name: "onClick",
      type: "() => void",
      comments: ["点击事件"],
    },
  ],
];
```

接下来只要将解析后的结果转成想要的格式即可。

## 测试

```js
function parseTypeScriptComponentInterface(code) {
  let ast = transformCode2Ast(code);
  let interfaces = findInterfaces(ast);
  let definitions = Object.keys(interfaces).reduce((a, c) => {
    a[c] = a[c] || [];
    a[c].push(parseInterfaceDefinitions(interfaces[c]));
    return a;
  }, Object.create(null));
  return definitions;
}

const code = `
import React from 'react';

export interface IProps {
  /**
   * button 
   * 显示文字
   */
  text: string;
  // 点击事件
  onClick: () => void;
  // 属性 3
  props3: (arg: any) => void;
  // 属性 4
  props4: (arg: { name: string, age: number }) => React.Node
}

const Button = ({ text }) => {
  return <button>{text}</button>;
};

export default Button;
`;

let ret = parseTypeScriptComponentInterface(code);
```

输出：

```js
{
  "IProps": [
    [
      {
        "name": "text",
        "type": "string",
        "comments": [
          "button",
          "显示文字"
        ]
      },
      {
        "name": "onClick",
        "type": "() => void",
        "comments": [
          "点击事件"
        ]
      },
      {
        "name": "props3",
        "type": "( arg: any) => void",
        "comments": [
          "属性 3"
        ]
      },
      {
        "name": "props4",
        "type": "( arg: { name: string, age: number }) => React.Node",
        "comments": [
          "属性 4"
        ]
      }
    ]
  ]
}
```

[源代码地址](https://github.com/zhxuc/parse-typescript-component-interface)。


使用 AST 解析 React TypeScript Component 接口定义

## CSS 自定义属性基本使用方法

自定义属性声明使用两个连词线 `--` 表示（`$color` 是属于Sass的语法，`@color` 是属于Less的语法，为避免冲突，css自定义属性使用 `--` ）。

## 使用 CSS 自定义属性切换主题

通过改变自定义属性值即可达到切换主题的效果。

```
<body>
    <main>
        <h2>标题</h2>
        <p>描述描述</p>
        <button>切换主题</button>
    </main>
</body>
```

```
body {
    --bg: #f4f4f4;
    --text-color: rgba(0, 0, 0, .85);
}

body.dark {
    --bg: #282c35;
    --text-color: rgba(255, 255, 255, .85);
}

* {
    margin: 0;
    padding: 0;
}

main {
    height: 100vh;
    text-align: center;
    background: var(--bg);
    color: var(--text-color);
}

button {
    padding: 4px 8px;
    margin: 20px;
}
```

```
const btn = document.querySelector('button')

btn.onclick = () => {
    if (document.body.classList.contains('dark')) {
        document.body.classList.remove('dark')
    } else {
        document.body.classList.add('dark')
    }
}
```

效果：

<div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-04-06/WX20200406-151334%402x.png" width="50%" style="width:50%"></div>
<div class="media-wrap image-wrap align-left" style="text-align:left"><img class="media-wrap image-wrap align-left" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-04-06/WX20200406-151135%402x.png" width="50%" style="width:50%"></div>

## 实现暗黑主题

### 图片处理

为了使图片不至于太过明亮，可以在暗黑主题里降低图片的透明度。

```
@media (prefers-color-scheme: dark) {
    img {
        opacity: .75;
        transition: opacity .5s ease-in-out;
    }
    
    img:hover {
        opacity: 1;
    }
}
```

### 暗黑模式的媒体查询

```
@media (prefers-color-scheme: dark) {
}
```



PS: 兼容性不是很好。



### JavaScript 判断当前系统主题

MacOS、iOS，以及一些较新的安卓手机等都支持了暗黑（深色）模式。可以使用 JS 进行判断。


```
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark
}
```


## CSS 自定义属性兼容性

<div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-04-06/WX20200406-153648%402x.png"></div>

使用 CSS 变量为网站加上暗黑模式

使用 CSS 自定义属性实现暗黑模式

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">反转字符串</h2><p>编写一个函数，其作用是将输入的字符串反转过来。输入字符串以字符数组 char[] 的形式给出。<br/>不要给另外的数组分配额外的空间，你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。<br/>你可以假设数组中的所有字符都是 ASCII 码表中的可打印字符。</p><p></p><p><strong>示例:</strong> </p><pre data-lang="javascript" class="lang-javascript"><code>输入：[&quot;h&quot;,&quot;e&quot;,&quot;l&quot;,&quot;l&quot;,&quot;o&quot;]<br/>输出：[&quot;o&quot;,&quot;l&quot;,&quot;l&quot;,&quot;e&quot;,&quot;h&quot;]<br/><br/>输入：[&quot;H&quot;,&quot;a&quot;,&quot;n&quot;,&quot;n&quot;,&quot;a&quot;,&quot;h&quot;]<br/>输出：[&quot;h&quot;,&quot;a&quot;,&quot;n&quot;,&quot;n&quot;,&quot;a&quot;,&quot;H&quot;]</code></pre><h3>思路</h3><p>前半部分和后半部分两两交换即可。</p><pre data-lang="javascript" class="lang-javascript"><code>/**<br/> * @param {character[]} s<br/> * @return {void} Do not return anything, modify s in-place instead.<br/> */<br/>var reverseString = function (s) {<br/>  let len = s.length;<br/>  let mid = ~~(len / 2);<br/><br/>  for (let i = 0; i &lt; mid; i++) {<br/>    let tmp = s[i];<br/>    s[i] = s[len - 1 - i];<br/>    s[len - 1 - i] = tmp;<br/>  }<br/>};</code></pre><p>运行结果：</p><pre data-lang="javascript" class="lang-javascript"><code>Accepted<br/>478/478 cases passed (200 ms)<br/>Your runtime beats 11.27 % of javascript submissions<br/>Your memory usage beats 95.29 % of javascript submissions (46.7 MB)</code></pre>

LeetCode：反转字符串

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">找不同</h2><p>给定两个字符串 s 和 t，它们只包含小写字母。<br/>字符串 t 由字符串 s 随机重排，然后在随机位置添加一个字母。<br/>请找出在 t 中被添加的字母。</p><p></p><p><strong>示例:</strong> </p><pre data-lang="javascript" class="lang-javascript"><code>输入：<br/>s = &quot;abcd&quot;<br/>t = &quot;abcde&quot;<br/><br/>输出：<br/>e<br/><br/>解释：<br/>&#x27;e&#x27; 是那个被添加的字母。</code></pre><h3>思路</h3><p>首先，遍历字符串 <code>s</code> 将出现的各个字符存进对象 <code>m</code> 并进行计数；然后，遍历字符串 <code>t</code> ，同时构建 <code>t</code> 的字符对象 <code>n</code> 。如果字符在 <code>m</code> 中不存在，直接返回字符，若都存在，遍历 <code>n</code> ，比较字符在 <code>m</code> 和 <code>n</code> 中的计数是否相等。</p><pre data-lang="javascript" class="lang-javascript"><code>/**<br/> * @param {string} s<br/> * @param {string} t<br/> * @return {character}<br/> */<br/>var findTheDifference = function (s, t) {<br/>  let m = {};<br/>  let n = {};<br/><br/>  for (let i = 0; i &lt; s.length; i++) {<br/>    m[s[i]] = m[s[i]] ? m[s[i]] + 1 : 1;<br/>  }<br/><br/>  for (let j = 0; j &lt; t.length; j++) {<br/>    if (!m[t[j]]) {<br/>      return t[j];<br/>    }<br/><br/>    n[t[j]] = n[t[j]] ? n[t[j]] + 1 : 1;<br/>  }<br/><br/>  for (let char in n) {<br/>    if (n[char] !== m[char]) {<br/>      return char;<br/>    }<br/>  }<br/><br/>  return;<br/>};</code></pre><p>运行结果：</p><pre data-lang="javascript" class="lang-javascript"><code>Accepted<br/>54/54 cases passed (88 ms)<br/>Your runtime beats 22.41 % of javascript submissions<br/>Your memory usage beats 53.85 % of javascript submissions (35.9 MB)</code></pre>

给定两个字符串 s 和 t，它们只包含小写字母。字符串 t 由字符串 s 随机重排，然后在随机位置添加一个字母。请找出在 t 中被添加的字母。

LeetCode：找不同

<p>最近开发时遇到了URL中的 query 参数解析异常问题。表现为：<br></p>
<p>假设 URL 中 seacr 部分为：<code>?name=dd+ =iuio</code>，常用的 qs 库解析 <code>query</code> 参数为：</p>
<pre><code class="js language-js">{ name: 'dd  =iuio' }
</code></pre>
<p>更换使用 node <code>url</code> 模块解析也是如此。思来想去，最终还是决定手写解析方法：</p>
<pre><code class="js language-js">const assert = require('assert');

function parseQuery(str) {
  str = str.trim().replace(/^(\?|#|&amp;)/, '');

  if (!str) {
    return {};
  }

  const res = {};

  str.split('').forEach((params) => {
    const parts = params.split('=');
    const key = parts.shift();
    const val = parts.length > 0 ? decodeURIComponent(parts.join('=')) : null;

    if (res[key] === undefined) {
      res[key] = val;
    } else if (Array.isArray(res[key])) {
      res[key].push(val);
    } else {
      res[key] = [res[key], val];
    }
  });

  return res;
}

assert.deepEqual(parseQuery(`?name=dd+ =iuio`), { name: 'dd+ =iuio' });
assert.deepEqual(parseQuery(`?name=dd+ =iuio=ui`), { name: 'dd+ =iuio=ui' });
assert.deepEqual(parseQuery(`?name=dd+ =iuio=ui&amp;name=ui#`), {
  name: ['dd+ =iuio=ui', 'ui#'],
});
assert.deepEqual(parseQuery(`?name=; , / ? : @ = + $ - _ . ! ~ * ' " ( )`), {
  name: `; , / ? : @ = + $ - _ . ! ~ * ' " ( )`,
});
</code></pre>

js 解析 url search params 特殊字符问题

<h2 id="lru">LRU缓存机制</h2>
<p>运用你所掌握的数据结构，设计和实现一个 LRU (最近最少使用) 缓存机制。它应该支持以下操作： 获取数据 get 和 写入数据 put 。<br></p>
<p>获取数据 get(key) - 如果密钥 (key) 存在于缓存中，则获取密钥的值（总是正数），否则返回 -1。<br></p>
<p>写入数据 put(key, value) - 如果密钥已经存在，则变更其数据值；如果密钥不存在，则插入该组「密钥/数据值」。当缓存容量达到上限时，它应该在写入新数据之前删除最久未使用的数据值，从而为新的数据值留出空间。</p>
<p><strong>示例:</strong></p>
<pre><code>LRUCache cache = new LRUCache( 2 /* 缓存容量 */ );

cache.put(1, 1);
cache.put(2, 2);
cache.get(1);       // 返回  1
cache.put(3, 3);    // 该操作会使得密钥 2 作废
cache.get(2);       // 返回 -1 (未找到)
cache.put(4, 4);    // 该操作会使得密钥 1 作废
cache.get(1);       // 返回 -1 (未找到)
cache.get(3);       // 返回  3
cache.get(4);       // 返回  4
</code></pre>
<h3 id="">思路</h3>
<p>维护待删除 key 值的队列，根据使用情况对 key 值进行位置调整。</p>
<pre><code>/**
 * @param {number} capacity
 */
var LRUCache = function (capacity) {
  this.capacity = capacity;
  this.usedCapacity = 0;
  this.store = Object.create(null);
  this.toDeleteKeys = [];
};

/**
 * @param {number} key
 * @return {number}
 */
LRUCache.prototype.get = function (key) {
  if (this.store[key]) {
    this.moveKeyToEnd(key);
  }

  return this.store[key] || -1;
};

LRUCache.prototype.moveKeyToEnd = function (key) {
  let arr = this.toDeleteKeys;
  let idx = this.toDeleteKeys.indexOf(key);

  if (idx &lt; 0) {
    return;
  }

  if (idx === arr.length - 1) {
    return;
  }

  arr.splice(idx, 1);
  arr.push(key);
};

/**
 * @param {number} key
 * @param {number} value
 * @return {void}
 */
LRUCache.prototype.put = function (key, value) {
  if (this.store[key]) {
    this.moveKeyToEnd(key);
    this.store[key] = value;
    return;
  }

  this.toDeleteKeys.push(key);

  if (this.usedCapacity &lt; this.capacity) {
    this.store[key] = value;
    this.usedCapacity += 1;
  } else {
    let deleteKey = this.toDeleteKeys.shift();
    delete this.store[deleteKey];
    this.store[key] = value;
  }
};
</code></pre>
<p>运行结果：</p>
<pre><code>Accepted
18/18 cases passed (256 ms)
Your runtime beats 38.35 % of javascript submissions
Your memory usage beats 100 % of javascript submissions (58.9 MB)
</code></pre>

## 双向链表实现

最近最少使用，淘汰最进最久未使用的数据。

### 思路


使用哈希表和双向链表维护所有键值对。


- get：key 不存在，返回 -1；key 存在，通过哈希表定位到节点，移动到链表头部，返回节点值
- put：key 不存在，使用 key/value 构建节点，将节点添加到哈希表并添加到链表头部，然后判断是否超出数量，如果超出，删除链表尾部节点，删除对应哈希；key 存在，通过哈希表获取到节点，更新值，移动节点到链表头部

### 实现


```js
class LinkNode {
    constructor (key, value) {
        this.key = key;
        this.value = value;
        this.prev = null;
        this.next = null;
    }
}

class LRUCache {
    constructor(capacity) {
        this.capacity = capacity; // 容量
        this.size = 0; // 当前数据量
        this.cache = {}; // 哈希表
        this.head = new LinkNode(); // 伪头部节点（不设值）
        this.tail = new LinkNode(); // 伪尾部节点（不设值）
        this.head.next = this.tail;
        this.tail.prev = this.head;
    }

    /**
     * 添加到节点到头部（即伪头部的next）
     * @param {*} node
     */
    addToHead(node) {
        node.prev = this.head;
        node.next = this.head.next;
        this.head.next.prev = node;
        this.head.next = node;
    }

    /**
     * 移除节点（连接其prev和next，实现移除）
     * @param {*} node
     */
    removeNode(node) {
        node.prev.next = node.next;
        node.next.prev = node.prev;
    }

    /**
     * 移动节点到头部（删除后添加到头部）
     */
    moveToHead(node) {
        this.removeNode(node);
        this.addToHead(node);
    }

    /**
     * 移除尾节点（伪尾部节点的 prev，即最近最久未使用）
     */
    removeTail() {
        const node = this.tail.prev;
        this.removeNode(node);
        return node;
    }

    /**
     * 查询
     * @param {*} key
     * @returns
     */
    get(key) {
        if (key in this.cache) {
            const node = this.cache[key];
            this.moveToHead(node); // 移动到头部
            return node.value;
        }
        else {
            return -1;
        }
    }

    /**
     * 存值
     * @param {*} key
     * @param {*} value
     */
    put(key, value) {
        if (key in this.cache) {
            const node = this.cache[key];
            node.value = value;
            this.moveToHead(node)
        }
        else {
            const node = new LinkNode(key, value);
            this.cache[key] = node;
            this.size += 1;
            this.addToHead(node); // 添加到头部

            if (this.size > this.capacity) { // 超出容量，删除数据
                const removedNode = this.removeTail();
                delete this.cache[removedNode.key];
                this.size -= 1;
            }
        }
    }
}

```



LeetCode：LRU缓存机制

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">用队列实现栈</h2><p>使用队列实现栈的下列操作：</p><ul><li>push(x) -- 元素 x 入栈</li><li>pop() -- 移除栈顶元素</li><li>top() -- 获取栈顶元素</li><li>empty() -- 返回栈是否为空</li></ul><p></p><p><strong>注意:</strong></p><ul><li>你只能使用队列的基本操作-- 也就是 <code>push to back</code>, <code>peek/pop from front</code>, <code>size</code>, 和 <code>is empty</code> 这些操作是合法的。</li><li>你所使用的语言也许不支持队列。 你可以使用 list 或者 deque（双端队列）来模拟一个队列 , 只要是标准的队列操作即可。</li><li>你可以假设所有操作都是有效的（例如, 对一个空的栈不会调用 pop 或者 top 操作）。</li></ul><p></p><h3>思路</h3><p>队列：先进先出；栈：后进先出。</p><pre data-lang="javascript" class="lang-javascript"><code>/**<br/> * Initialize your data structure here.<br/> */<br/>var MyStack = function () {<br/>  this.elements = [];<br/>  this.length = 0;<br/>};<br/><br/>/**<br/> * Push element x onto stack.<br/> * @param {number} x<br/> * @return {void}<br/> */<br/>MyStack.prototype.push = function (x) {<br/>  this.elements.push(x);<br/>  this.length += 1;<br/>};<br/><br/>/**<br/> * Removes the element on top of the stack and returns that element.<br/> * @return {number}<br/> */<br/>MyStack.prototype.pop = function () {<br/>  let element = this.elements.pop();<br/>  this.length -= 1;<br/>  return element;<br/>};<br/><br/>/**<br/> * Get the top element.<br/> * @return {number}<br/> */<br/>MyStack.prototype.top = function () {<br/>  return this.elements[this.length - 1];<br/>};<br/><br/>/**<br/> * Returns whether the stack is empty.<br/> * @return {boolean}<br/> */<br/>MyStack.prototype.empty = function () {<br/>  return this.length === 0;<br/>};<br/><br/>/**<br/> * Your MyStack object will be instantiated and called as such:<br/> * var obj = new MyStack()<br/> * obj.push(x)<br/> * var param_2 = obj.pop()<br/> * var param_3 = obj.top()<br/> * var param_4 = obj.empty()<br/> */</code></pre><p>运行结果：</p><pre data-lang="javascript" class="lang-javascript"><code>Accepted<br/>16/16 cases passed (68 ms)<br/>Your runtime beats 38.28 % of javascript submissions<br/>Your memory usage beats 100 % of javascript submissions (33.6 MB)</code></pre>

LeetCode：用队列实现栈

## 是否支持全屏 API

通过 `document.fullscreenEnabled` 可以检测是否支持全屏。当它的值是 false 的时候，表示全屏模式不可用（可能的原因有 "fullscreen" 特性不被允许，或全屏模式不被支持等 ）。

## 是否正在全屏展示

通过 `document.fullscreenElement` 属性提供了当前在 DOM （或者 shadow DOM）里被展示为全屏模式的 Element，如果这个值为 null，文档不处于全屏模式。

## 元素的全屏展示

通过 `element.requestFullscreen` 请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式。

## 元素的全屏样式

通过 `:fullscreen` 伪类选择器可以为进入全屏的元素指定样式。

## 全屏的事件处理

在进入/退出全屏时，Fullscreen API 定义了两个事件，可用于检测全屏模式的打开和关闭，以及在全屏和窗口模式之间切换过程中发生的错误。Document 和  Element 接口提供了这些事件的事件处理函数。

- `document.onfullscreenchange`
- `document.onfullscreenerror`
- `element.onfullscreenchange`
- `element.onfullscreenerror`

## Let's do it

```css
#box {
  width: 100%;
  padding: 2rem;
  text-align: center;
  color: #fff;
  background: #e9c46a;
}

#box:fullscreen {
  background: #e76f51;
}
```

```js
function toggleElementFullscreen(element) {
  if (!document.fullscreenEnabled) {
    alert('不支持使用 Fullscreen API')
    return
  }

  if (!document.fullscreenElement) {
    if (!element.requestFullscreen) {
      alert('不支持使用 Fullscreen API')
      return
    }
    element.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

const box = document.getElementById('box')
const p = box.querySelector('p')

box.addEventListener('fullscreenchange', () => {
  const isFull = document.fullscreenElement === box
  p.innerText = isFull ? '已经进入全屏' : '已经退出全屏'
})
```
<style>
#box {
  width: 100%;
  min-height: 140px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #e9c46a;
}

#box:fullscreen {
  background: #e76f51;
}
</style>
<script>
function toggleElementFullscreen(element) {
  if (!document.fullscreenEnabled) {
    alert('不支持使用 Fullscreen API')
    return
  }

  if (!document.fullscreenElement) {
    if (!element.requestFullscreen) {
      alert('不支持使用 Fullscreen API')
      return
    }
    element.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

function add() {
  if (add.added) return
  const box = document.getElementById('box')
  const p = box.querySelector('p')
  box.addEventListener('fullscreenchange', () => {
    const isFull = document.fullscreenElement === box
    p.innerHTML = isFull ? '已经进入全屏' : '已经退出全屏'
  })
  add.added = true;
}
</script>
<div>
  <button onclick="toggleElementFullscreen(document.documentElement)" class="ant-btn ant-btn-primary">点我文档全屏</button>
</div>

<div id="box" onclick="add()">
  <div>
    <button onclick="toggleElementFullscreen(document.getElementById('box'))" class="ant-btn">点我全屏</button>
    <p>请点击上方按钮</p>
  </div>
<div>



全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

JS 全屏 API 与样式处理

## 简介

Wipi 是一个面向个人的开源的集成文章发表、页面创建、知识小册等功能的 CMS 系统。涉及到的技术如下：

- `MySQL`：数据存储
- `next.js`：前端页面框架
- `nest.js`：服务端框架
- `AliyunOSS`：对象存储

## 链接

- [Github 源码](https://github.com/fantasticit/wipi)
- [前台页面](https://blog.wipi.tech/)
- [管理系统](https://admin.blog.wipi.tech/)：支持访客注册
- [接口文档](https://api.blog.wipi.tech/api/)

## 功能点

- 文章管理
- 页面管理
- 知识小册
- 评论管理
- 邮件管理
- 访问统计
- 文件管理
- 系统设置

更多功能，欢迎访问系统进行体验。

## 预览

<ul>
  <li><img width="240" alt="文章列表" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-13/3402/image.png"/></li>
  <li><img width="240" alt="文章详情" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/815/image.png"/></li>
  <li><img width="240" alt="动态页面" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/3124/image.png"/></li>
  <li><img width="240" alt="知识小册" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/6485/image.png"/></li>
  <li><img width="240" alt="后台管理" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/754/image.png"/></li>
  <li><img width="240" alt="文章编辑" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/6587/image.png"/></li>
  <li><img width="240" alt="小册编辑" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/1864/image.png"/></li>
</ul>

## 项目运行

### 数据库

首先安装 `MySQL`，推荐使用 docker 进行安装。

```bash
docker run -d --restart=always --name wipi -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root mysql:5.7
```

然后在 `MySQL` 中创建数据库。

```bash
docker container exec -it wipi  bash;
mysql -u root -p root;
CREATE DATABASE  `wipi` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

### 本地运行

首先，clone 项目。

```bash
git clone --depth=1 https://github.com/fantasticit/wipi.git your-project-name
```

然后，安装项目依赖。

```bash
yarn
```

- 启动项目

```bash
yarn dev
```

前台页面地址：`http://localhost:3000`。
后台管理地址：`http://localhost:3001`。
服务接口地址：`http://localhost:4000`。

首次启动，默认创建管理员用户：admin，密码：admin（可在 `.env` 文件中进行修改）。
[PS] 如服务端配置启动失败，请先确认 MySQL 的配置是否正确，配置文件在 `.env`。在生产环境中需要在后台正确设置系统的地址，否则二维码无法正确识别。本地开发环境中，如未填域名地址，默认为空。

### 系统设置

<ul>
  <li><img width="240" alt="系统设置" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-13/FURY8457EB0K41T6ABMBCSP1N9HUUFAB/image.png"/></li>
  <li><img width="240" alt="前台页面" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-13/ICS41W05E4XRKLEAF9YO99A48CWGRP9X/image.png"/></li>
</ul>

项目初次启动时，需要在后台进行系统设置。随着内容的丰富，页面内容也会丰富起来。

### 配置文件

默认加载 `.env` 文件，生产环境会尝试加载 `.env.prod` 文件。

```bash
CLIENT_ASSET_PREFIX=/ # client 打包前缀地址（类似 webpack publicPath 配置）
ADMIN_ASSET_PREFIX=/ # admin 打包前缀地址

ADMIN_USER=admin # 默认管理员账户
ADMIN_PASSWD=admin # 默认管理员密码
DB_HOST=127.0.0.1 # 数据库地址
DB_PORT=3306 # 数据库端口
DB_USER=root # 数据库用户名
DB_PASSWD=root # 数据库密码
DB_DATABASE=wipi # 数据库名称
```

### 项目部署

生产环境部署的脚本如下：

```bash

node -v
npm -v

npm config set registry http://registry.npmjs.org

npm i -g pm2 @nestjs/cli lerna yarn

yarn
yarn run build
yarn run pm2

pm2 startup
pm2 save
```

### nginx 配置

采用反向代理进行 `nginx` 配置，**同时设置 `proxy_set_header X-Real-IP $remote_addr;` 以便服务端获取到真实 ip 地址**。

```bash
upstream wipi_client {
  server 127.0.0.1:3000;
  keepalive 64;
}

# http -> https 重定向
server {
  listen  80;
  server_name 域名;
  rewrite ^(.*)$  https://$host$1 permanent;
}

server {
  listen 443 ssl;
  server_name 域名;
  ssl_certificate      证书存放路径;
  ssl_certificate_key  证书存放路径;

  location / {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_cache_bypass $http_upgrade;
    proxy_pass http://wipi_client; #反向代理
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

## 资料

- next.js 源码：https://github.com/vercel/next.js
- next.js 文档：https://nextjs.org/
- nest.js 源码：https://github.com/nestjs/nest
- nest.js 文档：https://nestjs.com/


本项目使用 next.js、nest.js 和 MySQL 从 0 到 1 搭建了一个完整的前后端分离项目。

全栈开发实践：使用 next.js + nest.js 开发完整前后端分离项目

通过地图当前的视口、缩放登记，获取当前可以渲染的数据、被聚合的数据，减少单次渲染量，获取良好性能。

高德地图海量数据展示优化

# 欢迎使用 `Wipi` Markdown 编辑器

------

我们理解您需要更便捷更高效的工具记录思想，整理笔记、知识，并将其中承载的价值传播给他人，**Cmd Markdown** 是我们给出的答案 —— 我们为记录思想和分享知识提供更专业的工具。 您可以使用 Cmd Markdown：

> * 整理知识，学习笔记
> * 发布日记，杂文，所见所想
> * 撰写发布技术文稿（代码支持）

![图片](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-03-26/wipi-markdown.png)

除了您现在看到的这个 Cmd Markdown 在线版本，您还可以前往以下网址下载：

------

## 什么是 Markdown

Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，**粗体** 或者 *斜体* 某些文字，更棒的是，它还可以

### 1. 制作一份待办事宜 [Todo 列表](https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#13-待办事宜-todo-列表)

- [ ] 支持以 PDF 格式导出文稿
- [ ] 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
- [x] 新增 Todo 列表功能
- [x] 修复 LaTex 公式渲染问题
- [x] 新增 LaTex 公式编号功能

### 2. 书写一个质能守恒公式[^LaTeX]

$$E=mc^2$$

### 3. 高亮一段代码[^code]

```python
@requires_authorization
class SomeClass:
    pass

if __name__ == '__main__':
    # A comment
    print 'hello world'
```

### 4. 高效绘制 [流程图](https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#7-流程图)

```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
```

### 5. 高效绘制 [序列图](https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#8-序列图)

```seq
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
```

### 6. 高效绘制 [甘特图](https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#9-甘特图)

```gantt
    title 项目开发流程
    section 项目确定
        需求分析       :a1, 2016-06-22, 3d
        可行性报告     :after a1, 5d
        概念验证       : 5d
    section 项目实施
        概要设计      :2016-07-05  , 5d
        详细设计      :2016-07-08, 10d
        编码          :2016-07-15, 10d
        测试          :2016-07-22, 5d
    section 发布验收
        发布: 2d
        验收: 3d
```

### 7. 绘制表格

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机     | $1600 |   5     |
| 手机        |   $12   |   12   |
| 管线        |    $1    |  234  |

### 8. 更详细语法说明

想要查看更详细的语法说明，可以参考我们准备的 [Cmd Markdown 简明语法手册][1]，进阶用户可以参考 [Cmd Markdown 高阶语法手册][2] 了解更多高级功能。

总而言之，不同于其它 *所见即所得* 的编辑器：你只需使用键盘专注于书写文本内容，就可以生成印刷级的排版格式，省却在键盘和工具栏之间来回切换，调整内容和格式的麻烦。**Markdown 在流畅的书写和印刷级的阅读体验之间找到了平衡。** 目前它已经成为世界上最大的技术分享网站 GitHub 和 技术问答网站 StackOverFlow 的御用书写格式。


Wipi Markdown 编辑器

2. 书写一个质能守恒公式[^LaTeX]

本文接下来会一步一步模仿造一个低配版的[`Element 的对话框和弹框组件`](http://element.eleme.io/#/zh-CN/component/message-box)。

## Vue 单文件组件开发

当使用`vue-cli`初始化一个项目的时候，会发现 `src/components` 文件夹下有一个 `HelloWorld.vue` 文件，这便是单文件组件的基本开发模式。

```js
// 注册
Vue.component("my-component", {
  template: "<div>A custom component!</div>",
});

// 创建根实例
new Vue({
  el: "#example",
});
```

接下来，开始写一个 `dialog` 组件。

## Dialog

目标对话框组件的基本样式如图：

![dialog基本样式](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-04-16/dialog.png)

根据目标样式，可以总结出：

1. dialog 组件需要一个 `title` props 来标示弹窗标题
2. dialog 组件需要在按下 `确定` 按钮时 `发射` 出 `确定` 事件（即告诉父组件`确定`了）
3. 同理，dialog 组件需要 `发射` 出 `取消` 事件
4. dialog 组件需要提供一个插槽，便于自定义内容

那么，编码如下:

```html
<template>
  <div class="ta-dialog__wrapper">
    <div class="ta-dialog">
      <div class="ta-dialog__header">
        <span>{{ title }}</span>
        <i class="ios-close-empty" @click="handleCancel()"></i>
      </div>
      <div class="ta-dialog__body">
        <slot></slot>
      </div>
      <div class="ta-dialog__footer">
        <button @click="handleCancel()">取消</button>
        <button @click="handleOk()">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Dialog",

    props: {
      title: {
        type: String,
        default: "标题",
      },
    },

    methods: {
      handleCancel() {
        this.$emit("cancel");
      },

      handleOk() {
        this.$emit("ok");
      },
    },
  };
</script>
```

这样便完成了`dialog`组件的开发，使用方法如下：

```html
<ta-dialog title="弹窗标题" @ok="handleOk" @cancel="handleCancel">
  <p>我是内容</p>
</ta-dialog>
```

这时候发现一个问题，通过使用 `v-if` 或者 `v-show` 来控制弹窗的展现时，_没有动画！！！_，看上去很生硬。`教练，我想加动画` ,这时候就该 `transition` 组件上场了。使用 `transition` 组件结合 `css`能做出很多效果不错的动画。接下来增强 `dialog` 组件动画，代码如下:

```html
<template>
  <transition name="slide-down">
    <div class="ta-dialog__wrapper" v-if="isShow">
      
    </div>
  </transition>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true,
      };
    },

    methods: {
      handleCancel() {
        this.isShow = false;
        this.$emit("cancel");
      },

      handleOk() {
        this.isShow = true;
        this.$emit("ok");
      },
    },
  };
</script>
```

可以看到 `transition` 组件接收了一个 `name` props，那么怎么编写 `css` 完成动画呢？很简单的方式，写出两个
关键 `class` (css 的 className)样式即可：

```css
.slide-down-enter-active {
  animation: dialog-enter ease 0.3s;
}

.slide-down-leave-active {
  animation: dialog-leave ease 0.5s;
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
```

就是这么简单就开发出了效果还不错的动效，注意 `transition` 组件的 `name` 为 `slide-down` ,而编写的动画的关键 `className` 为 `slide-down-enter-active` 和 `slide-down-leave-active` 。

## 封装 Dialog 做 MessageBox

Element 的`MessageBox`的使用方法如下:

```js
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  type: "warning",
})
  .then(() => {
    this.$message({
      type: "success",
      message: "删除成功!",
    });
  })
  .catch(() => {
    this.$message({
      type: "info",
      message: "已取消删除",
    });
  });
```

看到这段代码，我的感觉就是*好神奇**好神奇**好神奇*（惊叹三连）。仔细看看，这个组件其实就是一个封装好的 `dialog` ,

![Element MessageBox效果](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-04-16/dialog-2.png)

接下来，我也要封装一个这样的组件。首先，整理下思路：

1. Element 的使用方法是 `this.$confirm` ，这不就是挂到 `Vue` 的 `prototype` 上就行了
2. Element 的 `then` 是确定，`catch` 是取消，`promise` 就可以啦

整理好思路，我就开始编码了：

```js
import Vue from "vue";
import MessgaeBox from "./src/index";

const Ctur = Vue.extend(MessgaeBox);
let instance = null;

const callback = (action) => {
  if (action === "confirm") {
    if (instance.showInput) {
      instance.resolve({ value: instance.inputValue, action });
    } else {
      instance.resolve(action);
    }
  } else {
    instance.reject(action);
  }

  instance = null;
};

const showMessageBox = (tip, title, opts) =>
  new Promise((resolve, reject) => {
    const propsData = { tip, title, ...opts };

    instance = new Ctur({ propsData }).$mount();
    instance.reject = reject;
    instance.resolve = resolve;
    instance.callback = callback;

    document.body.appendChild(instance.$el);
  });

const confirm = (tip, title, opts) => showMessageBox(tip, title, opts);

Vue.prototype.$confirm = confirm;
```

至此，可能会疑惑怎么 `callback` 呢，其实我编写了一个封装好的 `dialog` 并将其命名为 `MessageBox` ,
它的代码中，有这样两个方法:

```js
onCancel() {
  this.visible = false
  this.callback && (this.callback.call(this, 'cancel'))
},

onConfirm() {
  this.visible = false
  this.callback && (this.callback.call(this, 'confirm'))
},
```

没错，就是`确定`和`取消`时进行`callback`。我还想说一说`Vue.extend`,代码中引入了`MessageBox`,
我不是直接`new MessageBox`而是借助`new Ctur`，因为这样可以`定义数据(不仅仅是props)`，例如：

```js
instance = new Ctur({ propsData }).$mount();
```

这时候，页面上其实是还没有`MessageBox`的，我们需要执行:

```js
document.body.appendChild(instance.$el);
```

如果你直接这样，你可能会发现 `MessageBox` 打开的时候没有动画，而关闭的时候有动画。解决方法也很简单，
`appendChild`的时候让其仍是不可见，然后使用类这样的代码：

```js
Vue.nextTick(() => (instance.visible = true));
```

这样就有动画了。

## 总结

1. 通过 `transition` 和 `css` 实现不错的动画。其中，`transition` 组件的 `name` 决定了编写 `css` 的两个关键
   类名为 `[name]-enter-active` 和 `[name]-leave-active`
2. 通过 `Vue.extend` 继承一个组件的构造函数（不知道怎么说合适，就先这样说），然后通过这个构造函数，便可以
   实现组件相关属性的自定义（使用场景：js 调用组件）
3. js 调用组件时，为了维持组件的动画效果可以先 `document.body.appendChild` 然后 `Vue.nextTick(() => instance.visible = true)`

<style>
  .slide-down-enter-active {
    animation: dialog-enter ease 0.3s;
  }

  .slide-down-leave-active {
    animation: dialog-leave ease 0.5s;
  }

  @keyframes dialog-enter {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes dialog-leave {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-20px);
    }
  }
</style>
<style>
  .ta-dialog__wrapper {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1010;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .ta-dialog {
    position: relative;
    margin: 15vh auto 50px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    max-width: 60%;
    min-width: 20%;
  }
  .ta-dialog__header {
    padding: 15px;
    padding-bottom: 10px;
    font-size: 18px;
  }
  .ta-dialog__body {
    padding: 30px 20px;
    color: #606266;
    line-height: 24px;
    font-size: 14px;
    max-height: 60vh;
    overflow: auto;
  }
  .ta-dialog__footer {
    padding: 15px;
    padding-top: 10px;
    text-align: right;
    box-sizing: border-box;
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.4.0/vue.min.js" async defer onload="init()"></script>
<script>
  function init() {
    const MessgaeBox = Vue.component("Dialog", {
        template: `
        <transition name="slide-down">
        <div class="ta-dialog__wrapper" v-if="visible">
            <div class="ta-dialog">
            <div class="ta-dialog__header">
                <span>{{ title }}</span>
                <i class="ios-close-empty" @click="handleCancel()"></i>
            </div>
            <div class="ta-dialog__body">
                <slot></slot>
            </div>
            <div class="ta-dialog__footer">
                <button class="ant-btn" @click="handleCancel()">取消</button>
                <button class="ant-btn ant-btn-primary" @click="handleOk()">确定</button>
            </div>
            </div>
        </div>
        </transition>
        `,
        name: "Dialog",
        props: {
        title: {
            type: String,
            default: "标题",
        },
        },
        data() {
        return {
            visible: true,
        };
        },
        methods: {
        handleCancel() {
            this.visible = false;
            this.callback && this.callback.call(this, "cancel");
        },
        handleOk() {
            this.visible = false;
            this.callback && this.callback.call(this, "confirm");
        },
        },
    });
    const Ctur = Vue.extend(MessgaeBox);
    let instance = null;
    const callback = (action) => {
        if (action === "confirm") {
        if (instance.showInput) {
            instance.resolve({ value: instance.inputValue, action });
        } else {
            instance.resolve(action);
        }
        } else {
        instance.reject(action);
        }
        instance = null;
    };
    const showMessageBox = (tip, title, opts) =>
        new Promise((resolve, reject) => {
        const propsData = { tip, title, ...opts };
        instance = new Ctur({ propsData }).$mount();
        instance.reject = reject;
        instance.resolve = resolve;
        instance.callback = callback;
        instance.visible = false;
        document.body.appendChild(instance.$el);
        Vue.nextTick(() => (instance.visible = true));
        });
    const $confirm = (tip, title, opts) => showMessageBox(tip, title, opts);
    Vue.prototype.$confirm = $confirm;
    window.$confirm = $confirm
  }

  function deleteFile() {
    $confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        alert("删除成功");
      })
      .catch(() => {
        alert("取消操作");
      });
  }
</script>

## Demo

<button class="ant-btn" onclick="deleteFile()">点我测试</button>

```css
.slide-down-enter-active {
  animation: dialog-enter ease 0.3s;
}

.slide-down-leave-active {
  animation: dialog-leave ease 0.5s;
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.ta-dialog__wrapper {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1010;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.ta-dialog {
  position: relative;
  margin: 15vh auto 50px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  max-width: 60%;
  min-width: 20%;
}
.ta-dialog__header {
  padding: 15px;
  padding-bottom: 10px;
  font-size: 18px;
}
.ta-dialog__body {
  padding: 30px 20px;
  color: #606266;
  line-height: 24px;
  font-size: 14px;
  max-height: 60vh;
  overflow: auto;
}
.ta-dialog__footer {
  padding: 15px;
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
```

```js
const MessgaeBox = Vue.component("Dialog", {
  template: `
  <transition name="slide-down">
    <div class="ta-dialog__wrapper" v-if="visible">
      <div class="ta-dialog">
        <div class="ta-dialog__header">
          <span>{{ title }}</span>
          <i class="ios-close-empty" @click="handleCancel()"></i>
        </div>
        <div class="ta-dialog__body">
          <slot></slot>
        </div>
        <div class="ta-dialog__footer">
          <button class="ant-btn" @click="handleCancel()">取消</button>
          <button class="ant-btn ant-btn-primary" @click="handleOk()">确定</button>
        </div>
      </div>
    </div>
  </transition>
  `,
  name: "Dialog",
  props: {
    title: {
      type: String,
      default: "标题",
    },
  },
  data() {
    return {
      visible: true,
    };
  },
  methods: {
    handleCancel() {
      this.visible = false;
      this.callback && this.callback.call(this, "cancel");
    },
    handleOk() {
      this.visible = false;
      this.callback && this.callback.call(this, "confirm");
    },
  },
});
const Ctur = Vue.extend(MessgaeBox);
let instance = null;
const callback = (action) => {
  if (action === "confirm") {
    if (instance.showInput) {
      instance.resolve({ value: instance.inputValue, action });
    } else {
      instance.resolve(action);
    }
  } else {
    instance.reject(action);
  }
  instance = null;
};
const showMessageBox = (tip, title, opts) =>
  new Promise((resolve, reject) => {
    const propsData = { tip, title, ...opts };
    instance = new Ctur({ propsData }).$mount();
    instance.reject = reject;
    instance.resolve = resolve;
    instance.callback = callback;
    instance.visible = false;
    document.body.appendChild(instance.$el);
    Vue.nextTick(() => (instance.visible = true));
  });
const $confirm = (tip, title, opts) => showMessageBox(tip, title, opts);
Vue.prototype.$confirm = $confirm;
function deleteFile() {
  $confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      alert("删除成功");
    })
    .catch(() => {
      alert("取消操作");
    });
}
```

<button class="ant-btn" onclick="deleteFile()">点我测试</button>

本文接下来会一步一步模仿造一个低配版的 Element 
 的对话框和弹框组件

Vue 组件开发总结

在网络请求、耗时操作等异步场景下，一般都会给用户一个指示（如 loading 加载中指示器）。但是有时候异步操作可能并没有想象的那么耗时，比如一个 ajax 请求可能会在 200ms 内完成，也可能会超过 200ms 才能完成，如果不管三七二十一直接上 loading，反而对用户体验不好。

总结一下：

1. 在异步操作的开始和结束过程中，展示指示器
2. 异步操作耗时很短的话，不展示指示器

针对 `React` ，可以封装 `useAsyncLoading` hook，来完成这种操作。

## 使用方式

```ts
const [wrappedPromiseAction, loading] = useAsyncLoading(promiseAction, 200)
```

解释：针对 `promiseAction` 如果 *200ms* 内完成 `loading` 为 `false` ，反之为 `true`。

## 代码实现

```jsx
import React, { useState, useCallback, useEffect, useRef } from "react";

type PromiseAction = (...args: any[]) => Promise<any>;

function useAsyncLoading<A extends PromiseAction>(
  action: A,
  wait: number
): [A, boolean] {
  const timerRef = useRef(null);
  const [pending, setPending] = useState(false);
  const [loading, setLoading] = useState(false);

  const actionWithPending = useCallback(
    (...args: Parameters<A>) => {
      setPending(true);
      const promise = action(...args);
      promise.then(
        () => setPending(false),
        () => setPending(false)
      );
      return promise;
    },
    [action]
  );

  useEffect(() => {
    clearTimeout(timerRef.current);

    timerRef.current = setTimeout(() => {
      setLoading(pending);
    }, wait);

    return () => {
      clearTimeout(timerRef.current);
    };
  }, [wait, pending]);

  return [actionWithPending as A, loading];
}
```

## demo

```jsx
import React, { useState, useCallback } from "react";

const mockApi = (): Promise<string> => {
  const time = Math.random() * 400;
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("此次请求耗时: " + time + "ms");
    }, time);
  });
};

export default function App() {
  const [mock, loading] = useAsyncLoading(mockApi, 200);
  const [data, setData] = useState("");

  const getData = useCallback(() => {
    mock().then((res) => {
      setData(res);
    });
  }, [mock]);

  return (
    <div className="App">
      <button onClick={getData}>发起请求</button>
      {loading && <h1>loading</h1>}
      {!loading && <p>{data}</p>}
    </div>
  );
}
```

<iframe src="https://codesandbox.io/embed/black-haze-s97fs?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="black-haze-s97fs"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>



在网络请求、耗时操作等异步场景下，一般都会给用户一个指示（如 loading 加载中指示器）。但是有时候异步操作可能并没有想象的那么耗时，比如一个 ajax 请求可能会在 200ms 内完成，也可能会超过 200ms 才能完成，如果不管三七二十一直接上 loading，反而对用户体验不好。


异步过程中 loading 指示器的优化

缓存是性能优化中简单高效的一种方式。优先的缓存策略可以缩短网页请求资源的距离，减少延迟，并且可以缓存文件进行复用，还可以减少带宽，降低网络负荷。

对于一个数据请求来说，可以分为发起请求、后端处理、浏览器响应 3 个阶段，缓存可以在 1、2 两步优化性能。

## 缓存位置

### 1. service worker

service worker 是运行在浏览器背后的独立线程。使用 service worker 必须使用 https 传输协议。service worker 可以让用户自由控制缓存哪些文件，如何匹配缓存、如何读取缓存，同时缓存还是持久性的。

### 2. Memory Cache

memory cache 是内存中的缓存，主要包含当前页面中已经抓取到的资源。


### 3. Disk Cache

disk cache 是硬盘中的缓存。

### 4. Push Cache

Push Cache 是推送缓存，是 HTTP/2 中的内容，当以上 3 种缓存都没有命中时，才会被使用。该缓存在 会话（session）中存在，会话结束就会被释放。

### 小结

通常浏览器缓存分为 2 种：强缓存 和 协商缓存，并且缓存策略都是通过设置 HTTP Header 实现的。


## 缓存过程

- 浏览器每次发起请求，都会现在浏览器缓存中查找请求的结果和标识
- 浏览器每次拿到返回的请求都会将该结果和缓存标识存入缓存中

### 强缓存

强缓存：不会向服务器发生请求，直接从缓存中读取资源。在 chrome 控制台可以看到该请求返回 200 的状态码，并且 size 显示 from disk cache 或 from memory cache。
强缓存可以通过设置 2 中 HTTP Header 实现：expires 和 Cache-Control。

- expires<br>
    缓存过期时间，用来指定资源到期时间，是服务器的具体的时间点。expires=max-age + 请求时间，需要和 last-modified 结合使用。expires 是 HTTP/1 的产物，受限于本地时间，修改本地时间，可能会导致缓存失效。
- cache-control<br>
    cache-control 可以在请求头或响应头中设置，可以组合使用多种指令。
    - public：所有内容都会被缓存
    - private: 所有内容只有客户端可以缓存
    - no-cache: 不是说浏览器不使用缓存，而是先确认下数据和服务器是否一致。也就是使用 etag 或者 last-modified 控制缓存。
    - no-store：所有内容都不缓存，不使用强缓存也不使用协商缓存
    - max-age: 表示缓存内容在多久后失效
    - s-maxage: 同 max-age，但是只在代理服务器生效（比如 cdn）
    - max-stale: 能容忍的最大过期时间
    - max-fresh: 能容忍的最小新鲜度

expires 是 HTTP 1.0 的产物，cache-control 是 HTTP 1.1 的产物，两者同时存在时，cache-control 优先级高些。

### 协商缓存

强缓存判断缓存是否超出某个时间或者范围，但是不关心服务器是否已经更新内容。为了获取服务器更新，就需要使用协商缓存。

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器决定是否使用缓存。主要有 2 中情况：

- 协商缓存生效，返回 304 和 no modified
- 协商缓存失效，返回 200 和 请求结果

协商缓存通过 2 中 HTTP Heeader 设置：last-modified 和 etag。

#### last-modified 和 if-modified-since

浏览器在第一次访问资源时，服务器返回资源的同时，在 响应头添加 last-modified，值是这个资源在服务器上的最后修改时间。

浏览器下一次请求，服务器检测到 last-modified 的值，再添加个 if-modified-since 值是 last-modified 的值。服务器再次收到请求，会根据 last-modified-since 的值于服务器中这个资源的最后修改时间对比。相同 304，如果 if-modified-since 的值比服务器上资源最后修改时间小，返回新的资源和 200。


last-modified 存在的弊端：

- 如果在本地打开缓存文件，即使没有改内容，last-modified 也会被修改，服务器就不能命中缓存
- last-modified 只能以秒计时，如果在不可感知的时间内修改，服务器还是会认为命中缓存了

因为根据文件修改时间决定缓存命中有欠缺，所以根据文件内容是否修改， HTTP 1.1 出现了 etag 和 if-none-match。


#### etag 和 if-none-match

etag 是服务器响应请求时，返回当前资源文件的一个唯一标识（有服务器生成），只要资源有变化，etag 就会重新生成。

浏览器下一次请求时，只需要把上一次 etag 的值写到 if-none-match 中，服务器再比较 if-none-match 和当前资源的 etag 是否一致。


#### 对比

精度上，etag 优于 last-modified。

Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器生成的Last-Modified也有可能不一致。

- 在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
- 在优先级上，服务器校验优先考虑Etag

### 小结

强缓存优先于协商缓存，若强缓存生效则直接使用缓存，若不生效使用协商缓存（last-modified/if-modified-since 和 etag/if-none-match）。协商缓存由服务器决定是否使用缓存。使用缓存返回 304，不使用 返回 200 和 新的资源。

## 应用

###  频繁变动的资源

> cache-control: no-cache

通过设置 no-cache 使浏览器每次都请求服务器，然后配合使用 etag 或者 last-modified 协商缓存。

### 不常变化的缓存

> cache-control: max-age=315360000

通过设置一个很大的过期时间，浏览器就会使用强缓存。而为了解决更新的问题，就需要在文件名(或者路径)中添加 hash， 版本号等动态字符，之后更改动态字符，从而达到更改引用 URL 的目的，让之前的强制缓存失效 (其实并未立即失效，只是不再使用了而已)。


## 用户行为对浏览器缓存的影响

- 打开网页，输入URL：查找 disk-cache，有就用，没有发请求
- F5 刷新：优先查找 memory-cache ，然后 disk-cache
- ctrl+ f5 （强制刷新）：浏览器不使用缓存，所有请求头加上 cache-control: no-cache


缓存是性能优化中简单高效的一种方式。优先的缓存策略可以缩短网页请求资源的距离，减少延迟，并且可以缓存文件进行复用，还可以减少带宽，降低网络负荷。


浏览器缓存机制

## 实现原理

在 typescript 中可以通过数组的 `length` 属性读取出值。通过构造数组，进而实现加减乘除。

```ts
type A = [1, 2, 3]['length']; // 3
```

![图片](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-11-01/%E6%95%B0%E7%BB%84%E9%95%BF%E5%BA%A6-1.jpg)

## 生成数组

目标：通过泛型实现生成指定数组，效果为：`type 数组<3> = [1, 1, 1]`。

```ts
type 生成数组<填充数字 extends number, 数组长度, 已有数组 extends number[]> = 已有数组['length'] extends 数组长度 ? 已有数组 : 生成数组<填充数字, 数组长度, [填充数字, ...已有数组]>
type 数组<数组长度 extends number> = number extends 数组长度 ? 1[] : 生成数组<1, 数组长度, []>
```

![图片](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-11-01/%E6%95%B0%E7%BB%84-B.jpg)

![图片](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-11-01/%E6%95%B0%E7%BB%84-c.jpg)

## 实现加法

```ts
type 加法<a extends number, b extends number> = [...数组<a>, ...数组<b>]['length']
```

![图片](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-11-01/%E6%95%B0%E7%BB%84-%E5%8A%A0%E6%B3%95.jpg)

## 实现减法

减法的运算为：差 = 被减数 - 减数，转换为数组则为：差值部分 = 整体部分 - 减去部分，即 整体部分 = 减去部分 + 差值部分（被减数 = 减数 + 差）。

```ts
type 减法<a extends number, b extends number> = 数组<a> extends [...减数部分: 数组<b>, ...剩余部分: infer 差值部分] ? 差值部分['length'] : never
```

![图片](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-11-01/%E6%95%B0%E7%BB%84-%E5%87%8F%E6%B3%95.jpg)

## 实现乘法

乘法的运算为：m + n，转换为数组思路为 n 个长度为 m 的数组相接的新数组的长度。

```ts
type _乘法<a extends number, b extends number, pre extends number[]> = b extends 0 ? pre['length'] : _乘法<a, 减法<b, 1>, [...数组<a>, ...pre]>
type 乘法<a extends number, b extends number> = _乘法<a, b, []>
```

![图片](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-11-01/Xnip2021-11-01_10-03-04.png)

## 实现除法

除法的运算为：m / n，转换为数组思路为长度为 m 的数组由多少个长度为 n 的数组组成。

```ts
type _除法<a extends number, b extends number, pre extends Array<number[]>> = a extends 0 ? pre['length'] : _除法<减法<a, b>, b, [数组<b>, ...pre]>
type 除法<a extends number, b extends number> = _除法<a, b, []>
```

![图片](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-11-01/Xnip2021-11-01_10-03-2%E9%99%A4%E6%B3%95.png)

## 完整代码

```ts
type A = [1, 2, 3]['length']; // 3

type 生成数组<填充数字 extends number, 数组长度, 已有数组 extends number[]> = 已有数组['length'] extends 数组长度 ? 已有数组 : 生成数组<填充数字, 数组长度, [填充数字, ...已有数组]>
type 数组<数组长度 extends number> = number extends 数组长度 ? 1[] : 生成数组<1, 数组长度, []>

type B = 数组<3>
type C = 数组<4>['length']


type 加法<a extends number, b extends number> = [...数组<a>, ...数组<b>]['length']
type D = 加法<3, 4>


type 减法<a extends number, b extends number> = 数组<a> extends [...减数部分: 数组<b>, ...剩余部分: infer 差值部分] ? 差值部分['length'] : never
type E = 减法<4, 3>


type _乘法<a extends number, b extends number, pre extends number[]> = b extends 0 ? pre['length'] : _乘法<a, 减法<b, 1>, [...数组<a>, ...pre]>
type 乘法<a extends number, b extends number> = _乘法<a, b, []>

type F = 乘法<3, 2>


type _除法<a extends number, b extends number, pre extends Array<number[]>> = a extends 0 ? pre['length'] : _除法<减法<a, b>, b, [数组<b>, ...pre]>
type 除法<a extends number, b extends number> = _除法<a, b, []>

type G = 除法<8, 2>
```


类型体操：使用 typescript 类型系统实现自然数的加减乘除法。

使用 TS 类型实现自然数加减乘除

对于 `next.js` 应用，生产环境打包时，可以使用 `preact` 替代 `react` 来优化构建体积。在 `next.config.js` 添加配置：

```js
webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        'react': 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      });
    }

    return config;
}
```

1. 使用 `preact`

![preact.jpg](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-10-07/GMCBF3SDVE41GYA0A1BXHT/preact.jpg)

2. 使用 `react`

![react.jpg](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-10-07/GMCBF3SDVE41GYA0A1BXQC/react.jpg)


对于本站，大约可以缩减 `32KB` 的体积。


在生产环境打包时，使用 preact 替代 react 优化构建体积。

使用 preact 优化 next.js 构建体积

## 一、关于工作

### 1. 工作是什么

刚实习的时候，想的很简单--希望将来工作可以月薪过万。如今还是并不快乐，也许是因为钱不够，也许是认识到在一定阶段内，个人能力所能得到回报就是这些，这样就会想一些其他的“虚”的。

子曰．“君子不器。”世界不会因平凡而变得精彩，与其平平淡淡地活着，不如多做多看，也许能做出一番自己的贡献。现在有很多人嘲笑说，互联网公司只会从小商小贩嘴里抢食，永远都是在做**模式创新**，而不是硬核的**科技创新**。但是我相信**外卖**也好、**买菜**也好，一定程度上是驱动了社会进步的，每个公司的使命是不一样的，也是能够为人民的生活带来美好的。

所以工作也好，生活也好，对个人来说：

1. 不断地自我塑造，打造“自己”这个产品
2. 不断地驱动自我进步，努力实现自我价值

### 2. 作为工程师

也许工程师本质上就是计算机，而计算机的组成部分，只有 4 个：**输入信息、存储信息、处理信息、输出信息**。业务本身是多变的，做什么其实不重要，作为工程师，要能够把在业务中所遇到的“业务难题、复杂链路、技术难点”等抽象，作为自己成长的养料，让自己这台计算机持续学习，持续优化。

### 3. 作为团队成员

团队，本质上构建了一个计算集群，而我们就是其中一个计算节点。对于团队来说，个人积极地完成输出就是最大的贡献，这个输出应当包含：学习、沉淀、分享、负责和影响。努力做最好的自己，认真生活，快乐工作，分享传播，和伙伴们共同进步。

## 二、关于成长

### 1. 永存的困惑

毫不夸张地说，这 3 年我没有不困惑的时候。面对困惑，我只能不断寻找答案，不断提升自己的认知，多读书，多看前辈的思考（计算机系列图书，大多都会写到**站在巨人的肩膀上**），去探知困惑的本质。这也许是一个漫长的过程，这时候可能就需要找点事干，比如看点代码、写点代码，让自己安静下来。

### 2. 历史与现实

从古至今很多事情本质上是没有变化的，历史的经验还是很有现实指导意义的。世界不是表面上那么简单的，不仅仅只是黑白对立面，好与坏而已，要辩证地去看待。历朝历代，风气云涌，都是摸着石头过河，都是不断探索，艰难前行，在这个历程中要接受现实，不断调整，不要忘了初心即可。

### 3. 发展与未来

对于个体来说，永远要把自我提升作为第一位。阿里常说，今天最好的表现，是明天最低的要求（听着有些 PUA）,自我整体上还是需要不断超越的，要找到自己成长的方法。对我来说，整体上还是分为：**硬技能** 和 **软技能**。

#### 3.1 硬技能

对于**硬技能**，就是自身的技术实力，整体上的规划还是以下方面的持续学习。

- 操作系统
- 计算机网络
- 计算机组成原理
- 数据结构与算法
- 数据库系统（MySQL、MonogoDB 等）
- 编程语言的学习与精进
- Devops

#### 3.2 软技能

做事的永远是人，人与人之间是要沟通合作的。为了达到良好的沟通合作效果，需要个体具备：抽象能力、沟通能力、演讲能力、协作能力等。对此，我目前的感悟不多，也是在不断学习。

## 三、关于价值观

现在各行各业都很卷，年轻人们貌似也很难受（卷也是年轻人在卷，矛盾🐱），但是又好像无解，我认为这是价值观的原因。价值观是一种精神力量，一定程度上影响了我们如何看待事物、如何做事。

从国家到个人，组织到个人，团队到个人，无外乎都有文化价值观这种东西，比如实现中华民族伟大复兴，满足人民对美好生活的向往。我相信每一个人都是向往美好生活的，但是做事要付出代价的，为了美好生活，是需要付出努力的（而且努力不一定有结果），所以需要文化价值观这一精神力量来驱动个体前进。文化价值观本身没有错，做事的是人，你怎么做，和你最后获得什么样的结果，一定是有关系的。

阿里对员工的要求是：**聪明、自省、乐观、皮实**，同时也需要我们具备三个主义：**理想主义、现实主义、乐观主义**。遇到一些难受的事情，可以多想想应该用怎样的价值观去对待。

愿我们都能够，**面对现实，勇敢追求**。


时间总是过得飞快，从 18 年到 21 年，转眼就工作 3 年了。按照阿里 1 年新、3 年醇、5 年陈的说法，提笔写一下 3 年的感受。

写在工作 3 年

本文依赖 `sqlite3` 和 `fts5`，基于 `better-sqlite3` 实现。

## TL,DR

使用 sqlite3 新建数据库，然后建表，然后插入数据，然后查询，即可。

```js
const Database = require('better-sqlite3');

// 1. 建库
const db = new Database('./wipi.db', { verbose: console.log });

// 2. 建表
db.exec(`
CREATE VIRTUAL TABLE article USING FTS5(id, title, summary, content);
`);

// 3. 插数
const insert = db.prepare('INSERT INTO article (id, title, summary, content) VALUES (@id, @title, @summary, @content)');

// 4. 查询
const query = db.prepare(`
SELECT *
FROM article
WHERE article MATCH '关键字'
ORDER BY rank;
`);
query.all()
```

## 中文搜索

如果需要实现中文的全文搜索，需要引入中文分词插件，涉及到的方法为：`db.loadExtension`。以 `https://github.com/wangfenjin/simple` 为例，下载各平台的 release 包，然后加载扩展，实现中文搜索。


```js
// 1. 加载扩展
db.loadExtension(''); // 注意为绝对路径

// 2. 建表时指定分词器
db.exec(`CREATE VIRTUAL TABLE IF NOT EXISTS article USING fts5(id, title, summary, content, status, tokenize = 'simple'`);

// 3. 查询时指定匹配方法
const query = db.prepare(`
    SELECT *
    FROM article
    WHERE article match simple_query('关键词')
    ORDER BY rank;
`);

query.all();
```


本文依赖 sqlite3 和 fts5，基于 better-sqlite3 实现全文搜索。

基于 sqlite3 实现全文搜索

<h2 align="center" style="border: 0">国家有希望，人民有信仰，送别真正的国士。</h2>

国家有希望，人民有信仰，送别真正的国士。

深刻缅怀袁隆平

## 此生理想、近期规划、今日功课

> 此生理想、近期规划、今日功课。 --马鹤凌（马英九父亲）

1. 理想要远，不怕够不着，就怕已经快够着了

大多数人在当下并不能真正地想出自己的理想是什么。**不刻意去追寻理想，活在当下**也许是一个好的实践。专注于解决问题，积累经验。也不要给自己设限，用于尝试多种可能，逐步排除掉自己不想要的。

2. 规划要近，太远会觉得还有很多时间

不做远期规划，不然容易变成一直拖着。做短期内的计划，保持节奏让工作和学习有序前行。

3. 行动要在现在

一个人很有可能要工作 20 年以上，这是一场长跑。在这场长跑中，很多当下的问题只是浪花一朵，比如晋升、绩效、涨薪等，很多看似不可能的行动变为可能，比如掌握 n 种编程语言、研究内核等。为了跑好这场长跑，还是要做好每日功课。

- 给自己一个安静的环境，省出学习时间
- 持续学习
- 健康的体魄

## 学习和成长

一个人很有可能要工作 20 年以上，现在才工作了多久？作为技术同学，所掌握的某个技术很有可能一夜之间就过时了，要居安思危，逃离舒服区。

关于学习，基础知识很重要，要关注现实和实用。可以大量购买和阅读书籍，同时做好知识管理。

关于成长，抛出一个问题：3年开发经验，是学习了1年，重复工作了2年，还是有一定的进步？

## 执行

### 要事优先

讲事情按照**重要**和**紧急**分为4个象限。

```bash
                  紧急
                   |
                   |
                   |
                   |
不重要 <--------------------------> 重要
                   |
                   |
                   |
                   |
                 不紧急
```

用自己价值观来判断，不要在不重要的事情上浪费时间。

### 无视不重要的事情

```bash
                  紧急
                   |
                   |
                   |
                   |
                   --------------> 重要
                   |
                   |
                   |
                   |
                 不紧急
```

**重要但不紧急**的事情迟早会变成**重要且紧急**的事情，所以大部分时间应该花在**重要不紧急**的事情上，不要等到紧急的时候去**救急**。

### 目标分解

在执行时，目标往往很大，需要进行适当的分解，以便执行。没有分解的目标，很难有阶段性成果，会发现一直在做一件事，然后还做不好。任务一定要具体、可量化、可执行。


## 参考

1. [⾼⼯的个人发展规划](https://speakerdeck.com/baidufe/gong-cheng-shi-de-ge-ren-fa-zhan-gui-hua)
2. [About Time and Knowledge Management](https://github.com/zenany/zenany.github.io/blob/master/_posts/about_time_and_knowledge_management.md)




关于时间管理和知识管理，不要停止思考。

关于个人发展

此生理想、近期规划、今日功课

Unix 差不多有数千个不同的程序，这意味着可以输入数千条不同的命令。

## 在系统中查找程序

可以使用 `which` 查找命令的存储文件位置。

```shell
$ ~ which date
/bin/date
```

`which` 命令还有一个备用命令 `type`。

```shell
$ ~ type date
date is /bin/date
```

## 停止程序

一般情况下可以使用 `q` 或者 `quit` 停止程序。也可能需要通过 `^D（<Ctrl-D>）`、`^C<Ctrl-C>`或者 `<Delete>` 按键停止程序。

## 显示时间和日期

`date` 是所有 Unix 命令中的重要命令之一。

```shell
$ ~ date
2021年 5月19日 星期三 20时45分21秒 CST
```

Unix 系统中还有一个 `time` 命令，用于测量程序的运行时间。

从本质上讲，Unix 并没有运行在本地时间上。所有的 Unix 都使用协调世界时（Coordinated Universal Time，UTC），格林威治标准时间的现代名称。为了显示 UTC 时间，可以使用：

```shell
$ ~ date -u
2021年 5月19日 星期三 12时46分23秒 UTC
```

## 显示日历

### 显示当前月份日历

```shell
$ ~ cal
      五月 2021
日 一 二 三 四 五 六
                   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 26 27 28 29
30 31
```

### 显示某一年的日历

```shell
{} ~ cal 1998
# 太多不展示了，可以自己试一下
```

### 显示某年某月日历

```shell
$ ~ cal 3 2021
      三月 2021
日 一 二 三 四 五 六
    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 26 27
28 29 30 31
```

### 查看某一日是一年中的第几天

在 `cal` 之后键入 `-j` 即可。

```shell
$ ~ cal -j
          五月 2021
 日  一  二  三  四  五  六
                        121
122 123 124 125 126 127 128
129 130 131 132 133 134 135
136 137 138 139 140 141 142
143 144 145 146 147 148 149
150 151
```

### 判断某一年是否为闰年

如果 12 月以第 366 天结束，那么这年就是闰年。

```shell
$ ~ cal -j 12 2008
         十二月 2008
 日  一  二  三  四  五  六
    336 337 338 339 340 341
342 343 344 345 346 347 348
349 350 351 352 353 354 355
356 357 358 359 360 361 362
363 364 365 366
```

## Unix 提醒服务

Unix 有一个 `calendar` 命令，与 `cal` 完全不同，它用于创建包含重要日期和消息的文件用于提醒服务。使用该程序，只需创建一个名为 `calendar` 的文件，然后在文件所在位置运行 `calendar` 命令即可。

```shell
$ touch calendar
$ echo "May 19 Zhao's test" >> calendar;
$ calendar
```

## 查看系统信息

### uptime

`uptime` 用于显示系统以及运行多长时间。

```shell
$ uptime
21:02  up  7:38, 2 users, load averages: 1.38 1.45 1.55
```

### hostname

`hostname` 用于查看计算机的名称。

```shell
$ hostname
zhaoxudeMacBook-Pro.local
```

### uname

`uname` 用于显示操作系统的名称。

```shell
$ uname
Darwin
```

添加 `-a` 选项可以得到更多的信息。

## 查看用户信息

- `users`：显示当前登录系统的所有用户表示
- `who`：显示比 `users` 更多的信息（终端名称、登录时光会见）
- `w`：含义为 `who is doing what`

## 提醒何时离开：leave

可以使用 `leave` 命令提醒何时离开。

```shell
leave 1030 # 在特定时间 10:30 离开
leave +15 # 15分钟后离开
```

比如，设定 5 分钟后离开。

```shell
$ ~ leave +5
Alarm set for 2021年 5月19日 星期三 21时15分29秒 CST. (pid 7999)
$ ~ Just one more minute!
Time to leave!
```


Unix 中可以立即使用的程序（一）

## 计算机的组成部分

- 输入（信息）
- 存储（信息）
- 处理（信息）
- 输出（信息）

这就是计算机的组成部分。


## 电路和逻辑

每个计算机的输入输出实际上都是信息，都能通过电子信号的开/关来表示（也就是 1 和 0）。计算机需要改变输入的信息，为了这个，使用上百万个很小的电子元件来组成电路。电路之间组合形成逻辑运算。

## 数据和二进制

### 二进制

二进制只有两个数字：0、1。相对于十进制，每进一位乘 2 即可。

### 数据

所有的数据都可以转换成二进制数字来表示，也就是 1 和 0，然后在计算机内部转换成电信号。

## 硬件和软件

计算机设备里面的一大堆电路、芯片、电线、扬声器等就是硬件。其他你在计算机设备里看不到的就是软件，也就是计算机上的所有程序、运行的代码等。
计算机通过**操作系统**的特殊程序来管理软件如何使用硬件。

## 存储、CPU、输入和输出

所有的计算机都在做同样的 4 件事：输入信息、存储信息、处理信息、输出信息。每一件事通过不同的部分来完成。

1. 输入设备从外部世界获取输入，并转换为二进制信息
2. 存储来保存这些信息
3. CPU 来处理信息
4. 输出设备获取信息，转换为物理输出

## 总结

无论你用计算机做什么，计算机所做的都是：从物理世界输入信息，存储和处理信息，输出到物理世界。



无论你用计算机做什么，计算机所做的都是：从物理世界输入信息，存储和处理信息，输出到物理世界。


计算机工作原理

## IP 地址和 DNS

### IP地址

IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。

联想到物理世界，如果需要快递送上门，需要填写你家的具体地址才可以，IP地址标记了互联网中每一个节点的地址。

### DNS

IP地址是一串数字（形如：127.0.0.1），难以记住这么多节点的地址，所以需要网址（形如：www.baidu.com ）这种更加语义化的名称来记忆。
为了完成网址到IP地址的映射，计算机就需要使用 DNS 查询网络名称，获取对应 IP 地址。

## 数据包、路由和可靠

互联网如何传递信息?

### 数据包

现实生活中发射火箭，需要将火箭运输到发射中心。但是火箭的实际体积非常大，所以可能的情况是：火箭被拆分，然后由多个车辆运输到指定地点，到发射中心后再组装。

在互联网中，传递大图、视频等到另一个计算机，数据量也是很大的，所以数据都会被拆分成多个数据包进行传递。

### 路由

将数据拆分成多个数据包后，每个数据包都有它的来源和去向的互联网地址。这时候，通过称为路由器的特殊计算机就像流量管理器一样，可以使数据包顺利通过网络。

路由器用于跟踪发送数据包的多条路径，根据数据包的目的 IP 地址选择最便宜（最便宜不是说成本，而是时间和政治等多个非技术因素）的可用路径。


### 可靠

通常，数据传输的最佳路径并不一定是最直接的，会有多个路径选择，这样可以保证即使发生了一些错误（比如其中几条路径断了），也可以继续发送数据包（走其他路）。这就是互联网的最基本原则--可靠。

数据包传输到目的地址后，TCP 会对数据包进行签收组装，如果发现缺失，会通知源地址重新发送这些数据包。

## 电话线、网线和 WIFI

大图或视频是如何从一台设备传输到另一台设备呢？通过互联网，用来传递信息的现实物理系统。

互联网类似现实生活的邮政服务，但是在传送的物理层面上不同，互联网使用二进制（0 和 1）传递数据。现在我们已经可以利用**电力**、**光**和**无线电波传**递二进制数据。

因为光的传播速度很快，而且信号衰减很弱（举个栗子：你开始干劲十足要学习，但是没过一会蔫了，没精神了，你的衰减速度就很强，不可靠🐶），所以在世界范围内铺设了大量的海底光缆。

如果不使用线路传输，进行无线传输，一般都是用无线电波信号来传递，设备把二进制数据转换成无线电波不同的频率，接收端收到后再转换回二进制数据。


## 加密和公钥

互联网是一个开放的系统，但是我们可能会使用它传输一些私密数据（比如：银行卡密码）。为了不让他人得知你的银行卡密码，就需要对数据进行加密输出，接收方再进行解密得到正确的银行卡密码。

### 对称加密

**当发送方和接收方都使用相同的秘钥进行加解密时，称为对称加密。**
举个例子，小红和小明约定将数字 +5 进行传输，小红要把数字 2 告诉小明，她对着小明大喊数字是 7 （其他人听到的是 7），但是小明知道数字被 +5 了，解密（7 - 5）后得知小红想说的是 2。

### 非对称加密

但是，互联网是开放的，不可能让单独的两台机器私下约定秘钥，所以计算机使用**非对称加密**，即公钥可以与任何设备交换不共享的私钥，公钥用于加密数据，但是只有访问私钥的设备才能解密。
举个例子，你家的邮箱槽口是公开的，任何人都可以放入邮件，但是只有你自己有钥匙打开这个邮箱，读取别人的邮件，同样的你也可以将邮件放入别人的邮箱，整个过程，任何人都没有对方的邮箱钥匙（这个例子中，槽口是公钥，钥匙是私钥，放进去以后，别人没钥匙，不知道邮件内容是啥）。

## 网络安全与犯罪

网络犯罪带来了巨大的社会问题，可能是个人的、经济的，甚至是国家安全问题。比如，数亿个信用卡号码被盗。也行下一场世界大战不是用传统武器，而是通过计算机切断国家的供水、能源和运输系统。

计算机病毒是一种可执行程序，通常是无意中安装的，它们会伤害用户和他们的计算机。那么病毒是如何进入你的计算机的呢？

- 诱使受害者安装一个程序，欺骗程序的目的，比如伪装成安全更新程序
- 计算机存在漏洞，病毒可以在不需要授权的情况下自行安装

病毒进入计算机后，可以读取、删除文件，控制其他程序，甚至允许其他人远程操作你的电脑。

### 分布式拒绝服务

利用计算机病毒，黑客可以占领全球数百万计的计算机，然后利用它们组成一支数字大军，也就是僵尸网络，攻击和摧毁网站，这就是分布式拒绝服务。拒绝服务是指用过多的请求去淹没一个网站，当攻击来自多个计算机时，称之为分布式拒绝服务。

### 钓鱼诈骗

网络罪犯常用的另一个手段是发送大量垃圾邮件（多种手段，比如：模仿官方网站/钓鱼网站
、诱使点击短信链接等），试图欺骗人们分享敏感的个人信息，这就是网络钓鱼诈骗。

### 个人防护

大多数计算机犯罪并不是系统软件漏洞，而是个人信息防护没有做到位，无意中泄露了隐私敏感信息，做好个人防护还是很重要的。

- 使用强密码，不要使用弱密码，比如你的名字、生日等
- 访问网址时，检查网址是否正确，防止进入钓鱼网站
- 经常安装系统更新，不要不更新
- 不要安装不信任的软件
- 不要乱点短信中的链接

## 搜索引擎如何工作

互联网是由多个网页所连接而成的网，网页间通过超链接彼此相连。搜索引擎通过名为**蜘蛛**的程序在网页中爬行，搜集网页中的信息。蜘蛛每访问一个页面，便会顺着页面中的超链接去访问另一个页面，同时将收集到的信息存到**搜索索引**的特殊数据库。

当你使用搜索引擎提问时，搜索引擎会根据问题到搜索索引中查找包含这些字的网页清单，这样便会得到数以百万计的网页，所以需要对网页进行排序。每个搜索引擎都会使用自己的算法，对网页进行排序。比如，搜索引擎可能会检查你搜寻的字是否出现在网页的标题上，这些词是否彼此相连。

## HTTP 和 HTML

打开浏览器，输入网址，访问网页，那么网络浏览器是如何工作的？

当你在浏览器中输入一个地址，并点击 enter 之后，你的计算机就开始与称之为服务器的另一台计算机对话（这个距离通常是数千公里），服务器通过称之为**HTTP**的语言与你的计算机对话。然后服务器将**HTML**代码返回给你的计算机，你便可以在你的浏览器看到网页。


## 总结

HTTP 和 DNS 管理着 HTML 、媒体文件或 Web 上的任何内容的发送和接收。为了完成数据的发送和接收，TCP/IP和路由器网络，以小数据包的形式分解和传输信息。这些数据包本身由二进制序列组成，序列分别为 1 和 0，并通过电线、光纤和无线网络实际发送。


HTTP 和 DNS 管理着 HTML 、媒体文件或 Web 上的任何内容的发送和接收。为了完成数据的发送和接收，TCP/IP和路由器网络，以小数据包的形式分解和传输信息。这些数据包本身由二进制序列组成，序列分别为 1 和 0，并通过电线、光纤和无线网络实际发送。

互联网工作原理

## 首屏时间定义

小程序启动流程：

点击小程序图标 → 小程序启动 → 页面开始加载 → 页面主要框架加载完成 → 图片及资源下载 → 页面完全加载

其中，从点击小程序图标开始到页面主要框架加载完成是首屏启动时间。

## 优化治理

首屏启动时间分为小程序启动和页面加载完成两阶段，需要分开治理优化。

![首屏加载时机](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-12-08/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A6%96%E5%B1%8F%E5%8A%A0%E8%BD%BD.png)

### 小程序启动阶段

小程序框架启动主要包括小程序信息及环境准备、代码包下载和代码编译三个主要步骤。对开发者来说都是黑盒实现，只能根据官方文档和开发经验来总结实际的影响点。目前来看，从开发者角度来说，就是减少发版频次。因为发版会导致小程序启动时需要更新信息，并有阻塞逻辑。同时，代码包下载和编译受大小影响，需要控制代码体积。

### 首屏渲染阶段

#### 1. 初始执行优化

根据启动阶段的必要性，建立优先级机制：

- 阻塞首屏渲染的逻辑同步执行
- 不影响首屏渲染的逻辑延迟执行

比如，通过 wx:if 控制非首屏组件延迟加载（如各类弹窗、挂件），在首屏渲染完成后再加载渲染，不仅可以节省组件初始化耗时，还可以减少首屏期间网络请求和 setData。此外，上报接口、非首屏依赖 SDK 等非首屏依赖项延迟执行。

#### 2. 数据加载优化

##### 1. 缓存数据读取

在组件 attached 阶段通过 wx.getStorageSync 读取并使用缓存进行渲染

##### 2. 接口请求优化

在 app 的 onLaunch 阶段对数据进行预加载，因为从 app onLaunch 到页面 onLoad 会需要几百毫秒耗时

##### 3. 接口耗时优化

主要通过接口合并、数据精简、域名合并等操作提升端到端耗时

#### 3. 页面渲染优化

小程序采用双线程渲染模型，逻辑层通过 setData 将数据发送到视图层，视图层对比前后差异，更新 DOM。setData 受次数和数据量影响，WXML 受 DOM 节点数量和层级影响。

##### 1. setData

控制数据量（非渲染数据不要放到 data 里），延迟执行非首屏的 setData，合并 setData 来优化次数等。

##### 2. WXML

删除冗余节点，优化节点层级。

##### 3. 图片

C 端业务往往会使用大量图片。图片本身所要占据的内存也比较大，可以对图片进行压缩裁剪，缓存（减少网络请求及带宽消耗）以及图片 lazyload，同时可以结合存储服务（如 s3）对图片进行压缩、裁剪，以及使用 webp 格式。

## 技术手段

### setData 的优化

setData 方面的优化只能从次数和数据量来入手。次数优化的手段：收集一段时间内的 setData 合并成一次 setData；数据大小的优化：对 setData 提交的数据和之前的数据进行 diff，diff 成形如：`this.setData({ 'a.b.c': 'newVal' })` 进行精准更新。为此，可以劫持微信的 `setData`，为其加上 `diff` 和调度更新的能力。

#### 调度手段

横向调研了几个开源框架的调度方案：

- Taro3：setTimeout 0 进行合并 setData
- Wepy2 和 Mpvue：使用 throttle 50 进行合并 setData
- MPX：使用 Promise.then 进行合并 setData

结合真机测试数据，最终选择了 setTimeout 的合并调度 setData 策略。

#### 编码实现

1. 对 data 进行 diff，控制数据量
2. 减少 setData 次数，作合并
3. onReady 之前的 setData 统一合并


##### diff

```js
const OBJECT_TYPE = '[object Object]';
const ARRAY_TYPE = '[object Array]';

const getType = obj => Object.prototype.toString.call(obj);

const initPath = data => {
    if (getType(data) !== OBJECT_TYPE) return;
    for (const item in data) {
        if (/\w+\.\w+/g.test(item) && item.indexOf('[') === -1) {
            const arr = item.split('.');
            let result = data;
            const len = arr.length;
            for (let i = 0; i < len - 1; i++) {
                const arrItem = arr[i];
                if (getType(result[arrItem]) !== OBJECT_TYPE) {
                    result[arrItem] = {};
                }
                result = result[arrItem];
            }
            result[arr[len - 1]] = data[item];
            delete data[item];
        }
    }
};

const initData = (cur, pre, root = false) => {
    if (cur === pre) return;
    const curType = getType(cur);
    const preType = getType(pre);
    if (curType !== preType) return;
    if (curType === ARRAY_TYPE && cur.length >= pre.length) {
        for (let i = 0; i < pre.length; i++) {
            initData(cur[i], pre[i]);
        }
    } else if (curType === OBJECT_TYPE && Object.keys(cur).length >= Object.keys(pre).length) {
        for (const key in pre) {
            if (!root && cur[key] === undefined) {
                cur[key] = null;
            } else {
                initData(cur[key], pre[key]);
            }
        }
    }
};

const doDiff = (cur, pre, target, path = '', root = false) => {
    if (cur === pre) return;
    const curRootType = getType(cur);
    const preRootType = getType(pre);
    if (curRootType === ARRAY_TYPE && preRootType === curRootType && cur.length >= pre.length) {
        for (let i = 0; i < cur.length; i++) {
            doDiff(cur[i], pre[i], target, `${path}[${i}]`);
        }
        return;
    }
    if (
        curRootType === OBJECT_TYPE &&
        preRootType === curRootType &&
        (root || Object.keys(cur).length >= Object.keys(pre).length)
    ) {
        const keys = Object.keys(cur);
        for (const key of keys) {
            const curVal = cur[key];
            const preVal = pre[key];
            const curType = getType(curVal);
            const preType = getType(preVal);
            if (curVal === preVal) continue;
            if (curType === ARRAY_TYPE && preType === curType && curVal.length >= preVal.length) {
                for (let i = 0; i < curVal.length; i++) {
                    doDiff(curVal[i], preVal[i], target, `${path ? `${path}.` : ''}${key}[${i}]`);
                }
                continue;
            }
            if (
                curType === OBJECT_TYPE &&
                preType === curType &&
                Object.keys(curVal).length >= Object.keys(preVal).length
            ) {
                for (const sKey in curVal) {
                    doDiff(curVal[sKey], preVal[sKey], target, `${path ? `${path}.` : ''}${key}.${sKey}`);
                }
                continue;
            }
            target[`${path ? `${path}.` : ''}${key}`] = curVal;
        }
        return;
    }
    target[path] = cur;
};

export function diffData(data, prevData) {
    const target = {};
    initPath(data);
    initData(data, prevData, true);
    doDiff(data, prevData, target, '', true);
    return target;
}
```

##### reconcile

```js
export function noop() {}


export function shape(source, target) {
    const accumulator = {};
    const keys = Object.keys(target);

    for (const key of keys) {
        accumulator[key] = source[key];
    }

    return accumulator;
}

function _basePath(path) {
    if (Array.isArray(path)) return path;
    return path.replace(/\[/g, '.').replace(/\]/g, '').split('.')
}

function set(object, path, value) {
    if (typeof object !== 'object') return object;

    _basePath(path).reduce((o, k, i, _) => {
        if (i === _.length - 1) {
            o[k] = value
            return null
        } else if (k in o) {
            return o[k]
        } else {
            o[k] = /^[0-9]{1,}$/.test(_[i + 1]) ? [] : {}
            return o[k]
        }
    }, object)

    return object;
}

export function syncData(ctx, data) {
    Object.keys(data).forEach(key => {
        set(ctx.data, key, data[key])
    })
}

function getTick() {
    return fn => setTimeout(fn, 0);
}

export const tick = getTick();

export class Stream {
    data: Array<unknown> = [];
    listeners = {};
    hasEnd: boolean = false;

    constructor () {
        this.data = [];
        this.listeners = {};
        this.hasEnd = false;
    }

    on(key, callback) {
        if (typeof callback !== 'function') return;

        this.listeners[key] = this.listeners[key] || [];
        this.listeners[key].push(callback);
    }

    emit(key, ...args) {
        const callbacks = this.listeners[key] || [];

        for (const cb of callbacks) {
            cb(...args);
        }
    }

    add(data) {
        this.data.push(data);
        this.emit('data', data)
    }

    end() {
        if (this.hasEnd) return;
        this.hasEnd = true;
        this.emit('end', this.data);
    }

    getData() {
        if (!this.data.length) return null;

        const ret = Object.create(null);

        while (this.data.length > 0) {
            const unit = this.data.shift();
            Object.assign(ret, unit);
        }

        return ret;
    }

    destroy() {
        this.data = [];
        this.listeners = {};
        this.hasEnd = false;
    }
}


export function getReconciler() {
    let onLoadTime = 0;
    let mounted = null;
    let perf = null;
    let ctx = null;
    let workingDiffs = [];
    let workingCallbacks = [];
    let pendingUpdate = false;
    let pendingFlush = false;
    let beforeMountedSetData = [];
    let beforeMountedCallback = [];

    let stream = null;

    function enqueueUpdate(data) {
        workingDiffs.push(data);

        if (!pendingUpdate) {
            performUpdate();
        }
    }

    function enqueueUpdateCallback(callback) {
        workingCallbacks.push(() => {
            callback();
        });
    }

    function performUpdate() {
        pendingUpdate = true;

        const render = () => {
            perf && perf.start();
            const data = Object.create(null);

            while (workingDiffs.length > 0) {
                const diff = workingDiffs.shift();
                Object.assign(data, diff);
            }

            pendingUpdate = false;
            perf && perf.record(data);

            ctx && ctx.originalSetData(data, () => {
                perf && perf.stop();
                if (!pendingFlush) {
                    flushUpdateCallback();
                }
            });
        }

        tick(render);
    }

    function flushUpdateCallback() {
        pendingFlush = true;
        const cbs = workingCallbacks.slice(0);
        workingCallbacks.length = 0;
        for (const cb of cbs) {
            cb();
        }
        pendingFlush = false;
    }

    function update(this: any, data, callback = noop) {
        if (!ctx) ctx = this;
        if (!perf) perf = getPerf({ ctx: this, onLoadTime, name: this.tag || this.data.tag || 'unknown' });
        if (mounted === null) {
            syncData(ctx, data)
            stream?.add(data);
            beforeMountedCallback.push(callback);
            return;
        }
        if (mounted === false) return; // 已卸载

        stream?.end();
        perf?.count();

        const previous = shape(ctx.data, data);
        const diff = diffData(data, previous);
        // 微信行为：同步更新数据
        syncData(ctx, data);

        if (!Object.keys(diff).length) return;

        enqueueUpdate(diff);
        enqueueUpdateCallback(callback);
    }

    function flushBeforeMountedSetDataCallbacks() {
        const cbs = beforeMountedCallback.slice(0);
        beforeMountedCallback.length = 0;
        for (const cb of cbs) {
            cb();
        }
    }

    function init(this: any) {
        onLoadTime = Date.now();
        this.originalSetData = this.setData.bind(this);
        this.setData = update.bind(this);
        stream = new Stream();
        stream?.on('end', () => {
            const data = stream.getData();
            if (!data) return;
            this.originalSetData(data, flushBeforeMountedSetDataCallbacks);
        })
    }

    function mount(this: any) {
        mounted = true;
        stream?.end();
    }

    function unmount() {
        stream = null;
        mounted = false;
        perf = null;
        ctx = null;
        workingDiffs = [];
        workingCallbacks = [];
        pendingUpdate = false;
        pendingFlush = false;
        beforeMountedSetData = [];
        beforeMountedCallback= [];
    }

    return { init, mount, unmount };
}
```

##### wrap

```js
export function reconcileComponent(component) {
    component.lifetimes = component.lifetimes || {};
    const originalCreated = component.created || component.lifetimes.created || noop;
    const originalDetached = component.detached || component.lifetimes.detached || noop;

    let reconciler = null;

    function created(this: any, ...args) {
        reconciler = getReconciler();
        reconciler.init.apply(this, args);
        reconciler.mount.apply(this, args);
        originalCreated.apply(this, args);
    }

    function detached(this: any, ...args) {
        reconciler.unmount.apply(this, args);
        originalDetached.apply(this, args);
    }

    component.created = created;
    component.lifetimes.created = created;
    component.detached = detached;
    component.lifetimes.detached = detached;

    return component;
}

export function reconcilePage(page) {
    const originalOnLoad = page.onLoad || noop;
    const originalOnReady = page.onReady || noop;
    const originalOnUnload = page.onUnload || noop;

    let reconciler = null;

    page.onLoad = function (...args) {
        reconciler = getReconciler();
        reconciler.init.apply(this, args);
        originalOnLoad.apply(this, args);
    };

    page.onReady = function (...args) {
        originalOnReady.apply(this, args);
        reconciler.mount.apply(this, args);
    };

    page.onUnload = function (...args) {
        reconciler.unmount.apply(this, args);
        originalOnUnload.apply(this, args);
    };

    return page;
}
```


## 总结

小程序的首屏性能治理涉及到各阶段各个方面，需要各个监控埋点，分析优化。

### 1. 启动优化

   - 减少发版频次、控制代码包体积

### 2. 渲染优化

  - 延迟执行非首屏逻辑、延迟加载非首屏组件
  - 接口请求：接口合并、数据精简、域名收敛、预加载
  - 数据缓存
  - setData：合并 setData 减少次数、控制数据量大小、数据 diff 精准更新
  - WXML：控制节点数、层级
  - 图片：压缩裁剪、懒加载、选择合适的格式（webp）、图片缓存



老生常谈的性能优化，在微信小程序中又应该如何去实践？

2022

April