YianNotes

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130const path = require("path")const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode: 'development', entry: { index: "./src/index.js&...

🗺️ 第一阶段：resolve —— 找路径目标：把代码里写的简写、别名、包名，翻译成硬盘上的绝对路径。 拿到引用字符串：Webpack 在 AST 里发现了一个依赖，比如 import x from 'my-ui' 或 import './style.css'。 查 alias：看看有没有配置路径别名（比如把 @ 替换成真实的 src 目录）。 查 modules：如果是纯包名（如 my-ui），就去 node_modules 里找这个文件夹。 查说明书：找到文件夹后，看 descriptionFiles（默认 package.json），根据 mainFields 决定入口文件。 补全后缀：如果路径没有后缀，按 extensions 数组的顺序依次去试（.js -> .vue -> .json）。 处理软链接：如果发现是快捷方式，根据 symlinks 决定是顺着找真实路径，还是当成普通内部文件。 交卷：最终吐出一个确定的绝对路径（例如 D:\...\src\style.css）。 ⚙️ 第二阶段：rules 与 noPar...

前置技能 npm 工具的简单了解 Monorepo 是一种软件开发策略，它将多个项目、模块、包或应用程序的代码存储在同一个版本控制仓库（Repository）中。这与传统的 Multirepo（多仓库）模式形成对比，后者是为每个项目或模块创建一个独立的仓库。 Monorepo (单一仓库): 所有代码都在一个大仓库里，比如 my-company-monorepo/，里面可能包含 packages/frontend/, packages/backend/, packages/shared-utils/, apps/mobile-app/ 等。 Multirepo (多仓库): 每个项目或模块都有自己的独立仓库，比如 frontend-repo/, backend-repo/, shared-utils-repo/, mobile-app-repo/。 快速启动学习Monorepo 的核心思想是将多个项目放在一个仓库里，但要让这种模式高效、可管理，...

SSH（Secure Shell）1. 什么是 SSH？SSH 是一种加密的网络协议，用于安全地远程登录到服务器和执行命令。 2. 基本连接命令1234567891011# 最基本连接（使用当前用户名）ssh 192.168.1.100# 指定用户名ssh username@192.168.1.100# 指定端口（默认是22）ssh -p 2222 username@192.168.1.100# 使用域名连接ssh username@example.com 3. 高级用法密钥认证（免密码登录）： 12345678# 生成密钥对ssh-keygen -t rsa -b 4096 -C "your_email@example.com"# 将公钥复制到服务器ssh-copy-id username@192.168.1.100# 或者手动复制cat ~/.ssh/id_rsa.pub | ssh username@192.168.1.100 "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized...

深入理解对象、函数、[[Prototype]]、prototype、constructor 与属性查找机制 一、核心概念速览 概念 类型 所有者 作用 [[Prototype]] 内部槽（Internal Slot） 所有对象（除 null） 指向原型，用于属性查找 prototype 属性（Property） 函数对象（可构造函数） 作为实例的“模板”对象 constructor 属性（Property） prototype 对象默认属性 指向构造函数本身 原型链 机制 —— 通过 [[Prototype]] 链式查找属性 二、[[Prototype]]：对象的“原型指针”✅ 是什么？ 每个对象（除 null）都有一个内部属性 [[Prototype]] 它是一个指针，指向该对象的“原型”（另一个对象或 null） 它是实现继承和属性查找的核心 ✅ 如何访问？ 推荐：Object.getPrototypeOf(obj) 不推荐：obj.__proto__（已废弃，仅用于调试） 12const obj = {};Objec...

一、事件流模型1. 事件流简介事件流描述 DOM 事件 在 DOM 树中传播的完整过程，包含三个阶段： 2. 事件流的三大阶段（1）捕获阶段（Capturing Phase） 事件从 window 向 目标元素 传播 从最外层祖先元素向内传播，直到目标元素 通过 addEventListener 的第三个参数为 true 启用 （2）目标阶段（Target Phase） 事件到达实际触发事件的元素 执行目标元素上绑定的所有事件监听器 此阶段不分捕获和冒泡，按添加顺序执行 （3）冒泡阶段（Bubbling Phase） 事件从 目标元素 向 window 传播 从目标元素向外传播到最外层祖先元素 默认阶段，大多数事件在此阶段触发 3. 完整事件流顺序1234567891011用户交互触发事件 ↓创建事件对象（包含所有事件信息） ↓捕获阶段：window → document → body → 父元素 → 目标元素 ↓（依次执行每个元素上的捕获回调）目标阶段：在目标元素上执行所有监听器 ↓（按添加顺序执行，不分捕获/冒泡）冒泡阶段：目标元素 → 父元素 ...

一、执行上下文（Execution Context）JavaScript 执行代码时，会为每一段可执行代码创建一个 执行上下文，它是代码运行的“环境”。 三种类型 全局执行上下文：脚本启动时创建，全局作用域。 函数执行上下文：每次调用函数时创建。 eval 执行上下文：eval 中执行代码时创建（不常用）。 执行上下文的结构每个执行上下文在运行时包含三个核心部分： 组件 说明 LexicalEnvironment 当前上下文的词法环境（管理 let/const） VariableEnvironment 当前上下文的变量环境（管理 var/函数声明） ThisBinding this 的值 ✅ 简记：执行上下文 = 词法环境 + 变量环境 + this 二、词法环境 vs 变量环境 名称 负责 特点 LexicalEnvironment let、const 有块级作用域，有“暂时性死区”（TDZ） VariableEnvironment var、函数声明 有变量提升，无块级作用域 ⚠️ 注意：函数开始...

生成器基础生成器返回一个迭代器对象 或者说是一个带迭代器的集合 也就是可迭代的对象 123456function* generator() { const a = yield 1; // 暂停，返回 {value: 1, done: false} return a; // 结束，返回 {value: a, done: true}}const gen = generator(); // 返回生成器对象（可迭代对象） 1. next() 方法传参机制（重点补充）核心规则：next(value) 的参数会成为上一个 yield 表达式的返回值 123456789101112131415161718192021function* demo() { console.log("开始"); const step1 = yield "第一步"; // next() 停在这里 console.log("step1:", step1); // step1: 外...

迭代是什么迭代是指遍历一个集合（如数组、对象、集合等）的所有元素，通常是按照某种顺序访问。迭代器（Iterator）就是提供这种遍历功能的对象。 迭代器 迭代器（Iterator）是一种 ​ 对象​​，它提供了一种标准的方式来 ​ 按顺序访问集合中的元素 ​​。迭代器的核心是它实现了 next()方法，每次调用 next()会返回当前元素并移动指针到下一个位置。 迭代器协议规定:要成为一种迭代器，必须满足迭代器对象有一个 next 方法，next 方法返回一个对象，这个对象包含两个属性，value：当前迭代的值（可以是任意类型）和 done：布尔值，表示迭代是否完成。 其实还有 return()方法和 throw() 用来提前结束或者抛出错误 可迭代对象实现了【Symbol.iterator】 方法的对象 ​，这个方法返回一个迭代器对象。可迭代对象可以用 for...of 遍历，或通过 ... 展开 示例： 1234567891011121314151617181920// 让一个普通对象变为可迭代对象const myIterableObject = { dat...

一句话总览：三个“缓存杀手”都是因为Redis没拦住请求，导致压力转移到数据库，但触发原因和影响范围完全不同。 一、三者对比（一图秒懂） 术语 一句话定义 触发条件 影响范围 危险等级 缓存击穿 一个热点Key过期，海量请求直击DB 热点Key在高并发瞬间过期 只影响这一个Key对应的业务 ⭐⭐⭐⭐⭐ 缓存雪崩 大批量Key同时过期，DB瞬间爆了 大量Key设置了相同的过期时间 影响大面积业务，可能导致整体服务不可用 ⭐⭐⭐⭐⭐ 缓存穿透 查询的Key在DB中根本不存在，每次都绕开缓存 恶意请求查询不存在的ID（如-1） 持续打DB，直到DB扛不住 ⭐⭐⭐⭐ 二、缓存击穿（Cache Breakdown）是什么？一个超级热点数据（比如双11爆款商品、春运车票）在缓存中过期的瞬间，成千上万的并发请求同时发现缓存为空，全部穿透到数据库。 发生原因 热点数据设置了过期时间 在高并发窗口期内恰好过期 大量请求在同一毫秒发现缓存为空，同时查询DB 解决方案 方案 原理 适用场景 代码思路 互斥锁（SET NX） 只有1个请求能抢到锁去查DB，其他请求等...