YianNotes

一、核心概念1. 拖放三要素 拖动的元素：被拖拽的物品 待传输的数据：通过 DataTransfer 传递 放置目标：可放置的区域 2. 重要特性 拖拽过程中，原始元素保持原位不动 浏览器创建半透明幽灵图像跟随鼠标 所有业务逻辑都需要手动实现 二、事件系统事件流程1dragstart → drag → dragenter → dragover → dragleave → drop → dragend 事件详解 事件 触发元素 作用 dragstart 可拖动元素 设置拖拽数据和权限 drag 可拖动元素 拖拽过程中连续触发 dragenter 目标元素 第一次进入目标边界 dragover 目标元素 在目标边界内移动 dragleave 目标元素 离开目标边界 drop 目标元素 在目标上释放 dragend 可拖动元素 拖拽操作结束 三、DataTransfer 对象1. 数据操作123456789// 设置数据event.dataTransfer.setData("text/plain", "数据内容&...

CSS 的 pointer-events 属性pointer-events 属性 决定了某个图形元素（如 HTML 元素、SVG 图形等）是否能够成为鼠标事件（比如点击、悬停等）的目标（target），以及在什么情况下它会成为目标 鼠标事件（如点击、悬停等）是有目标的，目标就是接收到该事件的元素。例如，点击一个按钮时，按钮就是鼠标事件的目标。 简单来说，pointer-events 用来控制哪些元素可以响应鼠标事件，哪些元素会忽略这些事件。当你点击页面上的某个元素时，浏览器会根据 pointer-events 属性来判断是否将鼠标事件传递给该元素 pointer-events 属性的常用值 auto：默认值，元素可以成为鼠标事件的目标。 none：元素不能成为鼠标事件的目标，鼠标事件会穿透该元素，继续传递给元素后面的元素。 …

问题描述1. 版本兼容问题 项目多，迭代快，版本更新时，老版本不兼容。 2. 数据一致性差 新旧版本数据处理不一致，导致数据不一致。 3. 环境变量管理混乱 环境配置复杂，跨环境管理困难。 4. 平滑部署 部署新版本时，如何不影响旧版本。

在传统的单体应用中，服务和它们的依赖通常是静态的，地址和端口是固定的，因此配置文件里可以硬编码这些信息。而在微服务架构中，服务是动态变化的，服务的实例数量、地址、端口等都会随时变化。因此，如果依赖于硬编码的服务地址，维护起来将变得非常复杂，尤其是在面对横向扩展、服务实例崩溃或升级时，如何动态地更新服务地址变得至关重要。 服务注册和服务发现的核心目标是： 自动化管理服务实例的地址和端口： 微服务架构中的服务通常会不断增加或减少，且它们可能会随时在不同的机器或容器中启动或停止。手动更新这些服务的地址在配置文件中是非常繁琐的。 服务注册：当一个服务启动时，它会自动将自己的信息（如服务名、IP 地址、端口等）注册到服务注册中心。 服务发现：当其他服务需要调用该服务时，它们可以从服务注册中心动态查询到目标服务的地址，而不需要事先在配置文件中硬编码这些地址。 动态发现服务而不依赖固定的配置文件： 在服务注册和服务发现机制下，服务之间的调用不需要依赖固定的 IP 地址或端口。相反，服务会注册到一个中央服务注册中心，其他服务可以通过注册中心查询到该服务的最新地址。 例如，在一个微服务系统...

1. 核心定义 浏览器会话历史记录：指在一个浏览器标签页中，从打开到关闭期间访问的所有网页形成的有序序列。 生命周期：与标签页绑定，关闭标签页即销毁。 核心功能：实现「前进」、「后退」导航。 2. 关键区分 概念 会话历史记录 浏览器历史记录 范围 当前标签页的单次会话 所有会话的长期记录 持久性 临时，关闭标签页即消失 永久，直到手动删除 查看方式 通过「前进/后退」按钮 通过 Ctrl+H (历史记录页) 数据性质 导航栈，存储在浏览器内核 URL 集合，存储在硬盘 3. 技术实现：History APIwindow.history 是操作会话历史记录的接口 核心方法：12345678// 导航history.back(); // 后退 ←history.forward(); // 前进 →history.go(-2); // 跳转指定步数// 添加/修改记录history.pushState(state, title, url); // 添加新记录history.replaceState(state, title, url); // 替...

需求整理 1. GitHub 推送触发 任务: 在 GitHub 上推送代码后触发自动部署流程。 实现: 配置 GitHub Actions 或 Webhook，将代码推送到 GitHub 后，自动触发 Docker 镜像构建并上传。 子任务: 配置 GitHub Actions 或 Webhook 来监听推送。 设置合适的触发条件，如推送到 main 分支。 2. 创建触发接口（API） 任务: 编写一个 API 接口，用于手动触发 Docker 打包过程。 实现: 使用如 Flask（Python）或 Express（Node.js）等 Web 框架创建一个 API，能够接受请求并启动 Docker 打包流程。 子任务: 创建一个 POST 接口，接收构建请求。 接口实现调用 Docker 构建命令（docker build）并返回构建状态。 3. 构建 Docker 镜像 任务: 编写 Dockerfile 并通过接口触发构建。 实现: 在构建服务器上执行 Docker 构建，生成目标镜像。 子任务: 确定 Dockerfile 配置，确保包含...

🎯 核心概念同源策略是浏览器的安全基石，像小区的围墙，默认隔离不同来源的资源，保护用户数据不被恶意网站窃取。 什么是“同源”？三要素必须完全一致： 协议（http / https） 域名（www.example.com） 端口（80 / 443） ⚡ 关键机制判断时机：实时检查同源判断发生在敏感操作执行的瞬间，不是预先分类： 12345678// 示例1：网络请求fetch("https://api.other-site.com/data"); // ⚠️ 在此刻判断！// 示例2：DOM访问iframe.contentDocument; // ⚠️ 在此刻判断！// 示例3：存储访问localStorage.getItem("key"); // 自动关联当前源 重要特性：脚本继承源12<!-- 在 https://my-site.com 中 --><script src="https://cdn.other-site.com/library.js"></scri...

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 的窗口） 脚本访问框架...

📚 核心概念1. 什么是 Promise？123456789101112131415161718// Promise 三种状态const states = { PENDING: "pending", // 初始状态 FULFILLED: "fulfilled", // 操作成功完成 REJECTED: "rejected", // 操作失败};// 创建 Promiseconst promise = new Promise((resolve, reject) => { // 异步操作 setTimeout(() => { if (Math.random() > 0.5) { resolve("成功数据"); // 状态变为 fulfilled } else { reject("失败原因"); // 状态变为 rejected } &#...