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

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

    return config;
}
```

1. 使用 `preact`

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

2. 使用 `react`

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


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


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

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

## 是否支持全屏 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 与样式处理

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

## Vue 单文件组件开发

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

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

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

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

## Dialog

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

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

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

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

那么，编码如下:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## 封装 Dialog 做 MessageBox

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

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

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

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

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

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

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

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

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

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

  instance = null;
};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

这样就有动画了。

## 总结

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

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

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

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

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

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

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

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

## Demo

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

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

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

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

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

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

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

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

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

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

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

Vue 组件开发总结

## 简介

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

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

## 链接

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

## 功能点

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

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

## 预览

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

## 项目运行

### 数据库

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

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

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

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

### 本地运行

首先，clone 项目。

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

然后，安装项目依赖。

```bash
yarn
```

- 启动项目

```bash
yarn dev
```

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

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

### 系统设置

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

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

### 配置文件

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

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

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

### 项目部署

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

```bash

node -v
npm -v

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

npm i -g pm2 @nestjs/cli lerna yarn

yarn
yarn run build
yarn run pm2

pm2 startup
pm2 save
```

### nginx 配置

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

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

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

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

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

## 资料

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


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

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

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

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

<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

## 背景

团队使用 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 自定义属性实现暗黑模式

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

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