SPA
1. 什么是 SPA？ SPA（Single Page Application） 是一种 Web 应用架构，整个应用只有一个 HTML 页面（通常是 index.html），所有页面内容通过 JavaScript 动态加载和更新，无需重新加载整个页面。 2. SPA 的核心思想 页面跳转 = JavaScript 执行 + DOM 更新 不通过传统方式请求新 HTML 文件 所有“页面变化”由 JS 控制，体验像原生 App 3. SPA vs 传统多页应用（MPA） 对比项 SPA（单页应用） MPA（多页应用） 页面数量 1 个 HTML 多个 HTML 文件 页面跳转 JS 动态更新内容，不刷新 请求新 HTML，页面刷新 首次加载 较慢（需下载 JS） 较快（直接显示） 后续交互 极快（无刷新） 每次都刷新 SEO 较差（需 SSR/SSG 优化） 较好 适用场景 后台系统、Web App 博客、文档、简单网站 4. SPA 的工作流程12345671. 用户访问 / → 服务器返回 index.html2....
状态机
状态机的核心思想状态机的核心思想就是 将行为的判断集中控制，并且通过明确的状态和状态之间的转换来管理系统的行为。 在传统的编程中，尤其是有多个状态的系统，往往会在代码中出现很多条件判断（如 if-else 或 switch）来决定当前状态下应该执行什么操作。而使用状态机的方式，我们将这些条件判断集中管理，通常通过一种结构化、明确的方式来定义每个状态及其可能的行为和转换规则。 核心概念 状态：系统可以处于的不同状态（例如，Pending、Paid、Shipped、Delivered）。 状态转换：从一个状态到另一个状态的转移（例如，从 Pending 到 Paid，从 Paid 到 Shipped）。 行为：当系统处于某个状态时，它执行的操作或行为（例如，当订单状态是 Paid 时，系统可以触发发货操作）。 状态机的作用：通过控制和管理状态之间的转换规则和行为，使得状态管理变得清晰、统一、可扩展。 为什么状态机有效？ 集中控制行为： 所有的状态和行为都被集中管理，你不再需要在程序中到处写 if-else 或 switch 语句来判断当前状态。 每个状态下的行为都被明确地定义在状...
Javascript 碎片
方括号[] 动态属性访问 obj[key] 表达式计算键名 数组访问 arr[0] 索引本质是字符串 计算属性名{ [key]: value }动态生成属性名（ES6） 解构赋值 const [a] = [1] 提取数组或对象的值 正则表达式字符集合/[aeiou]/匹配一组字符 类数组操作arguments[0] 类似数组的访问方式 SymbolSymbol 是 ES6 引入的一种 基本数据类型，用于表示 唯一的、不可变的值 。 同步循环阻塞微队列：无限循环问题分析问题代码12345678910111213141516171819202122function* generator() { const value = yield Promise.resolve(1); const value2 = yield Promise.resolve(value); const value3 = yield Promise.resolve(value2); return value3;}function run(generator) {...
SSR 与 Hydration（注水）详解
一、什么是 SSR？SSR（Server-Side Rendering，服务端渲染） 是指在服务器上将页面的结构和数据预先渲染成完整的 HTML 字符串，并返回给浏览器。 ✅ 用户请求 → 服务器生成含内容的 HTML → 浏览器直接展示 SSR 的优势： 首屏加载快：用户无需等待 JavaScript 下载执行即可看到内容。 SEO 友好：搜索引擎爬虫可以直接抓取已渲染的内容。 更好的用户体验：尤其在网络较差或设备性能较低时表现更佳。 二、SSR 返回的是“静态”HTML服务器返回的 HTML 是包含实际内容的静态结构，例如： 123456789<html> <body> <div id="app"> <h1>欢迎来到我的网站</h1> <p>这是从数据库获取的数据</p> </div> <script src="/assets/client.js" defer></script...
property和attribute区别
“property”（属性）和“attribute”（特性/属性）这两个术语经常被使用，有时可以互换，但在不同语境下有明确的区别 Attribute vs Property 完整总结核心概念 Attribute（特性）: HTML 标签上的属性 Property（属性）: DOM 对象上的属性 根本区别 特性 Attribute Property 归属 HTML 标签 DOM 对象 值类型 总是字符串 任意 JS 类型 大小写 不敏感 敏感 操作方式 getAttribute()/setAttribute() 点符号操作 布尔属性 存在即为真 true/false 操作示例1<input id="myInput" type="text" value="初始值" checked custom-attr="自定义" /> 12345678// Attribute 操作element.getAttribute("value"); /...
TypeScript 编译工具 `tsconfig.json`配置项说明
tsc 作用是 检查类型 和 编译成 js . 为了更好地控制编译行为（比如目标 JS 版本、是否严格检查类型等），建议创建一个配置文件。 target 作用： 指定编译后的 JavaScript 目标版本。 常见值： “ES3”（最老，兼容性最好，但功能少） “ES5”（经典，兼容所有浏览器） “ES2015” 或 “ES6”（现代浏览器支持） “ES2016”、”ES2017”、”ES2020”、”ESNext”（最新语法） module 作用： 指定模块系统的代码生成格式。 常见值： “commonjs” → 用于 Node.js（使用 require / module.exports） “es2015” / “esnext” → 用于浏览器（使用 import / export） “amd”、”umd” → 用于老项目或库打包 strict: true 作用： 开启所有严格类型检查模式 outDir 作用： 指定编译后生成的 .js 文件输出到哪个文件夹 rootDir: “./src” 作用： 指定源码结构的根...
CSS属性 display属性的contents值
display: contents 是 CSS Display Module Level 3 中引入的一个比较特殊且强大的值。它的作用是：让一个元素本身不产生任何盒模型（即不渲染），但它的子元素会像直接继承了该元素的父元素一样正常渲染。 简单来说：这个元素“消失”了，但它的孩子“冒出来”代替它参与布局。 🔍 一、基本语法123.element { display: contents;} 🧩 二、核心特性 特性 说明 不渲染自身 元素本身不生成任何视觉框（box），即没有背景、边框、大小、定位等。 子元素“提升” 子元素直接参与父元素的布局，仿佛父元素不存在。 保留语义和 DOM 结构 DOM 节点仍然存在，JavaScript 和 CSS 选择器仍可访问它。 不影响可访问性（需注意） 屏幕阅读器仍能读取内容，但布局上“跳过”了该层。 ✅ 三、实际例子示例 1：display: contents 的效果123456<div class="parent"> <div class=&qu...
GitHub Actions Workflow 语法
Github workflow 语法 适用场景：CI/CD 自动化构建、测试、部署等文件位置：.github/workflows/xxx.yml语法格式：YAML（注意缩进，通常为 2 空格） 一、基本结构123456789101112131415name: 工作流名称（可选）on: [触发事件] # 必需jobs: job1: runs-on: 运行环境 steps: - step1 - step2 job2: needs: job1 runs-on: ubuntu-latest steps: - step3 二、核心字段详解1. name（可选） 定义工作流在 GitHub Actions 面板中显示的名称。 示例： 1name: CI Pipeline 2. on（必需） 定义触发工作流的事件。 常见事件： push：代码推送 pull_request：PR 创建/更新 schedule：定时任务（cron） workflow_dispatch：手动触发 示例123...
Docker
简述 通过 dockerfile 构造镜像 通过镜像文件构造容器 运行 docker 容器 常用命令🧰 一、镜像相关（Images） 命令 说明 docker images 查看本地所有镜像 docker pull 镜像名:标签 从仓库下载镜像（如 docker pull nginx:alpine） docker build -t 镜像名:标签 . 用当前目录的 Dockerfile 构建镜像 docker rmi 镜像名或ID 删除镜像（-f 强制删除） docker image ls 同 docker images docker image rm 同 docker rmi 示例1234docker pull ubuntu:20.04docker build -t my-app:v1 .docker imagesdocker rmi my-app:v1 📦 二、容器相关（Containers） 命令 说明 docker run [选项] 镜像名 [命令] 创建并启动一个容器（最常用！） docker start 容器名/...
CSS 之 transform
一、三大核心属性 属性 作用 是否必须 类比 perspective 设置观察者距离，开启 3D 视觉空间 ✅ 必须（父容器） 摄像机离场景多远 transform-style: preserve-3d 让子元素的子元素进入 3D 空间，不被压扁 ✅ 嵌套 3D 时必须 打开“3D 结界” backface-visibility: hidden 元素背面朝你时自动隐藏 ✅ 翻转/立方体时必须 纸牌转过去就消失 二、核心概念解析1. perspective（透视） 作用：决定透视的强烈程度 perspective: 200px → 近，透视强（夸张） perspective: 1000px → 远，透视弱（平缓） 必须加在父容器上，不能加在变换元素自身 123.scene { perspective: 800px;} 2. transform-style: preserve-3d 默认是 flat → 子元素被压扁到父平面,换言之就是子元素应用 3d 效果看不出来，比如 translateZ 就和 scale 看不出区别...