非常棒的JavaScript源码实现

# 如何写文档? Important

提示

文档的规范, 以及如何方便快捷的书写 ✍️ 文档

# 新建文件

在docs/zh中新建一个文件, 并新建一个 README.md的文件

警告

请保证每一个文件夹都有一个 README.md文件

npm run docs

# or

touch docs/zh/test/README.md
1
2
3
4
5
# npm run docs
? please input the docs model name:  model
? please input the docs model alias name (default same as model name)? 
? generator model path (etc: docs/zh/model) ? docs/zh
1
2
3
4

Eg: File Path

docs/zh
├── algorithms
│   ├── README.md
│   └── binaryTree
│       └── README.md
├── array
│   ├── README.md
│   ├── arrayMove
│   │   └── README.md
│   ├── find
│   │   └── README.md
│   └── isArray
│       └── README.md
├── design-pattern
│   ├── README.md
│   ├── adapter-pattern
│   │   └── README.md
│   ├── decorator-pattern
│   │   └── README.md
│   ├── facade-pattern
│   │   └── README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

模板文件 plop-templates/docs/zh/README.md.hbs

## 题目描述

## 解题思路 or 实现原理

## 实现代码

<<< @/{{templatePath}}/{{name}}/index.ts

## 参考
1
2
3
4
5
6
7
8
9

# 新建 Code 模板 + 单测模板

npm run template-docs
1
? please input the name:  template
? please input the docs model alias name (default same as model name)? 
? Do you want test file ?  Yes
? generator path (etc: src/template) ? src
? generator model path (etc: docs/zh/model) ? docs/zh
1
2
3
4
5

模板文件

plop-templates/code/__tests__.ts.hbs

/*
 * @Author: Rainy
 * @Date: 2020-02-06 19:05:18
 * @LastEditors: Rainy
 * @LastEditTime: 2020-07-25 11:12:14
 */

import { {{name}} } from '.';

test('Test {{name}}', () => {
  expect({{name}}()).toBe(undefined);
});
1
2
3
4
5
6
7
8
9
10
11
12

plop-templates/code/index.ts.hbs

/*
 * @Author: Rainy
 * @Date: 2019-11-14 19:25:01
 * @LastEditors: Rainy
 * @LastEditTime: 2020-03-01 21:08:22
 */

export function {{name}}(params?: any): any {}
1
2
3
4
5
6
7
8

plop-templates/code/README.md.hbs

## 题目描述

## 解题思路 or 实现原理

## 参考
1
2
3
4
5

# 文档顺序

提示

alias.json 的顺序就是文档的顺序

# 配置别名

提示

通过使用 新建文件 的脚本来动态配置 alias, 妈妈再也不用担心我找不到配置了。

我们不支持中文名文件夹, 所以你需要给文件名配置别名, 只需要在docs/.vuepress/utils/alias.json中配置 key-value值即可

{
  "guide": "介绍",
  "how-to-write-docs": "如何写文档? ",
  "math-------": "",
  "math": "数学",
  "factorial": "阶乘",
  "fibonacci": "斐波那契数列",
  "gcd": "最大公约数",
  "lcm": "最小公倍数",
  "binary": "二进制",
  "primitive-------": "",
  "primitive": "原生 Javascript",
  "function-------": "",
  "function": "函数",
  "debounce": "防抖",
  "throttle": "节流",
  "vdom-diff-------": "",
  "vdom-diff": "实现React/Vue DOM Diff算法",
  "es6-------": "",
  "es6": "ECMAScript 6(ES6)",
  "promise": "手写Promise",
  "Array-------": "",
  "array": "Array(MDN + Function)",
  "Object-------": "",
  "object": "Object(MDN + Function)",
  "types-------": "",
  "types": "Types",
  "utils-------": "",
  "utils": "Utils",
  "design-pattern-------": "",
  "design-pattern": "设计模式",
  "adapter-pattern": "适配器模式",
  "decorator-pattern": "装饰器模式",
  "factory-pattern": "工厂模式",
  "facade-pattern": "外观模式",
  "iterator-pattern": "迭代器模式",
  "proxy-pattern": "代理模式",
  "observer-pattern": "观察者模式",
  "singleton-pattern": "单例模式",
  "algorithms-------": "",
  "algorithms": "算法",
  "binaryTree": "二叉树",
  "sort-------": "",
  "sort": "排序算法",
  "bubbleSort": "冒泡排序",
  "bucketSort": "桶排序",
  "countingSort": "计数排序",
  "heapSort": "堆排序",
  "insertionSort": "插入排序",
  "mergeSort": "归并排序",
  "quickSort": "快速排序",
  "radixSort": "基数排序",
  "selectionSort": "选择排序",
  "shellSort": "希尔排序",
  "sword-means-offer-------": "",
  "sword-means-offer": "剑指 Offer",
  "03-find-repeat-number": "03. 数组中重复的数字",
  "64-sum-1-n-nums": "64 求1 ~ n的和",
  "leetcode-------": "",
  "leetcode": "Leetcode",
  "p3": "无重复字符的最长子串"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# 图片

~@images路径 -> 根路径

![images.png](~@images/src/xxx)
1

Eg:

![fibonacci.png](~@images/src/Math/fibonacci/images/fibonacci.png)
1

fibonacci.png

# 类型定义

注意

请在 src/types中增加新的类型文件后(默认是在 index.d.ts中定义, 此处已经导入好了), 在 utils 中导入代码块, 具体导入代码详见 👇👇导入代码块。

# 工具函数定义

注意

请在 src/utils中增加新的工具函数文件后, 在 utils 中导入代码块, 具体导入代码详见 👇导入代码块。

# 导入代码块

你可以在文档中展示你的代码, 只需要使用下面方式即可

<<< @/filepath
1

Note: filepath是你文档的路径

Eg:

<<< @/src/Math/factorial/index.ts
1

# 数学公式

你可以在文档中使用 markdown 来书写一下数学公式

$$
y=\begin{cases}
-x,\quad x\leq 0 \\\\
x,\quad x>0
\end{cases}
$$
1
2
3
4
5
6

y={−x,x≤0x,x>0y=\begin{cases} -x,\quad x\leq 0 \\\\ x,\quad x>0 \end{cases}

# Badge 徽章

  • Props:

    • text - string

    • type - string, 可选值: 'tip' | 'warning' | 'error', 默认值是: 'tip'

    • vertical - string, 可选值: 'top' | 'middle', 默认值是: 'top'

  • Usage:

你可以在标题中, 使用这个组件来为某些 API 添加一些状态：

Badge <Badge text='默认主题' /> <Badge text='warning' type='warning'/> <Badge text='error' type='error'/>
1

Badge 默认主题 warning error

# 自定义容器

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::
1
2
3
4
5
6
7
8
9
10
11

提示

This is a tip

注意

This is a warning

警告

This is a dangerous warning

# Emoji

:tada: :100:
1

🎉 💯

← pow →