# 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/)


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

数据可视化

## 安装 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 使用笔记（一）

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

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

## 前言

最近看了不少关于 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

今天，从 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


## 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)。


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

## 简介

本项目使用 `next.js`、`nest.js` 和 `MySQL` 从 0 到 1 搭建了一个完整的前后端分离项目。其中，使用 `next.js` 通过服务端渲染前台页面和后台管理系统，使用 `nest.js` 提供了 `restful api` 接口，使用 `typeorm` 操作 `MySQL` 数据。

## 链接

- [Github 源码](https://github.com/fantasticit/wipi)
- [前台页面](https://blog.wipi.tech/)
- [管理系统](https://admin.blog.wipi.tech/)：支持访客注册，也可使用账户：`wipi` `wipi123456`

## 功能点

- 文章创建、发布、更新，以及相应标签、分类管理
- 文章搜索
- 页面创建、发布、更新
- 评论管理
- 邮件通知
- 系统访问统计（ip + user-agent）
- 用户管理（管理员、访客）
- 文件上传（上传到 阿里 OSS）
- 动态 SEO、标题、Logo、favicon 等设置
- 使用 vscode 的 `monaco` 作为文章、页面的编辑器，支持 `Markdown` 语法

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

## 预览

<ul>
  <li><img width="240" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-21/wipi-client-home.png" alt="前台首页" /></li>
  <li><img width="240" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-21/wipi-client-article.png" alt="前台文章" /></li>
  <li><img width="240" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-21/wipi-client-search.png" alt="前台搜索" /></li>
  <li><img width="240" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-21/wipi-clinet-archives.png" alt="前台归档" /></li>
  <li><img width="240" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-21/wipi-admin-home.png" alt="后台首页" /></li>
  <li><img width="240" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-21/wipi-admin-setting.png" alt="后台设置" /></li>
  <li><img width="240" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-21/wipi-admin-article.png" alt="后台文章管理" /></li>
  <li><img width="240" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-21/wipi-admin-editor.png" alt="后台编辑器" /></li>
  <li><img width="240" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-21/wipi-admin-comment.png" alt="后台评论管理" /></li>
</ul>

## 本地启动

- 安装依赖

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

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

- clone 本项目。

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

然后安装项目 node 依赖。

```bash
lerna bootstrap
```

- 启动项目

```bash
lerna run dev
```

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

首次启动，默认创建管理员用户：admin，密码：admin（可在 `server/src/config` 文件中进行修改）。
[PS] 如服务端配置启动失败，请先确认 MySQL 的配置是否正确，配置文件在 `server/src/config`。

## 项目部署

在服务器使用 pm2 进行部署即可，可以查看 `deploy.sh` 文件。具体内容如下：

```bash

node -v
npm -v

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

npm install pm2 -g
npm i -g @nestjs/cli
npm i -g lerna

lerna bootstrap
lerna run build
lerna 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 开发完整前后端分离项目

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

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

在网络请求、耗时操作等异步场景下，一般都会给用户一个指示（如 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 指示器的优化

通过 `position: sticky` 可以很容易实现固定表头的表格。

```css
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  border: 1px solid #000;
}
```

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

<iframe src="https://codesandbox.io/embed/dazzling-elgamal-o9nho?fontsize=14&hidenavigation=0&theme=dark"
     style="width:100%; height:420px; border:0; border-radius: 4px; overflow:hidden;"
     title="dazzling-elgamal-o9nho"
     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>

几行 CSS 实现固定表头的表格。

CSS 实现固定表头表格

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

## 什么是 Markdown

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

### 1. 待办事宜 Todo 列表

- [ ] 支持以 PDF 格式导出文稿
- [x] 新增 Todo 列表功能

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

```python
@requires_authorization
class SomeClass:
    pass

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

### 3. 绘制表格

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

### 4. 嵌入网址
<iframe src="//player.bilibili.com/player.html?aid=77737877&bvid=BV1xJ411z7eS&cid=132993821&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

```HTML
<iframe src="//player.bilibili.com/player.html?aid=77737877&bvid=BV1xJ411z7eS&cid=132993821&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
```


2021

March

February

2020

July

June

May

April

March

February