# 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 刷题

## 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 变量实现暗黑模式

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

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

逝者安息，生者奋发

链表存储有序的元素集合，但不同于数组，链表中的元素在内存中不是连续放置的。每个元素由一个存储元素本身的节点和指向下一个元素的 引用 组成。

```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 数据结构：链表

## 冒泡排序

冒泡排序重复遍历数组，依次比较 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 排序算法


## 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 中的基本运算符


## 二叉搜索树

二叉树中的节点最多只能有 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 数据结构：二叉搜索树 

<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. 信息可视化
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/)


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

数据可视化

<h2 id="-docker">安装 Docker</h2>
<p>在 <a href="https://www.docker.com/get-started">Docker</a> 网站下载安装 Docker 。
安装完成后，打开命令行输入 <code>docker version</code>，如果有相关输出即安装成功。</p>
<h2 id="-container">运行 container</h2>
<p>docker 中与 <code>container</code> 相关的命令主要有：</p>
<ul>
<li><code>docker container run ...</code>：运行容器</li>
<li><code>docker container ls</code>: 列出当前运行容器</li>
<li><code>docker container start [container_id | container_name]</code>: 开始运行指定 id（或名称） 的容器</li>
<li><code>docker container stop [container_id | container_name]</code>: 停止运行指定 id（或名称） 的容器</li>
<li><code>docker container rm [container_id| container_name]</code>: 删除指定 id（或名称） 的容器</li>
</ul>
<p>其中，也可以使用 <code>docker ps</code> 查看正在运行的容器。</p>
<h3 id="-nginx">运行 nginx</h3>
<p>打开命令行，键入：</p>
<pre><code class="lang-bash">docker container run -it -p 8080:81 nginx
</code></pre>
<p>如果报错无法拉取，执行 <code>docker login</code> 输入账号密码登录 docker hub 账号后再执行。
在浏览器访问网站：<code>http://localhost:8080</code>，如果可以访问到 nginx 相关即表示运行成功。</p>
<p><code>-p 8080:81</code> 指定镜像在容器内运行的端口为：<code>81</code>，同时将端口映射到本地机器的 <code>8080</code> 端口，所以需要在浏览器访问 <code>http://localhost:8080</code> 才可。</p>
<h3 id="-mysql">运行 mysql</h3>
<p>不同与 nginx ，运行 mysql 时可能需要设置一些变量，比如数据库密码之类的，这就需要用到 <code>--env</code> 参数。</p>
<pre><code class="lang-bash">docker container run -d -p 3006:3036 --env MYSQL_ROOT_PASSWORD=123456 mysql
</code></pre>
<h2 id="-container">进入 container</h2>
<p>使用 <code>docker container -it exec [container_id | container_name]</code> 可以运行指定的容器内的程序</p>
<p>首先，运行一个名为 <code>mynginx</code> 的容器：</p>
<pre><code class="lang-bash">docker container run -d -p 8080:80 --name mynginx nginx
</code></pre>
<p>然后，调用 <code>mynginx</code> 的 <code>bash</code> 程序：</p>
<pre><code class="lang-bash">docker container exec -it mynginx bash
</code></pre>
<p>如此，便可以在 container 内部操作环境执行命令，就像是进入了这个 container 操作环境内一样。</p>
<h2 id="-">绑定挂载点</h2>
<p>在上一步中，可以知道 container mynginx 的文件路径为：<code>/usr/share/nginx/html</code>。如果想要修改这些文件，就需要进入 container 内部进行修改，这样便会很麻烦。docker 提供了绑定挂载点的功能，这样便可以把本地机器的文件映射到 container 内部。</p>
<pre><code class="lang-bash">docker container run -d -p 8080:81 -v ~/test:/usr/share/nginx/html --nmae mynginx nginx
</code></pre>
<p>在本地机器的 test 文件夹，新建一个 index.html 文件，然后浏览器访问 <code>http://localhost:8080</code>，便可以看到刚刚保存的内容。</p>
<h2 id="-">制作镜像</h2>
<p><code>docker container run</code> 的过程是首先拉取镜像，然后运行这个镜像。如此便可以制作自己的镜像。例如：</p>
<p>首先新建一个文件夹，然后新建一个 <code>index.html</code> 文件并写入内容，然后再编写 <code>Dockerfile</code> 文件。</p>
<pre><code class="lang-bash">FROM nginx:latest

WORKDIR /usr/share/nginx/html

COPY . .
</code></pre>
<p>然后运行 <code>docker image build . -t mynginx-web</code>（<code>.</code> 是指当前路径），便完成了镜像制作。</p>
<p>运行这个镜像只需要：<code>docker container run -it -p 8080:80 mynginx-web</code>。</p>

Docker 使用笔记（一）

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

对于一个数据请求来说，可以分为发起请求、后端处理、浏览器响应 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


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


浏览器缓存机制

<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="">前言</h2>
<p>最近看了不少关于 h5 页面制作工具。端午闲来无事，决定尝试下一个页面搭建工具。效果如下：</p>
<p><img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-27/ramiko-ditor.png" alt="" /><br></p>
<p><img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-27/ramiko-page.png" alt="" /></p>
<p>gif 录制效果不佳，可以访问以下链接进行体验。</p>
<ul>
<li>Github：<a href="https://github.com/fantasticit/ramiko">传送门</a></li>
<li>编辑器：<a href="https://blog.wipi.tech/ramiko/editor">传送门</a></li>
<li>demo：<a href="https://blog.wipi.tech/ramiko/page/85333d78-ed24-4adf-8d09-b185fddd73fc">传送门</a></li>
</ul>







<h2 id="-1">技术栈</h2>
<ul>
<li>next.js：前端模块化开发</li>
<li>sass: 配合使用 css modules</li>
<li>nest.js：服务端语言</li>
<li>MySQL：数据存储</li>
</ul>







<h2 id="-2">整体架构</h2>
<p><img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-28/ramiko-jiagou.png" alt="" /></p>
<p>前端开发组件库，完善组件类型，编辑器读取组件完成页面搭建，将页面数据发送至服务端保存。<br></p>
<p>访问页面，从服务端拉取页面数据，前端渲染页面即可。</p>
<h2 id="-3">编辑器设计</h2>
<p><img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-28/ramiko.png" alt="编辑器整体结构图" /></p>
<pre><code class="shell language-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
</code></pre>
<h2 id="-4">数据结构</h2>
<h3 id="-5">定义页面数据结构</h3>
<p>既然是可视化页面搭建，那么页面必须可以以某种数据结构进行描述。比如：</p>
<pre><code class="js language-js">{
  setting: {
  } // 页面设置
  components: []; // 页面使用到的组件
}
</code></pre>
<h3 id="-6">定义组件数据结构</h3>
<p>页面核心是由组件搭建而成的，那么就要定义组件的数据结构。</p>
<pre><code class="tsx language-tsx">import React from 'react';

export const Title = ({ title, style }) =&gt; {
  return &lt;h1&gt;{title}&lt;/h1&gt;
};

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

Title.schema = {
  title: {
    title: '标题',
    type: 'text'
  },
};
</code></pre>
<p>核心可以抽象为：</p>
<pre><code class="js language-js">{
  name: 'Title'; // 对应组件名
  props: {
  }
  schema: {
  }
}
</code></pre>
<h4 id="name"><code>name</code></h4>
<p>不可能把组件源代码保存到服务端，所以这里只保存组件的名称，前端渲染时，根据该名称找到对应组件渲染即可（类似 Vue.js 的动态组件）</p>
<h4 id="props"><code>props</code></h4>
<p>React 组件的 props，这里使用 <code>defaultProps</code> 赋值默认值</p>
<h4 id="schema"><code>schema</code></h4>
<p>对应 <code>props</code> 各个属性的描述，用于编辑器针对进行渲染。进行组件编辑，实际上编辑的是组件的 <code>props</code>，<code>props</code> 改变组件的渲染结果自然改变。为了对 <code>props</code> 进行编辑，需要定义 <code>props</code> 的描述语言，通过 <code>props</code> 描述来进行属性编辑。这里使用如下的 <code>schema</code>。</p>
<pre><code class="js language-js">{
  title: '标题';
  type: 'text';
}
</code></pre>
<p>对应组件 <code>props.title</code>，通过 <code>type</code> 可以决定如何渲染编辑器组件。</p>
<h2 id="-7">无渲染组件</h2>
<p>可能光能渲染组件是不够的，也许需要更多的功能包装，比如埋点。这一类函数本质上也是组件。可以通过 <code>schema</code> 定义进行 <code>props</code> 编辑。举个例子：</p>
<pre><code class="js language-js">import React from 'react';

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

  return &lt;div onClick={onClick}&gt;{children}&lt;/div&gt;;
};

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'
  }
};
</code></pre>
<h2 id="-8">丰富完善</h2>
<ol>
<li>丰富组件库</li>
<li>优化编辑器：比如添加组件拖拽功能。</li>
</ol>







<h2 id="-9">项目启动</h2>
<p>Github：<a href="https://github.com/fantasticit/ramiko">传送门</a></p>
<p>在 <code>client</code> 和 <code>server</code> 分别执行 <code>yarn dev</code> 即可。</p>

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

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

```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('#issue-589242640 > div > div.edit-comment-hide > task-lists > table > tbody > tr > td').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)

最后，看一下兼容性还不错。😹💓

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

使用 JS 朗读文章内容

字节跳动面试题目：利用已知函数 `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

<p>使用技术：<strong><code>react.js</code></strong> <strong><code>typescript</code><strong><em><em><code>nextjs</code></em></strong></em><code>nestjs</code></strong><strong><code>mysql</code></strong></p>
<p>GitHub 地址：<a href="https://github.com/fantasticit/wipi">https://github.com/fantasticit/wipi</a> 。</p>
<h2 id="">正文</h2>
<ul>
<li>源码：<a href="https://github.com/fantasticit/wipi">https://github.com/fantasticit/wipi</a> （欢迎 star）</li>
</ul>
<p>最近疫情比较紧张，在家调休，闲着无聊便写了个前后端分离，服务端渲染的博客系统。支持特性：</p>
<ul>
<li>文章创建、编辑、发布</li>
<li>文章及页面评论</li>
<li>文章搜索及搜索记录管理</li>
<li>页面动态创建</li>
<li>文件上传（上传到 阿里云 OSS）</li>
<li>邮件通知</li>
<li>动态系统设置（系统标题、Logo、favicon、页脚及 SEO 配置等）</li>
<li>系统访问统计（ip + user-agent）</li>
</ul>
<h3 id="-1">线上预览</h3>
<h4 id="-2">前台页面</h4>
<p>地址：<a href="https://blog.wipi.tech/">https://blog.wipi.tech/</a></p>
<h4 id="-3">后台页面</h4>
<p>地址：<a href="https://blog.wipi.tech/">https://admin.blog.wipi.tech/</a></p>
<h3 id="-4">本地启动</h3>
<ul>
<li>clone 本项目</li>
</ul>
<pre><code>git clone --depth=1 https://github.com/fantasticit/wipi.git your-project-name
</code></pre>
<ul>
<li>安装依赖</li>
</ul>
<p>首先安装 <code>MySQL</code>，推荐使用 docker 进行安装。</p>
<pre><code>docker run -d --restart=always --name wipi-mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root mysql
</code></pre>
<p>然后安装项目 node 依赖。</p>
<pre><code>cd client &amp;&amp; yarn&lt;br&gt;cd server &amp;&amp; yarn
</code></pre>
<ul>
<li>启动项目</li>
</ul>
<p>分别启动前台页面和服务端。</p>
<pre><code>cd client &amp;&amp; yarn dev&lt;br&gt;cd server &amp;&amp; yarn start:dev
</code></pre>
<p>打开浏览器，访问 <code>http://localhost:3000</code> 即可访问前台页面，<code>http://localhost:3000/admin</code> 为后台管理页面。</p>
<p>服务端接口运行在 <code>http://localhost:4000</code>。</p>
<p>首次启动，默认创建用户：wipi，密码：wipi（可在 <code>server/src/config</code> 文件中进行修改）。</p>
<p>[PS] 如服务端配置启动失败，请先确认 MySQL 的配置是否正确，配置文件在 <code>server/src/config</code>。</p>
<h3 id="-5">项目部署</h3>
<p>在服务器使用 pm2 进行部署即可，可以查看 <code>deploy.sh</code> 文件。</p>
<h3 id="-6">搜索服务</h3>
<p>该项目使用了 MySQL 模糊查询提供搜索接口。如果服务器配置较高，或想体验更强大的搜索服务（elasticsearch），可以参考 <code>elasticsearch</code> 文件下 <code>deploy.sh</code> 文件。</p>
<p>如果有问题，欢迎提 issue 。 最后说一句：</p>
<ol>
<li>首页：<a href="https://blog.wipi.tech/">https://blog.wipi.tech/</a></li>
<li>后台：<a href="https://blog.wipi.tech/">https://admin.blog.wipi.tech/</a></li>
<li>源码：<a href="https://github.com/fantasticit/wipi">https://github.com/fantasticit/wipi</a> （欢迎 star）</li>
</ol>

本站说明


## 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 中的变量和参数

假设场景：

在某个项目下，我新建了一个本地分支 `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 恢复被误删的本地分支


## 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 原理解析与简单实现


## 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 中的特殊字符（下）


## 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 中的特殊字符（上）

<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>

LeetCode：LRU缓存机制

## 背景

团队使用 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)。


2020

July

June

May

April

March

February