From 2834cbfe9bf7c23807b0b88f304458b1aede7f98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A2=E6=99=93=E9=94=8B?= Date: Wed, 24 Jul 2024 21:04:52 +0800 Subject: [PATCH] =?UTF-8?q?docs=F0=9F=93=9D:=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- code/ssr/server.js | 59 +++++++------- .../7.dom\347\233\270\345\205\263.md" | 8 ++ ...23\345\214\205\345\267\245\345\205\267.md" | 0 .../2.SWC.md" | 0 ...7\256\241\347\220\206\344\271\213volta.md" | 79 +++++++++++++++++++ 5 files changed, 116 insertions(+), 30 deletions(-) create mode 100644 "pages/6-\345\211\215\347\253\257\347\237\245\350\257\206\347\202\271/7.dom\347\233\270\345\205\263.md" rename "pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/\345\211\215\347\253\257\346\211\223\345\214\205\345\267\245\345\205\267.md" => "pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/1.\345\211\215\347\253\257\346\211\223\345\214\205\345\267\245\345\205\267.md" (100%) rename "pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/SWC.md" => "pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/2.SWC.md" (100%) create mode 100644 "pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/3.node\347\211\210\346\234\254\347\256\241\347\220\206\344\271\213volta.md" diff --git a/code/ssr/server.js b/code/ssr/server.js index 7ea1fae..3bcb570 100644 --- a/code/ssr/server.js +++ b/code/ssr/server.js @@ -1,32 +1,31 @@ -import express from "express"; -import * as reactServer from "react-dom/server"; -import Home from "./Home.js"; -import React from "react"; +function asyncAdd(a, b, callback) { + setTimeout(function () { + callback(a + b); + }, 1000); +} -const app = express(); +function sum(...args) { + function fn(nums) { + const pList = []; + const len = nums.length; + if (len === 0) return Promise.resolve(0); + if (len === 1) return Promise.resolve(nums[0]); + // return new Pro + let i = 0; + while (i < nums.length) { + pList.push( + new Promise((resolve) => { + const next = typeof nums[i + 1] === "number" ? nums[i + 1] : 0; + asyncAdd(nums[i], next, resolve); + }) + ); + i += 2; + } + return Promise.all(pList).then((res) => { + return fn(res); + }); + } + return fn(args); +} -const content = reactServer.renderToString(React.createElement(Home)); - -app.get("/", (req, res) => { - res.setHeader("Content-Type", "text/html"); - res.setHeader("Access-Control-Allow-Origin", "*"); - res.setHeader("Set-Cookie", "sid=kljsadflkjkljkljkalsdjf;p=asdfk1"); - res.send(` - - - ssr - - -
${content}
- - - - `); -}); - -app.use(express.static("public")); - -app.listen(3000, () => { - console.log("Server is running on port 3000"); - console.log("http://localhost:3000"); -}); +sum(1, 2, 3, 4, 5).then((result) => console.log(result)); diff --git "a/pages/6-\345\211\215\347\253\257\347\237\245\350\257\206\347\202\271/7.dom\347\233\270\345\205\263.md" "b/pages/6-\345\211\215\347\253\257\347\237\245\350\257\206\347\202\271/7.dom\347\233\270\345\205\263.md" new file mode 100644 index 0000000..6a8b6fa --- /dev/null +++ "b/pages/6-\345\211\215\347\253\257\347\237\245\350\257\206\347\202\271/7.dom\347\233\270\345\205\263.md" @@ -0,0 +1,8 @@ +# 7. DOM相关 + +DOM节点的各种位置，比 clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？ +clientHeight：表示的是可视区域的高度，不包含 border 和滚动条 +offsetHeight：表示可视区域的高度，包 含了 border 和滚动条 +scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。 +clientTop：表示边框 border 的厚度，在未指定的情况下一般为 +scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度。 \ No newline at end of file diff --git "a/pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/\345\211\215\347\253\257\346\211\223\345\214\205\345\267\245\345\205\267.md" "b/pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/1.\345\211\215\347\253\257\346\211\223\345\214\205\345\267\245\345\205\267.md" similarity index 100% rename from "pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/\345\211\215\347\253\257\346\211\223\345\214\205\345\267\245\345\205\267.md" rename to "pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/1.\345\211\215\347\253\257\346\211\223\345\214\205\345\267\245\345\205\267.md" diff --git "a/pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/SWC.md" "b/pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/2.SWC.md" similarity index 100% rename from "pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/SWC.md" rename to "pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/2.SWC.md" diff --git "a/pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/3.node\347\211\210\346\234\254\347\256\241\347\220\206\344\271\213volta.md" "b/pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/3.node\347\211\210\346\234\254\347\256\241\347\220\206\344\271\213volta.md" new file mode 100644 index 0000000..94dfe53 --- /dev/null +++ "b/pages/7-\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226/3.node\347\211\210\346\234\254\347\256\241\347\220\206\344\271\213volta.md" @@ -0,0 +1,79 @@ +# 3.node版本管理之volta + +## volta介绍 + +Volta 是一个跨平台的 Node.js 版本管理工具，它可以帮助你管理不同项目的 Node.js 版本，并提供一个统一的命令行界面来管理 Node.js 版本。 + +Volta 可以帮助你： + +- 管理不同项目的 Node.js 版本 +- 在项目粒度固定 Node.js 版本 和 包管理工具 + + +## 安装volta + +Volta 可以在 macOS、Windows 和 Linux 上安装。 + +这里介绍 macOS 上的安装方法： + +```bash +curl https://get.volta.sh | bash +``` + +### 验证安装 +重新开一个标签，输入以下命令 +```bash +volta --version +``` + +### 支持 pnpm + +pnpm 默认是无法接管到项目的，需要在配置文件开启： + +```bash +# .bashrc 或 .zshrc +# bash +echo "export VOLTA_FEATURE_PNPM=1" >> ~/.bashrc +# zsh +echo "export VOLTA_FEATURE_PNPM=1" >> ~/.zshrc +``` + +## 管理 Node.js 或者包管理工具版本 + +### 安装 + +```bash +# 安装node +volta install node@14 +# 安装yarn +volta install yarn +# 安装pnpm +volta install pnpm +``` + +## 项目固定版本 + +```bash +# 固定node版本 +volta pin node@14 +# 固定yarn版本 +volta pin yarn +# 固定pnpm版本 +volta pin pnpm +``` + +执行以上命令后，volta 会在 package.json 文件中添加以下内容： + +```json +{ + "volta": { + "node": "14.15.4", + "yarn": "1.22.10", + "pnpm": "5.18.8" + } +} +``` + +## 总结 + +volta 底层基于 Rust 编写，性能高，并且可以在项目粒度固定 Node.js 版本 和 包管理工具，非常适合前端不同项目的管理，不需要像 nvm 那样手动切换版本，非常推荐。 \ No newline at end of file