YianNotes

iframe 简介 HTML 元素 <iframe> 表示嵌套的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中 嵌套的浏览器上下文都有自己的 Document，在嵌套的浏览器上下文中，允许 URL 导航 每个嵌入的浏览器上下文中的导航的动作 都会线性的插入顶级浏览器上下文的 历史会话记录中。 包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。 内联框架，比如 <iframe> ，会被包含在 window.frames 伪数组中,每个元素都是 window 对象 使用 dom 获取到 iframe 的 dom 元素对象后，可以使用 contentWindow 属性访问内联框架的 window 对象。 使用 dom 获取到 iframe 的 dom 元素对象后，可以使用 contentDocument 属性访问内联框架的 document 对象。 在 iframe 内部，脚本可以通过 window.parent 获取父窗口的引用。（父窗口就是包含 iframe 的窗口） 脚本访问框架...

引言await 是 ES2017 引入的语法糖，用于简化 Promise 的使用。 在学习 await 之前，我们先来看一段生成器（Generator）的代码： 123456function* generator() { yield 1; yield 2; yield 3; return 4;} 如果想获取这个迭代器对象的最终返回值，我们需要手动调用 next() 方法： 12345const iterator = generator();console.log(iterator.next()); // { value: 1, done: false }console.log(iterator.next()); // { value: 2, done: false }console.log(iterator.next()); // { value: 3, done: false }console.log(iterator.next()); // { value: 4, done: ...

:has() 是 CSS 的 父选择器，能够让父元素根据子元素的状态（如 hover）来改变自身样式。 基本用法123.parent:has(.child:hover) { background-color: gold; /* 父元素的背景变为金色 */} .parent：父元素类名； .child：子元素类名； 当 .child 被 hover 时，.parent 会变为金色。 特点 CSS 父选择器：这是一个让父元素根据子元素状态变化的原生方法。 简洁：相比 JavaScript，纯 CSS 代码实现，易于理解和维护。 链式选择：不仅支持 hover，还可以配合其他状态（如 :focus、:checked 等）。 支持情况 Chrome：从 105 版本开始支持； Safari：从 15.4 版本开始支持； Edge：从 105 版本开始支持； Firefox：暂时不支持，计划未来支持。 优点 简洁：用 CSS 解决问题，无需 JavaScript。 性能：CSS 性能优于 JavaScript，且无需额外的事件监听。 语义清晰：代码更简洁、...

🔧 核心技术关键词前端/浏览器技术123456789101112// 代码编辑和执行- CodeMirror- Monaco Editor (VS Code 内核)- Ace Editor- Prism.js (代码高亮)// 执行环境- IFrame sandbox- Web Workers- Service Workers- WebAssembly (WASM)- Shadow DOM 代码执行引擎123456- Code Sandbox- Code Execution Engine- REPL (Read-Eval-Print Loop)- Jupyter Kernel- Node.js VM module- Pyodide (Python in Browser) 🛡️ 安全隔离关键词1234567- Sandboxed Execution- Code Isolation- Capability-based Security- Resource Quotas- Docker Containerization- Kubernetes Pods- Firecr...

Web Storage API 提供了在浏览器端存储数据的功能，分为两种存储方式：localStorage 和 sessionStorage。它们各自有不同的特点和应用场景，下面是详细总结： 1. localStorage：持久化存储 持久性：数据会永久存储，直到显式删除。即使浏览器关闭，数据依然存在。 作用范围：同源（同协议、同域名、同端口）的多个页面之间都能访问。 存储大小：通常约 5MB，具体大小依赖于浏览器。 API 操作： 存储数据：localStorage.setItem('key', 'value') 读取数据：localStorage.getItem('key') 删除数据：localStorage.removeItem('key') 清空所有数据：localStorage.clear() 适用场景： 用户偏好设置（如语言、主题、布局等） 存储长期的用户数据（如用户名、登录信息等） 避免重复请求数据，减少网络开销 示例：123456789// 存储数据localStorage.setI...

wget下载网络数据 示例用法 下载整个网站 1wget -r -np -k -p https://example.com 该命令将递归下载网站并保留页面中所有的资源（图片、样式表、脚本等），确保你能够离线查看该网站。 Let’s Encrypt ｜ Certbot 生成 ssl 证书 Consul 服务注册 服务发现 Corepack JavaScript 包管理器的管理器 管理项目中的包管理器的版本

css描边有很多种实现方式，svg是我用过比较好用的效果，其次是叠起来的形式，上层卡片压住下层卡片 下层卡片设置上渐变 就有渐变卡片的效果了有时间完善的写上几个实例

Concept list 获取Selection Selection 对象 Document execCommand 已废弃 Range 对象 Lib Slate tiptap prosemirror Quill lexical Selecion 和 Range 1️⃣ 基本概念 概念 说明 Selection 表示用户当前“选中了什么”的对象，是浏览器提供的接口。通过 window.getSelection() 获取。 Range 描述“从哪到哪”的精确范围对象，是底层数据结构。用于实际操作 DOM。 2️⃣ 核心关系 🔗 Selection 持有 Range，Range 定义选区内容 Selection 是“容器”或“视图” → 用户看到的高亮 Range 是“数据”或“工具” → 程序用来操作的内容 一个 Selection 可以包含多个 Range（但大多数浏览器只支持一个） 💡 不是 Selection 创建 Range，而是： 用户操作 → 浏览器创建 Range → 放入 Selection 程序创建 Range → ...

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 语句来判断当前状态。 每个状态下的行为都被明确地定义在状...