- 博客(132)
- 收藏
- 关注
RSS订阅原创 JavaScript 立即执行函数（IIFE）运行时行为分析笔记
本文通过一个IIFE函数示例，详细分析了JavaScript的作用域机制和变量提升原理。在编译阶段，函数声明整体提升，var变量仅提升声明部分；执行阶段按顺序执行代码并赋值。文章解释了四次typeof打印结果差异的原因（function/undefined/number），对比了var与let/const的区别，并指出函数声明优先级高于变量声明。最后强调了作用域（静态结构）与执行上下文（动态状态）的关系，帮助理解JavaScript的核心运行机制。
2025-07-26 21:33:10
777
原创 对比JS“上下文”与“作用域”
本文对比了JavaScript中"上下文"（Execution Context/this）和"作用域"（Scope）的核心概念。上下文是函数执行时的环境，决定this值和函数参数，在运行时动态创建；作用域是变量的可访问范围，由代码静态结构决定。文章通过示例说明何时侧重作用域分析（如变量查找、闭包），何时侧重上下文分析（如this绑定、动态调用），以及需要二者结合的场景（如闭包中使用this）。最后总结提出：变量访问问题用作用域分析，函数调用问题用上下文分析，复杂场景需
2025-07-26 21:11:16
675
原创 清除浮动以及原理
浮动元素脱离文档流会导致父元素高度塌陷。清除浮动主要依靠两种机制：1）使用clear属性强制元素下移；2）触发BFC（块级格式化上下文）使父元素包含浮动子元素。常见方法包括：添加clear空元素、设置overflow属性触发BFC、使用伪元素（推荐现代方法）。伪元素法通过::after创建虚拟元素设置clear:both，既保持代码简洁又兼容现代浏览器。理解浮动原理是掌握CSS布局的重要基础。
2025-07-24 22:17:02
710
原创 JavaScript 中的 structuredClone() 如何彻底改变你的对象复制方式
JavaScript 深度复制神器：structuredClone() 全面指南 传统对象复制方法存在重大缺陷： 浅拷贝仅复制引用 JSON.stringify() 会丢失函数、日期对象等数据 structuredClone() 的核心优势： ✔️ 完美处理循环引用 ✔️ 支持 Map、Set、Date 等复杂类型 ✔️ 保留 undefined 值 ✔️ 提供 transfer 选项优化性能 适用场景： 不可变状态管理 应用状态快照 Web Workers 数据传输 兼容性：现代浏览器和 Node.js
2025-07-24 22:16:01
784
原创 IndexedDB 学习笔记：核心概念、优势与挑战
摘要： IndexedDB 是强大的浏览器端 NoSQL 数据库，支持结构化数据存储（对象、Blob等），相比 Web Storage API 具有异步操作、事务支持、更大存储空间等优势。其核心架构包含数据库、对象存储（类似表）、索引和事务，适用于复杂离线应用和 PWA。主要优势包括高效查询、版本控制和结构化存储，但存在学习曲线陡峭、浏览器兼容性差异和存储配额限制等挑战。最佳实践包括：事务管理优化、错误处理、索引优化、配额监控及使用 Dexie.js 等库简化开发。未来需关注浏览器存储技术的演进，如文件系统
2025-07-23 11:42:50
1007
原创 vite-plugin-svg-icons 插件解决svg展示
vite-plugin-svg-icons是一个Vite插件，用于简化Vue项目中SVG图标的使用。通过安装配置该插件，可以自动扫描指定目录下的SVG文件并注册为组件。主要步骤包括：安装插件、配置扫描路径、注册全局组件以及创建封装组件。使用时只需通过<svg-icon>标签即可调用图标，支持动态加载、自定义大小和颜色继承。该方案解决了手动导入SVG文件的繁琐问题，使图标管理更高效。
2025-07-23 11:41:24
331
原创 Vue 3 + Vue Office 文件预览解决方案
本文介绍了一个基于Vue 3和Vue Office组件库的文件预览解决方案。该系统支持Word、Excel、PDF、TXT及图片等多种格式文件的在线预览，通过动态加载和智能识别文件类型自动选择合适的预览组件。技术亮点包括优化内存管理、响应式路由监听和错误处理机制，实现了轻量级、高性能的文件预览功能。解决方案适用于企业级应用场景，提供良好的用户体验，同时需要注意文件大小限制和浏览器兼容性问题。
2025-07-22 15:20:24
580
原创 符号绑定详解：ES6模块中的“诡异”现象与内存机制
本文揭示了ES6模块中常被忽视的"符号绑定"机制及其潜在问题。当模块导出一个变量时，导入方获取的常量会与导出方共享内存空间，导致看似矛盾的"常量值可变"现象。这种机制违背开发者直觉，容易引发难以调试的bug。为解决这一问题，建议将可变状态封装为对象导出，这样既能保持导入常量的不变性，又能通过对象属性实现状态变更。理解并正确应用符号绑定机制，可以避免ES6模块开发中的常见陷阱，提高代码的可维护性和可靠性。
2025-07-22 15:13:58
661
原创 npm幻影依赖问题
摘要：文章探讨了前端项目从npm转向pnpm的原因，重点分析了npm的幻影依赖问题及其隐患。幻影依赖指代码使用了未声明的间接依赖包，会导致版本冲突和生产环境依赖丢失。其根源在于npm的扁平化依赖管理方式。pnpm通过集中存储+硬链接/软链接的机制，既保持了扁平化优势，又实现了模块隔离，彻底解决了幻影依赖问题。这种设计使依赖管理更安全高效，是越来越多项目选择pnpm的重要原因。
2025-05-25 15:24:50
616
原创 JavaScript 中的 structuredClone() 如何彻底改变你的对象复制方式
本文深入介绍了JavaScript的structuredClone()方法，它解决了对象深度复制的问题。传统方法如JSON.parse(JSON.stringify())存在函数丢失、日期对象转换等缺陷，而structuredClone()能正确处理循环引用、支持更多数据类型（如Map、Date等），并提供了性能优化的transfer选项。不过，它无法克隆函数、DOM节点和自定义类实例等。该方法适用于状态管理、数据快照等场景，并已广泛兼容现代浏览器和Node.js。
2025-05-25 15:23:21
772
原创 VUE面试题
在按钮级的权限管理时会用到，需要搭配字典使用。详细再学习在后台系统开发中，前端处理权限控制完全是气氛组，最终的权限校验还是要依赖后端的处理。前端的权限控制分为三个主要级别：权限控制一般有三个级别页面级：通过路由守卫和动态路由来限制访问，用户没有权限无法看到这个菜单或页面，细粒度较低。组件级：根据用户角色和权限显示不同的组件或内容。例如，管理员可以看到更多的数据，而普通用户只能看到基本信息。这种方法具有一定的侵入性。代码级：精确到函数调用权限控制，虽然不常见，但某些场景下可能会用到。
2025-03-13 00:15:00
1236
原创 前端高阶面试题·每日一题
每一个继承 Object 的对象都有 toString 方法（如果 tostring 方法没被重写的话，回返回 [Object type]格式的字符串（Type 为对象类型）；对于Object 以外的对象时，需要结合 call 来改变 this 指向，确保正确输出instanceof内部机制：检查对象原型链中是否存在构造函数的 prototype 属性来判断类型// true注意，instanceof只能判断对象类型，且均为 true。
2025-03-13 00:15:00
1023
原创 JavaScript面试题
概念：this是一个指针型变量，它动态指向当前函数的运行环境特点：this 的值取决于函数的调用方式，而不是定义方式。绑定方式：显示绑定、隐式绑定；尽可能进行显示绑定简单来讲： 的指向取决于“谁调用”this指向的几种情况柯里化，纯函数单例–弹窗组件唯一，工厂–通过参数传入不同，一个来决定加工输出对象由于现在已经出现了 ES6 类的继承，没怎么了解。优点：方法可复用，父类原型上的方法能被所有子类实例共享。缺点：父类实例的属性会被所有子类实例共享，一个子类实例修改属性可能影响其他实例；创建子类实例时不能
2025-03-12 17:22:49
999
原创 浏览器基础【渲染原理+js编译原理】
transform 既不影响布局，也不影响绘制指令，仅影响渲染流程的最后 “draw 画” 阶段。该阶段在合成线程中，所以 transform 的变化几乎不影响渲染主线程；改动可见样式 style 后，需重新计算，进而引发重绘。由于元素布局信息也属可见样式，所以重排一定会引起重绘。)，窗口大小变化等影响布局树的操作时，需重新计算布局树，从而引发重排。产生原因：当进行增、删、改DOM元素，修改CSS样式(width、避免使用会触发重排的属性：width、margin。计算布局（layout）树（第 3 步）
2025-03-12 17:20:21
545
原创 深入探讨防抖函数中的 this 上下文
文章围绕防抖函数中 this 上下文展开探究。通过展示 debounce 和 debounce2 两个防抖函数示例代码，分析其在不同位置打印 this 的输出结果。关键知识点包括函数定义、内部返回函数及定时器中 this 的指向。还对输出顺序问题进行解析，阐述了箭头函数与普通函数的区别、异步任务执行顺序及 this 指向受调用方式影响等。旨在帮助读者清晰理解防抖函数的 this 机制，避免开发中因 this 指向错误导致问题。
2025-01-27 21:26:18
946
原创 汇编语言：基于x86处理器考前笔记 | 第九章 字符串和数组
ESI</u>寻址的内存地址处的数据复制到<u>EDI</u>寻址的内存其中<u>rep</u>会按照<u>ECX</u>的值重复执行指令MOVSDESIEDI自动进行相应偏移CMPSBCMPSWCMPSDESIEDI可结合无符号数跳转指令SCASBSCASWSCASDALAX<u>EAX</u>中的值同<u>EDI</u>寻址的目标内存比较REP使用，其循环终止条件为找到了匹配的内容STOSBSTOSWSTOSDALAX<u>EAX
2025-01-18 00:13:12
389
原创 汇编语言：基于x86处理器考前笔记 | 第六章 条件处理
布尔指令与比较指令的使用方法及功能学习如何使用常见的布尔指令（andornotxortest）以及比较指令（cmp），并理解它们的作用和应用。标志寄存器与各标志位的关联掌握各指令与标志寄存器中的标志位（如溢出标志OF、方向标志DF、中断标志IF、符号标志SF、零标志ZF、辅助进位标志AC、奇偶标志PE、进位标志CY）之间的关系，学会如何通过标志位的状态判断程序执行情况。条件结构的作用条件结构用于在不同的逻辑分支中依据条件表达式做出选择。在高级语言中，通常使用if...else。
2025-01-18 00:04:56
760
原创 汇编语言：基于x86处理器考前笔记 | 第五章 过程
堆栈操作：通过push和pop指令实现数据入栈和出栈，堆栈用于存储返回地址、局部变量和保存寄存器状态等。过程定义与调用：使用PROC和ENDP定义过程，使用CALL指令调用，RET指令返回。参数传递：可以通过寄存器、指针和计数器传递参数，子程序可以保存和恢复寄存器的状态，避免修改主程序的寄存器值。外部库链接：通过使用Irvine32链接库，可以调用常见的输入输出和控制过程，简化程序开发。
2025-01-18 00:01:00
1542
原创 汇编语言：基于x86处理器考前笔记 | 第四章 数据传送、寻址和算术运算
时，这里必须要使用PTR进行强制转换。用同一个esi结合变址寻址很方便。强制类型转换，指明数据的类型。用于获取数据标号的偏移量。对操作数按位取反后加1。计算数组中元素的个数。
2025-01-17 23:57:26
885
原创 汇编语言：基于x86处理器考前笔记 | 第三章 汇编语言基础
内部数据类型汇编器可识别多种内部数据类型，按照大小、是否有符号、整数或实数来分类，如BYTE（8位无符号整数）、SBYTE（8位有符号整数）、WORD（16位无符号整数）、DWORD（32位无符号整数）等。数据定义规则定义数据至少要有1个初始值，可为0或?，多个初始值用,隔开，且必须是整数常量或变量，如countDWORD1,2,3,4,5。特殊情况处理多初始值定义。
2025-01-17 23:56:37
1037
原创 汇编语言：基于x86处理器考前笔记 | 第一章 基本概念、第二章
本系列文章是本人关于汇编语言：基于x86处理器期末复习笔记；仅供学习参考；（本人cqupt软工生，欢迎学弟学妹阅读学习）
2025-01-17 23:48:32
1012
原创 Vite系列课程 | 11. Vite 配置文件中 CSS 配置（Modules 模块化篇）
Vite 提供了灵活的 CSS 模块化配置选项，可以帮助开发者在处理 CSS 时避免样式冲突，并根据项目的需求定制类名生成规则。同时，Vite 还支持对外部库（如）的样式进行处理，确保项目中的样式兼容性和可维护性。
2024-12-24 14:24:38
962
原创 Vite系列课程 | 10. 在 Vite 中处理 CSS
Vite 的 CSS 处理方式通过内置的模块化和动态脚本替换机制，提高了开发体验，尤其是在多人协作时避免了样式冲突。同时，借助预处理器（如 Less）的支持，开发者可以更灵活地管理和使用样式。
2024-12-24 14:22:41
1299
原创 Vite系列课程 | 9. 【原理篇】Vite 是怎么让浏览器识别 .vue 文件的
Vite 的开发服务器实际上充当了一个中间层，它拦截浏览器对模块的请求，并根据请求的路径找到对应的文件，进行编译转换后以 ES 模块的格式返回给浏览器。Vite 使用 esbuild 或其他构建工具（如 Rollup，在生产环境下）将转换后的模板、脚本和样式组合成浏览器可以解析的 HTML、CSS 和 JavaScript 代码。文件是 Vue.js 的单文件组件 (SFC)，它是一种特殊的文件格式，浏览器无法直接识别。文件时，Vite 只会更新修改的部分，而无需刷新整个页面，提供极佳的开发体验。
2024-12-19 12:52:18
671
原创 Vite 系列课程 | 8. Vite 环境变量配置
可以使用 ES Module 语法，是因为 Vite 在内部会使用 Node.js 的 ES Module 支持或将其转换为 CommonJS 格式。访问系统环境变量，但这通常不推荐用于配置应用程序特定的环境变量，因为它可能会与其他工具或环境产生冲突。使用环境变量可以灵活配置这些值，避免在代码中硬编码，提高代码的可维护性和可移植性。环境变量是指在不同代码环境下，变量值可能会有所不同的情况。加载环境变量，并将其定义为常量，以便在客户端代码中使用。文件，并使用指定的前缀，避免命名冲突。，那么在构建后的代码中，
2024-12-19 12:48:41
1369
原创 Vite系列课程 | 4Vite 脚手架和 Vite，5Vite 启动项目初体验
是一个脚手架工具，用于快速创建预配置的 Vite 项目。Vite 是一个构建工具，负责项目的编译、热更新和打包等核心任务。内置了 Vite 和相关的最佳实践配置，方便开发者快速启动项目。Vite 更关注现代开发体验和构建效率，则提供了快速搭建的便利。理解和 Vite 之间的关系，有助于我们更清晰地了解项目搭建过程中使用的工具及其职责。Vite 的“开箱即用”特性和对模块导入路径的优化，让开发者能够更专注于编写代码，而不是花费大量时间在配置和构建工具上。
2024-12-19 00:15:00
1519
原创 Vite系列课程 | 6. Vite 的依赖预加载和预构建，7. Vite 配置文件处理细节
Vite 的预加载和依赖预构建机制有效地提升了开发效率和构建性能。通过转换模块格式、合并文件、动态路径补全和缓存机制，Vite 大大减少了构建时间和网络传输开销，使开发者能够更专注于代码编写。
2024-12-19 00:15:00
852
原创 Vite 系列课程|3.Vite 相较于 Webpack 的优势
特性WebpackVite构建方式预先构建 (pre-bundle)按需编译 (on-demand compilation)模块化支持多种模块化格式 (CommonJS, ESM, AMD 等)只支持 ESM启动速度较慢，项目越大越慢极快热更新较慢极快，近乎实时配置复杂，需要大量配置简洁，开箱即用兼容性追求最大兼容性专注于现代浏览器适用场景大型、复杂项目，需要高度定制的项目现代前端项目，追求快速开发体验的项目。
2024-12-18 17:46:14
1538
原创 Vite 系列课程|1课程道路，2什么是构建工具
Webpack 长期以来一直是前端构建工具的事实标准，拥有庞大的用户群体、成熟的生态系统和丰富的学习资源。虽然 Webpack 仍然占据着很大的市场份额，但 Vite 凭借其卓越的性能和简洁的配置，正迅速获得开发者的青睐，并被越来越多的知名公司采用。选择合适的构建工具对于项目的成功至关重要。掌握 Vite 能够显著增强你的求职竞争力，尤其是在面对大型互联网公司的面试时，Vite 相关的经验会是一个加分项。当项目代码发生变化时，构建工具会根据配置文件执行相应的任务，并将构建结果输出到指定的目录。
2024-12-18 17:43:43
1312
原创 第四章 数据传送、寻址和算术运算 | 汇编语言 基于x86处理器
加法减法指令inc（自增）dec（自减）add（加法）sub（减法）、**neg（非指令）**等指令的使用及特点。数据相关运算符与伪指令运算符：如OFFSETTYPELENGTHOFSIZEOF等的功能和应用。伪指令：如ALIGNPTR的使用。加法减法与标志位加法减法运算对标志位（如溢出标志OV、方向标志DF、中断标志IF、符号标志SF、零标志ZF、辅助进位标志AF、奇偶标志PF、进位标志CF等）的影响。如何通过标志位判断运算结果的特征以及如何发现计算错误。
2024-12-16 00:15:00
1121
原创 第五章 过程 | 汇编语言 基于x86处理器
堆栈操作：通过push和pop指令实现数据入栈和出栈，堆栈用于存储返回地址、局部变量和保存寄存器状态等。过程定义与调用：使用PROC和ENDP定义过程，使用CALL指令调用，RET指令返回。参数传递：可以通过寄存器、指针和计数器传递参数，子程序可以保存和恢复寄存器的状态，避免修改主程序的寄存器值。外部库链接：通过使用Irvine32链接库，可以调用常见的输入输出和控制过程，简化程序开发。
2024-12-16 00:15:00
450
原创 vue3实现ai聊天对话框
input输入message对话框settings设置面板w-full答：虽然设置存储在了 localStorage 中，但是在页面刷新后没有正确地初始化深色模式的样式。我们需要在应用启动时立即应用存储的主题设置。解决办法：给 App.vue 加上挂载时就进行一次设置。传输数据以下是和。
2024-12-15 12:57:12
6968
12
原创 超详情的Windows11 搭建FTP服务器教程
一、搭建步骤：1、开启 FTP 服务功能控制面板 >> 程序 >> 启用或关闭windows功能，会弹出 windows 功能窗口，找到 Internet Information Services 这个选项功能，勾选开启 FTP 服务。点击确定之后等待系统配置服务，这里可能需要等待一点时间，然后就会提示更改成功2、添加 FTP 站点。
2024-11-17 19:20:45
8735
1
原创 数据发生变化时（DOM）视图没有更新的原因及解决方案 - 2024最新版前端秋招面试短期突击面试题【100道】
在 Vue.js 中，响应式系统负责将数据的变化自动反映到视图上。然而，在某些情况下，当数据发生变化时，DOM 视图没有更新。这种现象主要是由于 Vue 2 中使用进行数据劫持的局限性。以下是产生原因及相应的解决方案。
2024-11-09 11:05:41
780
1
原创 HTTP 和 HTTPS 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】
HTTP是一种用于客户端和服务器之间进行请求和响应的协议，运行在 TCP/IP 协议之上。HTTPS是在 HTTP 的基础上增加了 SSL/TLS 加密层的协议，用于安全的数据传输。HTTP是一种简单、高效的通信协议，适用于对安全性要求不高的场景。HTTPS在 HTTP 的基础上增加了安全层，适合需要保护用户数据和隐私的场景，如在线支付、用户登录等。理解 HTTP 和 HTTPS 的区别，以及它们各自的特性和适用场景，对于保证网络应用的安全性和提升用户体验至关重要。
2024-11-09 11:05:10
656
原创 Vue 的代理和环境变量 - 2024最新版前端秋招面试短期突击面试题【100道】
在使用 Vue.js 开发应用时，处理接口数据请求和环境变量的配置是非常重要的。以下是关于 Vue 的代理和环境变量的详细解析及使用方法。
2024-11-08 14:59:55
701
原创 Vue 3 性能提升与 Vue 2 的比较 - 2024最新版前端秋招面试短期突击面试题【100道】
在 Vue 2 中，使用data来定义响应式数据，使用methods来定义方法。
2024-11-08 14:55:31
667
1
2024年前端最新场景题面试.pdf
2024-08-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人