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

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

JavaScript 数据结构：链表

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

利用已知函数 add 实现 asyncSum。

实现 asyncSum

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


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

JavaScript 数据结构：二叉搜索树 

## 冒泡排序

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

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

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

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

  return arr;
}
```

## 选择排序

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

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

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

## 插入排序

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

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

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

## 希尔排序

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

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


希尔排序的步骤。

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

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

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

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

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

      arr[j + gap] = tmp;
    }
  }

  return arr;
}
```

## 归并排序

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

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

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


## 快速排序

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

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

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

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

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

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


JavaScript 排序算法


## 0. 什么是 vnode

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## 1. 从 JSX 到 vnode

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

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

```

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

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

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

  return node
}
```

测试一下：

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

## 2. 渲染 vnode

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

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

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

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

这里的逻辑主要为：

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

## 3. diff vnode

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

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

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

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

那么可能得返回值为：

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

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

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

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

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

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

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

## 4. patch 应用更新

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

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

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

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

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

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

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

      patchAttrs(el, attrs)

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

      break
    }
  }
}
```

## 总结

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

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


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

vdom 原理解析与简单实现

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

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

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

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

```

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

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

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

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

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


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


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

使用 JS 朗读文章内容

## 前言

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

## 背景

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

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

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

## 分析

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

```ts
import React from "react";

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

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

export default Button;
```

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

## 思路

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

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

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

## 源代码 -> `AST`

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

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

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

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

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

## 遍历 `AST`

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

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

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

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

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

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

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

## 解析 TypeAnnotation

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

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

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

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

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

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

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

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

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

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

## 测试

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

const code = `
import React from 'react';

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

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

export default Button;
`;

let ret = parseTypeScriptComponentInterface(code);
```

输出：

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

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


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

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

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

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

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

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

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

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

* {
    margin: 0;
    padding: 0;
}

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

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

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

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

效果：

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

## 实现暗黑主题

### 图片处理

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

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

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

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



PS: 兼容性不是很好。



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

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


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


## CSS 自定义属性兼容性

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

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

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

<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 特殊字符问题

## 是否支持全屏 API

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

## 是否正在全屏展示

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

## 元素的全屏展示

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

## 元素的全屏样式

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

## 全屏的事件处理

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

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

## Let's do it

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

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

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

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

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

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

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

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

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

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



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

JS 全屏 API 与样式处理

## 简介

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

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

## 链接

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

## 功能点

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

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

## 预览

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

## 项目运行

### 数据库

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

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

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

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

### 本地运行

首先，clone 项目。

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

然后，安装项目依赖。

```bash
yarn
```

- 启动项目

```bash
yarn dev
```

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

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

### 系统设置

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

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

### 配置文件

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

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

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

### 项目部署

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

```bash

node -v
npm -v

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

npm i -g pm2 @nestjs/cli lerna yarn

yarn
yarn run build
yarn run pm2

pm2 startup
pm2 save
```

### nginx 配置

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

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

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

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

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

## 资料

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


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