update docs

.vitepress/nav.ts

@@ -3,15 +3,20 @@ import type { DefaultTheme } from 'vitepress'
 export const nav: DefaultTheme.NavItem[] = [
   { text: '首页', link: '/' },
   {
-    text: '基础',
+    text: '语言',
     items: [
       { text: 'JavaScript', link: '/javascript.html' },
       { text: 'ECMAScript', link: '/ecmascript.html' },
       { text: 'TypeScript', link: '/typescript.html' },
     ],
   },
-  { text: 'Vue', link: '/vue.html' },
-  { text: '工前端程化', link: '/engineering.html' },
+  {
+    text: '前端框架',
+    items: [
+      { text: 'Vue', link: '/vue.html' },
+    ],
+  },
+  // { text: '前端工程化', link: '/engineering.html' },
   { text: '浏览器原理', link: '/browser.html' },
   // { text: '前端框架', link: '/frameworks' },
   // { text: '前端工程化', link: '/engineering' },
@@ -29,14 +34,14 @@ export const nav: DefaultTheme.NavItem[] = [
     text: '学习资源',
     link: '/resource',
   },
-  {
-    text: '计算机基础',
-    link: 'https://xiaolincoding.com/',
-  },
-  {
-    text: '算法',
-    link: 'https://www.programmercarl.com/',
-  },
+  // {
+  //   text: '计算机基础',
+  //   link: 'https://xiaolincoding.com/',
+  // },
+  // {
+  //   text: '算法',
+  //   link: 'https://www.programmercarl.com/',
+  // },
   {
     text: '关于',
     link: '/about.html',

.vitepress/sidebar.ts

@@ -63,8 +63,10 @@ export const sidebar: DefaultTheme.Sidebar = {
     {
       text: '手搓代码',
       items: [
-        { text: '音频可视化的实现', link: '/source-code/voice-visualization' },
+        { text: '防抖', link: '/source-code/debounce' },
+        { text: '节流', link: '/source-code/throttle' },
         { text: '深拷贝', link: '/source-code/deep-copy' },
+        { text: '音频可视化的实现', link: '/source-code/voice-visualization' },
       ],
     },
   ],

package.json

@@ -13,13 +13,13 @@
     "@giscus/vue": "^2.4.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.1",
+    "@antfu/eslint-config": "^2.6.2",
     "@mermaid-js/mermaid-mindmap": "^9.3.0",
     "@types/node": "^20.10.7",
     "eslint": "^8.56.0",
     "mermaid": "^10.6.1",
     "typescript": "^5.3.3",
-    "vitepress": "^1.0.0-rc.35",
+    "vitepress": "^1.0.0-rc.36",
     "vitepress-plugin-mermaid": "^2.0.16"
   }
 }

src/docs/ecmascript.md

@@ -1,5 +1,5 @@
 ---
-title: ECMAScript 特性
+title: ECMAScript 版本特性
 ---
 
-# ECMAScript 特性
+# ECMAScript 版本特性

src/docs/source-code/debounce.md

@@ -0,0 +1,65 @@
+---
+title: 手写 JavaScript 实现防抖函数 debounce
+---
+
+# 手写 JavaScript 实现防抖函数 debounce
+
+代码：
+
+```js
+/**
+ * 防抖函数
+ *
+ * @param {Function} fn 要防抖的函数
+ * @param {number} timeout 间隔时间
+ */
+function debounce(fn, timeout = 200) {
+  let timer = null
+  return function (...args) {
+    if (timer)
+      clearTimeout(timer)
+
+    timer = setTimeout(() => {
+      fn.apply(this, args)
+    }, timeout)
+  }
+}
+```
+
+使用：
+
+```js
+function fn(msg) {
+  console.log(msg)
+}
+
+const debounceFn = debounce(fn, 500)
+
+debounceFn('1')
+
+setTimeout(() => {
+  debounceFn('100')
+}, 100)
+
+setTimeout(() => {
+  debounceFn('200')
+}, 200)
+
+setTimeout(() => {
+  debounceFn('300')
+}, 300)
+
+setTimeout(() => {
+  debounceFn('400')
+}, 400)
+
+setTimeout(() => {
+  debounceFn('500')
+}, 500)
+
+setTimeout(() => {
+  debounceFn('600')
+}, 600)
+```
+
+可以看到输出的是 `600`，因为在 `500ms` 内，`debounceFn` 被调用了多次，但是只有最后一次生效了。

src/docs/source-code/deep-copy.md

@@ -1,8 +1,10 @@
 ---
-title: JavaScript 实现深拷贝
+title: 手写 JavaScript 实现深拷贝
 ---
 
-# JavaScript 实现深拷贝
+# 手写 JavaScript 实现深拷贝
+
+## 代码
 
 ```javascript
 function deepCopy(obj) {

src/docs/source-code/throttle.md

@@ -0,0 +1,77 @@
+---
+title: 手写 JavaScript 实现节流函数 throttle
+---
+
+# 手写 JavaScript 实现节流函数 throttle
+
+代码：
+
+```js
+/**
+ * 节流函数
+ *
+ * @param {Function} fn 要节流的函数
+ * @param {number} timeout 间隔时间
+ */
+function throttle(fn, timeout) {
+  let timer = null
+  return function (...args) {
+    if (timer)
+      return
+
+    timer = setTimeout(() => {
+      timer = null
+      fn.apply(this, args)
+    }, timeout)
+  }
+}
+```
+
+使用：
+
+```js
+function fn(msg) {
+  console.log(msg)
+}
+
+const throttleFn = throttle(fn, 500)
+
+throttleFn('1')
+
+setTimeout(() => {
+  throttleFn('100')
+}, 100)
+
+setTimeout(() => {
+  throttleFn('200')
+}, 200)
+
+setTimeout(() => {
+  throttleFn('300')
+}, 300)
+
+setTimeout(() => {
+  throttleFn('400')
+}, 400)
+
+setTimeout(() => {
+  throttleFn('500')
+}, 500)
+
+setTimeout(() => {
+  throttleFn('600')
+}, 600)
+
+setTimeout(() => {
+  throttleFn('700')
+}, 700)
+```
+
+可以看到，节流函数的执行结果如下：
+
+```text
+1
+500
+```
+
+因为 500 毫秒内只有第一调用生效。

src/docs/source-code/voice-visualization.md

@@ -8,6 +8,14 @@ title: 用 Vue 实现音频可视化
 
 https://developer.mozilla.org/en-US/docs/Web/API/AudioContext
 
+## 效果
+
+<script setup>
+import VoiceVisualization from './voice-visualization/voice-visualization.vue'
+</script>
+
+<VoiceVisualization audio-source="./voice-visualization/Immortal.mp3" />
+
 ## 代码
 
 ```vue
@@ -158,11 +166,3 @@ onBeforeUnmount(() => {
   }
 </style>
 ```
-
-## 效果
-
-<script setup>
-import VoiceVisualization from './voice-visualization/voice-visualization.vue'
-</script>
-
-<VoiceVisualization audio-source="./voice-visualization/Immortal.mp3" />