- 博客(152)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JS红宝书（第十四章）- MutationObserver 接口 2
的，这意味着：当 DOM 发生变化时，回调不会立即触发，而是会等待当前 JavaScript 执行上下文（如同步代码块、事件处理器）完成后，再统一处理所有变化。：若在回调中修改被观察的 DOM（如添加子节点），新的变化会被加入下一次队列，而非立即触发当前回调，从而避免同步递归导致的死循环。导致的 DOM 变化，并没有立即触发回调，而是等所有同步代码执行完后，才一次性触发回调，且变化被合并为一个队列。即使回调异步执行，短时间内大量小批量变化（如每秒几十次）会导致回调队列堆积，持续占用 CPU。
2025-10-23 20:23:11
548
原创 JS红宝书（第十四章）- MutationObserver 接口 1
（变化发生后，会等当前 JS 执行完再触发回调），避免了同步监听导致的性能问题和无限循环（例如在回调中修改 DOM 不会立即再次触发监听）。的 API，它可以异步检测 DOM 树的结构、属性、文本内容等变化，并在变化发生后触发回调函数。则由该配置对象的属性决定，包括观察的节点层级、具体变化类型等。时，仅观察目标节点自身的变化（如属性变化、自身文本变化），不包括任何子节点。时，观察目标节点的直接子节点（新增 / 删除），但不包括子节点的后代。及其内部所有元素的属性变化、文本变化、子节点增删。
2025-10-23 20:22:54
616
原创 JS红宝书（第十四章）- DOM 编程 2
表格操作：利用表格特有的rowstBodies等属性，以及insertRowinsertCell等方法，可高效增删改查行和单元格，注意隐式<tbody>和动态集合的特性。NodeList 使用：区分静态和动态集合，优先使用for...of或forEach遍历，必要时转为数组使用数组方法，避免频繁查询或访问动态集合的属性以优化性能。
2025-10-23 20:22:39
574
原创 JS红宝书（第十四章）- DOM 编程 1
（Document Object Model Programming）指的是通过编程语言（通常是 JavaScript）操作 DOM（文档对象模型），从而动态修改网页的内容、结构和样式的过程。它是前端开发的核心技术之一，让网页从静态的 HTML 文本转变为可交互、可动态更新的应用。（DOM 树），树上的每个节点对应文档中的一个部分（如标签、文本、属性、注释等）。元素（或其内容），从而在页面运行时动态加载脚本或修改样式。标签，它的优势在于可以按需加载（减少初始加载时间）、条件执行（根据场景加载不同脚本）。
2025-10-23 20:22:25
687
原创 JS红宝书（第十四章）- DOM 节点层级 3
DocumentType 类型是 DOM 中用于表示文档类型声明的节点，其核心作用是定义文档的语法规范。虽然日常开发中很少直接操作它，但理解其属性和作用有助于理解浏览器对文档的解析机制（例如 DOCTYPE 对渲染模式的影响）。对于 HTML5 文档，是标准声明，对应的 DocumentType 节点属性通常为固定值。DocumentFragment 是 DOM 操作中的 “性能优化工具”，它通过临时存储节点、减少 DOM 树的直接操作次数，显著提升批量节点添加 / 修改的效率。
2025-10-23 20:22:04
855
原创 JS红宝书（第十四章）- DOM 节点层级 2
Text 类型是 DOM 中处理纯文本的基础节点类型，它提供了修改、拆分、合并文本的方法，常用于动态生成或修改页面中的文本内容。理解 Text 节点有助于更精细地控制 DOM 中的文本部分。Comment 类型是 DOM 中用于表示注释的节点类型，虽然不直接影响页面显示，但提供了对注释内容的可编程访问能力。在需要动态操作或解析文档注释时（如模板处理、DOM 分析工具），了解 Comment 类型的特性会很有帮助。
2025-10-23 20:21:32
762
原创 JS红宝书（第十四章）- DOM 节点层级 1
Document 类型（通过document对象体现）是 DOM 操作的 “总入口”，它提供了访问文档根元素、查找元素、创建节点等核心能力，是 JavaScript 操控网页内容和结构的基础。日常开发中，大部分 DOM 操作都是从document对象开始的。Element 类型是 DOM 操作的核心，它封装了 HTML 元素的标签名、属性、类名、内容及样式等特性，并提供了丰富的方法用于操作这些特性。
2025-10-23 20:21:10
948
原创 80%的web开发者都很蒙的『表单提交』和『JSON数据提交』
摘要：HTTP POST请求中，JSON提交和表单提交的主要区别在于数据格式和适用场景。表单提交（x-www-form-urlencoded或multipart/form-data）适合简单键值对和文件上传，兼容性强但缺乏复杂结构支持；JSON提交（application/json）支持嵌套对象、数组等复杂结构，数据类型明确，更适合前后端分离的API交互。表单提交在处理文件时不可替代，而JSON在结构化数据传输上更高效。选择依据包括数据复杂度、文件需求和前后端技术栈。
2025-10-18 21:37:28
1457
原创 JS红宝书（第十三章）- 客户端检测 3
软件检测（浏览器 + 操作系统）解决 “兼容什么环境” 的问题，核心工具是navigatoruserAgentUA-CH硬件检测解决 “设备能不能扛住” 的问题，核心工具是navigator（CPU / 内存）和screen（屏幕）。实际开发中，需结合 “软件环境” 和 “硬件能力” 综合判断（如 iOS Safari + 低内存设备，需同时适配浏览器兼容和性能优化），才能实现更流畅的用户体验。
2025-10-18 21:23:02
1023
原创 JS红宝书（第十三章）- 客户端检测 2
未来，UA 可能演变为 “基础标识 + 动态扩展” 的混合模式，既保留必要的兼容性信息，又通过客户端提示按需提供细节。用户代理（User Agent，简称 UA）的历史贯穿了互联网发展的全过程，其设计初衷是为了让服务器识别客户端类型，却在浏览器竞争和兼容性需求中演变成复杂的技术博弈场。它的本质是 “通过识别‘是谁’（浏览器 / 设备），来推测‘能做什么’”，与能力检测（直接检测 “能做什么”）形成互补，但因可靠性问题，现代开发中通常作为能力检测的补充。中的关键标识，判断浏览器 / 设备信息。
2025-10-18 21:22:14
982
原创 JS红宝书（第十三章）- 客户端检测 1
能力检测的核心价值是 “基于功能适配，而非基于设备 / 浏览器适配”，它不管用户用的是 Chrome 还是 Safari，只关心 “当前环境能不能执行这个操作”，是解决前端兼容性问题的首选方案，也是现代前端框架（如 Vue、React）处理兼容的底层逻辑之一。
2025-10-18 21:21:45
851
原创 JS红宝书（第十二章）- BOM 3
它允许开发者控制页面的前进、后退，甚至在不刷新页面的情况下修改历史记录（核心功能），是单页应用（SPA）实现无刷新路由的核心工具。（如屏幕尺寸、分辨率、颜色深度等），主要用于前端适配不同设备的屏幕尺寸，或计算弹窗、元素的合理布局。就像一个 “环境探测器”，让开发者知道用户用的是什么浏览器、设备，处于什么网络状态，从而做针对性的适配。（如浏览器类型、版本、操作系统、网络状态等），是前端做浏览器兼容、设备适配的重要工具。对象的属性稳定性高，兼容性好（几乎所有浏览器支持），是获取屏幕硬件信息的可靠工具。
2025-10-17 20:51:37
574
原创 JS红宝书（第十二章）- BOM 2
既能获取 URL 的各个组成部分，也能通过修改属性或调用方法实现页面导航、刷新等操作，是前端处理 URL 和跳转的核心对象。的属性对应 URL 的不同组成部分，修改这些属性会触发页面导航（部分属性除外）。以下是最常用的属性，以 URL。几乎所有需要 “跳转到其他页面” 的操作，都会用到。这是单页应用（SPA）实现路由切换的常用手段。），不会触发页面重新加载，仅会滚动到页面内对应。等属性都会触发页面跳转，并留下历史记录（类似。后的部分）用于页面内锚点定位或单页应用路由，）是页面间传递数据的常用方式，
2025-10-17 20:51:07
806
原创 如果面试官问你，期约的实际应用场景
Promise 是前端异步编程的基石，所有涉及 “非即时完成” 的操作（网络请求、资源加载、定时器、文件处理等）几乎都离不开它。替代回调地狱，让异步逻辑更清晰；统一异步操作的成功 / 失败处理模式；支持复杂流程控制（串行、并行、竞速等）；为提供基础，让异步代码接近同步写法。
2025-10-08 20:31:38
368
原创 JS红宝书（第十一章）- 期约与异步函数 5
异步函数策略围绕 “流程控制” 和 “错误处理” 展开，核心是利用的同步化语法结合Promisesleep()：利用setTimeout和await实现延迟；顺序处理：通过for...ofawait按依赖执行任务；try/catch局部捕获、批量收集、全局.catch()兜底；并发控制：用任务池限制同时运行的任务数；与迭代器组合：动态生成并执行异步任务，适应按需加载等场景。根据实际需求选择合适的策略，可大幅提升异步代码的可读性和可靠性。
2025-10-08 20:22:45
1048
原创 JS红宝书（第十一章）- 期约与异步函数 4
期约连锁通过then()的链式调用，将异步操作从 “嵌套结构” 转为 “线性结构”，核心是利用then()异步操作的顺序执行；结果的自动传递；错误的统一捕获。all()：全成则成，一败则败（与关系）；race()：谁先完成谁决定（竞速关系）；：等待所有结果，汇总状态（全等待关系）；any()：一成则成，全败则败（或关系）。串行期约合成是通过期约链式调用（then()或）实现的顺序执行模式，核心价值是解决依赖型异步任务的流程控制问题。
2025-10-08 19:58:27
1039
原创 JS红宝书（第十一章）- 期约与异步函数 3
期约（Promise）的实例方法是其实现异步流程控制的核心，它们基于 Promises/A + 规范设计，确保了异步操作的可预测性和链式协作能力。
2025-10-08 19:45:04
1065
原创 JS红宝书（第十一章）- 期约与异步函数 2
🏠 会豪 ：个人主页🌟 文章专栏 ：《JS红宝书》🍀不积跬步无以至千里，不积小流无以成江海目录引言Promises/A+规范期约基础一、理解期约的六大核心步骤二、期约状态机：三种状态与不可逆转换三、解决值、拒绝理由及期约用例四、通过执行函数（executor）控制期约状态五、Promise.resolve ()：快速创建已完成的期约六、Promise.reject ()：快速创建已拒绝的期约七、同步 / 异步执行的二元性期约 (Promise) 这个术语最早是由计算机科学家 Daniel Friedm
2025-10-08 19:43:03
916
原创 JS红宝书（第十一章）- 期约与异步函数 1
回调函数：基础方案，但嵌套问题严重。Promise：解决回调地狱，实现链式调用和错误统一处理。Generator：提供暂停 / 恢复能力，但使用复杂。async/await：基于 Promise 的语法糖，实现 "异步代码同步化"，成为现代 JS 异步编程的首选。
2025-10-08 19:42:06
569
原创 有谁用过JS严格模式？
严格模式是 JavaScript 提供的 “代码质量保障机制”，通过限制不合理语法，减少错误并提高安全性。其核心是指令，作用于全局或函数级，主要限制包括变量必须声明、this指向调整、禁止with语句等。合理使用严格模式，能显著提升代码的健壮性和可维护性。
2025-10-07 19:44:52
563
原创 JS红宝书（第十章）- 函数 5
闭包（Closure）的本质是 **“函数与其创建时的词法环境的组合”**。具体来说：当一个函数（内部函数）在另一个函数（外部函数）内部定义，且内部函数引用了外部函数的变量或参数，同时内部函数被外部函数返回或传递到外部时，就形成了闭包。此时，即使外部函数已经执行完毕，内部函数依然能访问外部函数的变量（这些变量会被 “保留” 下来）。直观示例：闭包保留外部变量// 外部函数的局部变量// 内部函数，引用了 outer 的 countcount++;// 返回内部函数，使其能在 outer 外部被调用。
2025-10-07 19:44:16
918
原创 JS红宝书（第十章）- 函数 4
函数表达式（Function Expression）是指通过赋值语句将函数定义为一个值，通常形式为变量 = function(...) {...}。函数在这里是 “右值”（被赋值的对象），而变量是 “左值”（引用函数的标识符）。// 函数表达式：将匿名函数赋值给变量 add这里的就是函数表达式的 “函数体”，它本身是一个值，被赋值给了add变量。后续可通过add()调用该函数。尾调用是指函数的最后一步操作是调用另一个函数，且调用后没有任何额外操作（如运算、赋值、修改等）。
2025-10-07 19:43:56
891
原创 JS红宝书（第十章）- 函数 3
this是动态绑定的，指向函数的 “执行上下文”，取决于调用方式，而非定义位置。常见指向规则：全局 / 普通函数调用 → 全局对象（严格模式为undefined对象方法调用 → 调用方法的对象；构造函数调用 → 新创建的实例；箭头函数 → 继承外层作用域的this（固定不变）。可通过callapplybind手动改变普通函数的this指向（箭头函数无效）。属性name（名称）、length（形参数量）、prototype（原型对象）等，用于描述函数特征；方法call()
2025-10-07 19:43:19
795
原创 JS红宝书（第十章）- 函数 2
函数重载的核心是 **“同名函数通过参数的数量或类型不同来区分”**，这依赖于语言对参数信息的 “提前识别”。Java 是静态类型语言：在编译阶段，函数的参数类型和数量就已确定。编译器会根据参数的类型（如intvsString）和数量（如add(int a)vs），明确区分不同的重载函数。// Java 中的重载（合法）} // 类型不同} // 数量不同编译器能在编译时就确定调用哪个函数，不会冲突。JavaScript 是动态类型语言：变量的类型在运行时才确定，定义函数时无法指定参数类型。
2025-10-07 19:38:02
1016
原创 JS红宝书（第十章）- 函数 1
1. 函数声明：强制显式命名，函数名全局可见函数声明（function 函数名() {}）必须指定函数名，且函数名在当前作用域中是可见的标识符，可直接用于调用函数。// 函数声明：函数名 `sum` 在当前作用域可见// "sum"（函数的 name 属性与函数名一致）sum(1, 2);// 3（直接通过函数名调用）2. 函数表达式：可匿名，也可命名（但命名仅在函数内部可见）函数表达式（将函数赋值给变量）可以是匿名的（无函数名），也可以是命名的（带函数名），但命名函数表达式的函数名仅在函数内部有效。
2025-10-07 19:37:09
1152
原创 JS红宝书（第九章）- 代理与反射 3
将对象属性的变化与外部逻辑（如 UI 更新、数据同步）绑定，实现 “数据变化时自动触发特定操作”，是前端框架（如 Vue、React）响应式系统的核心原理。对象是实现代理模式的原生机制，它可以灵活地拦截对象的各种行为（如属性访问、赋值、函数调用等），并在这些行为发生前后添加自定义逻辑。：前端响应式框架（如 Vue 的响应式系统）、数据同步（如表单与数据模型双向绑定）、状态管理（如 Redux 的状态变化监听）等。：在设置对象属性时验证值的合法性（如类型、范围、格式等），确保数据符合预期。
2025-09-30 13:50:38
860
原创 JS红宝书（第九章）- 代理与反射 2
这 13 种捕获器覆盖了 JavaScript 中对象的几乎所有操作场景：从属性读写、原型操作，到函数调用、构造实例等。通过 Proxy 拦截这些操作，我们可以实现日志记录、数据验证、权限控制等功能。实际使用时，配合 Reflect 方法转发操作能确保行为符合语言规范，避免违反捕获器不变式。
2025-09-30 13:33:48
877
原创 破解 AI 辅助编程的 “纸牌屋”：风险解构与协同重构路径
AI辅助编程已渗透61.8%的软件开发市场，但谷歌工程主管Addy Osmani揭示的纸牌屋代码现象显示：60%-70%的AI生成代码存在高危漏洞，90%含代码异味。本文通过4442项Java测试和团队案例，剖析了AI编程脆弱性的三大成因
2025-09-30 11:42:32
1438
原创 JS红宝书（第九章）- 代理与反射 1
Proxy：给对象加一层“防护罩”，能拦截和自定义操作。Reflect：提供一套“规范化工具”，让我们更安全、更统一地操作对象。两者经常一起使用—— Proxy 负责“拦截”，Reflect 负责“执行原操作”。第一章节：如何创建一个空代理空代理（empty proxy）指的是：我们用Proxy包装一个对象，但不做任何拦截处理。也就是说，它表现得和原始对象一模一样。在Proxy中，捕获器就是handler里的方法。它们用来拦截并自定义对象的操作。get（读取属性）、set（设置属性）、
2025-09-30 11:25:47
898
原创 JS红宝书（第八章）- 对象、类、面向对象编程 4
其实类的本质是基于原型（prototype）的封装。在 ES6 之前，我们主要用构造函数和prototypep1.sayHi();而在 ES6 之后，我们可以用更直观的classclass 类名 {// 构造函数（初始化实例）constructor(参数) { ... }// 实例方法（定义在原型上）方法名() { ... }// 静态方法（属于类本身）static 静态方法名() { ... }示例：定义一个Person类// 构造函数：初始化实例属性。
2025-09-30 10:41:10
817
原创 JS红宝书（第八章）- 对象、类、面向对象编程 3
继承方式核心逻辑优点缺点原型链继承子类原型 = 父类实例方法共享引用类型共享，无法传参盗用构造函数子类构造中调用父类构造（call）属性独立，支持传参无法继承原型方法，方法重复创建组合继承原型链 + 盗用构造函数兼顾属性独立和方法共享父类构造被调用两次，原型有冗余属性原型式继承基于对象创建新对象（Object.create）简洁，无需构造函数引用类型共享寄生式继承原型式继承 + 增强对象灵活增强对象方法重复创建，引用类型共享寄生式组合继承。
2025-09-29 17:20:04
902
原创 JS红宝书（第八章）- 对象、类、面向对象编程 2
方案适用场景核心问题解决缺点直接单次、简单、无复用的对象无（仅满足最基础创建）代码冗余、无类型、性能浪费工厂模式需重复创建相似对象解决代码冗余（封装创建逻辑）无法区分类型构造函数模式需明确对象类型解决类型模糊（自定义类型）方法重复创建（性能浪费）原型模式需创建大量相似对象解决性能浪费（方法共享）引用类型属性会被共享（需注意）
2025-09-29 16:58:56
769
原创 快速创建一个Vue应用
🏠 会豪 ：个人主页🌟 文章专栏：《Vue入门到进阶》🍀不积跬步无以至千里，不积小流无以成江海我们在创建前端项目时，不只是要单独的使用到Vue，还有一些打包构建框架，最常用的最流行的就是Vite，那我们本次就是用Vite创建一个Web项目Vite 官网：开始 | Vite 官方中文文档开发环境准备：第一步：我们找一个文件夹，然后打开 Power Shell，输入下面的命令选择的指令如下然后我们的文件夹里面就会有一个这样一个项目进去之后，就会有这样的项目结构然后我们用VS Code打开这个项
2025-09-29 15:40:43
1335
原创 Vue 启发式入门
本人在大学里面主学的是JAVA开发，Spring Boot，SSM框架，数据库等后端技术，但也学过配套的前端技术，主要是前端三剑客（JavaScript，CSS，HTML），还有和JAVA相匹配的JSP技术栈，虽然说JSP已经过世了，Vue技术栈还是在工作之后才慢慢接触的。我们可以看到这个html代码还是有点麻烦的，还要获取 button 和 span 的dom元素，然后还要绑定点击事件。Vue简单来说就是一个 渐进式的JS框架，对于很多入门的前端开发者来说，Vue是一个很不错的Web框架。
2025-09-29 14:52:08
257
原创 JS红宝书（第七章）- 迭代器与生成器
🏠 会豪 ：个人主页🌟 文章专栏：《前端》🍀不积跬步无以至千里，不积小流无以成江海目录引言迭代器模式核心组成JavaScript 中的迭代器模式优点生成器一、生成器的基本语法二、核心工作原理：暂停与恢复三、生成器对象的其他方法四、yield 传递参数五、生成器与迭代器的关系六、应用场景惰性生成 / 处理大数据（节省内存）简化复杂迭代器的创建异步流程控制（替代部分 async/await 场景）状态机实现（管理多状态逻辑）数据管道 / 流式处理简单说，它就像一个 “通用遍历工具”—— 不管集合的内部结构
2025-09-29 14:24:47
871
原创 JS红宝书（第五章）-基本引用类型
原始值包装类型是 JS 提供的内置对象，包括StringNumberBoolean（分别对应原始类型stringnumberboolean临时将原始值转换为对象，以便访问属性和方法。与普通对象不同，包装类型的对象是临时存在创建一个String类型的临时对象（包装对象），并将原始值作为其值；调用该临时对象的属性或方法；立即销毁这个临时对象。这个过程是隐式的，开发者感知不到，但解释了为什么原始值能调用方法。
2025-09-29 13:35:15
920
原创 JS红宝书（第四章）-变量与作用域
特性原始值引用值存储位置栈内存（直接存值）堆内存（变量存引用地址）可变性不可变（操作返回新值）可变（直接修改原对象）赋值行为复制值本身（独立）复制引用地址（共享对象）比较方式比较值是否相等比较引用地址是否相同。
2025-09-29 11:38:51
970
原创 SVG 实现无穷符号路径动画：蓝色小球循环往复运动
以下是完整可运行的 SVG 代码，包含 “无穷符号路径” 和 “蓝色小球沿路径运动动画”，关键用。要求：小球能发光，然后小球运动时，后面要有一个拖尾，拖尾的尺寸有一个渐变的变化，会越来越小。这样小球会在 ∞ 形路径上平滑地来回运动，看起来就像在无穷符号上不停奔跑。：实现往复运动（到 0.5 时到达终点，1 时回到起点）。：完整往返一圈用时 6 秒。) 描绘了一个左右对称的。
2025-09-25 15:41:20
314
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人