feat: update

src/pages/node/event-loop/index.tsx

@@ -0,0 +1,33 @@
+import { EventSystem } from "./src"
+
+const eventSystem = new EventSystem()
+
+const Eventloop = () => {
+  const enQueue = () => {
+    console.log("enQueue")
+    const curDate = new Date()
+    eventSystem.enQueue(() => {
+      console.log("time: " + curDate)
+    })
+  }
+
+  const run = () => {
+    console.log("run")
+    eventSystem.run()
+  }
+
+  const end = () => {
+    console.log("end")
+    eventSystem.setStop()
+  }
+
+  return (
+    <div>
+      <button onClick={enQueue}>enQueue 添加任务</button>
+      <button onClick={run}>run 启动事件循环</button>
+      <button onClick={end}>end 关闭事件循环</button>
+    </div>
+  )
+}
+
+export default Eventloop

src/pages/node/event-loop/src/index.js

@@ -0,0 +1,73 @@
+// https://juejin.cn/book/7171733571638738952/section/7174421241225281566?scrollMenuIndex=1
+
+// 麻雀虽小但五脏俱全，以上代码虽然只是个 demo，但已经具备了事件循环的一些核心功能。
+// 事件循环的整体架构是一个 while 循环
+// 定义任务类型和队列，这里只有一种任务类型和一个队列，比如 Node.js 里有好几种，每种类型的任务有不同的作用。
+// 没有任务的时候怎么处理：进入阻塞状态，而不是靠忙轮询。
+
+export class EventSystem {
+  constructor() {
+    // 需要处理的任务队列
+    this.queue = []
+    // 标记是否需要退出事件循环
+    this.stop = 0
+    // 有任务时调用该函数"唤醒" await
+    this.wakeup = null
+  }
+
+  // 没有任务时，事件循环的进入"阻塞"状态
+  wait() {
+    return new Promise((resolve) => {
+      // 记录 resolve，可能在睡眠期间有任务到来，则需要提前唤醒
+      this.wakeup = () => {
+        this.wakeup = null
+        resolve()
+      }
+    })
+  }
+
+  // 停止事件循环，如果正在"阻塞"，则"唤醒它"
+  setStop() {
+    this.stop = 1
+    this.wakeup && this.wakeup()
+  }
+
+  // 生产任务
+  enQueue(func) {
+    this.queue.push(func)
+    this.wakeup && this.wakeup()
+  }
+
+  // 处理任务队列
+  handleTask() {
+    if (this.queue.length === 0) {
+      return
+    }
+    // 本轮事件循环的回调中加入的任务，下一轮事件循环再处理，防止其他任务没有机会处理
+    const queue = this.queue
+    this.queue = []
+    while (queue.length) {
+      const func = queue.shift()
+      func()
+    }
+  }
+
+  // 事件循环的实现
+  async run() {
+    // 如果 stop 等于 1 则退出事件循环
+    while (this.stop === 0) {
+      // 处理任务，可能没有任务需要处理
+      this.handleTask()
+      // 处理任务过程中如果设置了 stop 标记则退出事件循环
+      if (this.stop === 1) {
+        break
+      }
+      // 没有任务了，进入睡眠
+      if (this.queue.length === 0) {
+        await this.wait()
+      }
+    }
+    // 退出前可能还有任务没处理，处理完再退出
+    this.handleTask()
+  }
+}

src/pages/node/index.tsx

@@ -1,5 +1,18 @@
-export const NodePage = () => {
-  return <div>NodePage</div>
+import { CommonPageRouter } from "../main"
+import { lazy } from "react"
+
+const Eventloop = lazy(() => import("./event-loop"))
+
+export const children = [
+  {
+    path: "eventloop",
+    element: <Eventloop></Eventloop>,
+    title: "简单版Eventloop",
+  },
+]
+
+const NodePage = () => {
+  return <CommonPageRouter routes={children}></CommonPageRouter>
 }
 
 export default NodePage

src/pages/node/js-libuv/src/index.js

@@ -0,0 +1,6 @@
+// https://juejin.cn/book/7171733571638738952/section/7173918784720207879?scrollMenuIndex=1#heading-2
+
+// js <=> c++ <=> libuv
+// JS 和 C、C++ 层的通信，Node.js 很多功能都是由 C、C++ 实现，然后暴露到 JS 层使用的，
+// 所以当我们调用 JS 代码时，就会进入 C++ 层，接着 C++ 层会进入 Libuv 的 C 层，
+// 等到 Libuv 完成操作后就会回调 C++ 代码，最终 C++ 代码再回调 JS 层。

src/pages/node/mini-koa/src/kob.js

@@ -1,3 +1,5 @@
+简单手写实现koa
+
 const http = require("http")
 const context = require("./context")
 const request = require("./request")
@@ -50,7 +52,7 @@ class KOB {
       return dispatch(0)
 
       function dispatch(i) {
-        let fn = middlewares[i]
+        const fn = middlewares[i]
         if (!fn) {
           return Promise.resolve()
         }

src/router/index.tsx

@@ -6,6 +6,7 @@ import { children as ReactChildren } from "../pages/react"
 import { children as AnimateChildren } from "../pages/animation"
 import { children as CanvasChildren } from "../pages/canvas"
 import { children as WebpackChildren } from "../pages/webpack"
+import { children as NodeChildren } from "../pages/node"
 import { Suspense, lazy } from "react"
 import { HashRouter, Route, Routes } from "react-router-dom"
 import { PageRoute } from "../types"
@@ -54,6 +55,7 @@ export const routes: PageRoute[] = [
     path: "/node",
     element: <NodePage></NodePage>,
     title: "node 相关",
+    children: NodeChildren,
   },
   {
     path: "/web-rtc",
@@ -84,7 +86,7 @@ export const routes: PageRoute[] = [
 
 export const RouteContainer = () => {
   const genRoutes = (routes: PageRoute[]) => {
-    let finalRoutes = routes.map((item) => {
+    const finalRoutes = routes.map((item) => {
       const { path, element, children, index } = item
       return !index ? (
         <Route