- 博客(256)
- 收藏
- 关注
RSS订阅
原创 前端八股整理总索引｜JS/TS、HTML/CSS、Vue、浏览器、工程化与手写题
该系列文章整理了前端开发的核心知识点，分为JavaScript/TypeScript、CSS、Vue、工程化、浏览器和手写实现六大模块。内容涵盖基础概念（如interface与type区别、闭包）、常用方法（数组操作、DOM查询）、Vue核心（响应式原理、组件通信）、工程化工具（Git命令、性能优化）以及浏览器原理（跨域处理、URL加载过程）等高频面试考点。每篇文章针对特定技术点进行深入解析，适合前端开发者系统复习和面试准备。
2026-05-06 19:12:54
608
原创 CSDN 写作 1024 天：回头看，我好像真的走了很远
这篇文章以1024天为时间节点，回顾了作者从哈尔滨到北京读研后的成长历程。重点记录了2025年8月至2026年5月间的心路历程：初到北京时的迷茫与忐忑，在数原数字化城市研究中心的第一段实习经历（参与项目从0到1的过程），以及主动离开舒适区后重新求职（收获5个offer）的突破。文章展现了作者从缺乏自信到独立担当的蜕变，表达了对未来发展的思考与期待，体现了坚持与自我突破的重要性。
2026-06-12 17:24:35
286
原创 前端八股整理（代码输出 02）｜宏任务微任务 promise await 代码输出题
摘要 本文系统讲解JavaScript异步编程核心概念，包括事件循环、宏任务/微任务执行顺序、Promise执行机制和async/await原理。通过典型代码示例分析执行流程：1) Promise执行器函数同步执行，then回调进入微任务队列；2) setTimeout等宏任务最后执行；3) await会暂停函数执行，将后续代码包装为微任务。文章包含多个面试真题解析，如腾讯音乐二面题目，帮助读者掌握"script start→微任务→宏任务"的核心判断逻辑，解决异步代码顺序判断难题。
2026-06-12 15:07:18
357
原创 前端八股整理（代码输出 01）｜this指针输出题
本文整理了JavaScript中this指针的几种典型场景及输出结果分析。主要内容包括：1)普通函数调用时this指向全局/undefined；2)对象方法调用时this指向调用者；3)赋值丢失this的情况；4)嵌套函数中的this指向问题；5)箭头函数this继承外层作用域的特点；6)call/apply/bind改变this指向的方法；7)new调用时this指向新对象。
2026-05-28 23:02:33
286
原创 前端八股整理（手写 03）｜防抖节流、深拷贝、函数柯里化
本文整理了前端开发中三个常见的手写实现：防抖节流、深拷贝和函数柯里化。防抖通过延迟执行避免频繁触发；节流通过限制执行频率确保定期执行；深拷贝利用递归实现对象的完全复制；函数柯里化则将多参数函数转换为多次单参数调用的形式，通过闭包保存中间参数状态。这些核心技巧在前端性能优化和代码组织方面具有重要作用，理解其实现原理有助于提升开发能力。
2026-05-28 22:55:47
297
原创 前端八股整理（手写 02）｜数组转树、数组扁平化、随机打乱一个数组
本文介绍了三个常见的前端手写题目：1. 数组转树结构：通过创建映射表和结果数组，将扁平数组转换为树形结构；2. 数组扁平化：使用递归实现无限层级或指定层级的数组展开；3. 随机打乱数组：采用Fisher-Yates洗牌算法，从后向前随机交换元素位置。每个问题都提供了清晰的实现思路和完整代码示例，涵盖了数据处理和算法应用等前端开发常见场景。
2026-05-12 15:23:20
80
原创 MCP 实践 01｜从 0 搭建 MCP Server：读取简历与 JD，并用 MCP Inspector 测试
本文介绍如何从零搭建一个本地 MCP Server，用于读取简历与职位描述（JD）。内容包括基于 McpServer 和 StdioServerTransport 创建服务，注册 get_resume 与 get_job_description 工具，实现本地文件读取；同时配置项目依赖、构建脚本与运行命令，并使用 MCP Inspector 完成连接与工具调用测试。文章覆盖开发、生产和测试阶段的关键配置，适合作为 MCP Server 入门实践参考。
2026-05-09 16:20:10
265
原创 前端八股整理（工程化 02）｜CommonJS/ESM、Webpack Loader/Plugin 与Vite 对比
本文对比了前端工程化中的关键技术：1) CommonJS与ES Module在模块加载机制上的核心区别 - 动态加载与静态分析、值拷贝与动态映射；2) Webpack中Loader与Plugin的职责差异 - Loader处理特定资源转换，Plugin扩展构建流程；3) Webpack与Vite的架构差异 - Webpack基于打包器模式，Vite利用浏览器原生ESM实现按需编译。三者共同体现了前端工程化从传统打包到现代开发体验的演进趋势，开发者需根据项目需求选择合适的工具链。
2026-05-07 16:53:31
385
原创 Webpack 系列：Loader 与资源预处理
本文参考《Webpack 实战：入门、进阶与调优（第 2 版）》中关于 Loader 的内容，并结合个人理解进行整理。文章主要介绍 Webpack Loader 的核心作用、配置方式、链式处理机制、常用 Loader 的使用场景，以及自定义 Loader 的基本实现，重点理解 Webpack 如何借助 Loader 将 CSS、SCSS、图片等非 JavaScript 资源转换为可参与打包的模块。
2026-05-07 12:59:19
383
原创 前端八股整理（手写 01）｜Promise 超时控制、红绿灯与 Promise.all
这篇文章主要整理了 JavaScript 中 Promise 相关的高频手写题，包括异步任务超时控制、红绿灯循环执行以及手写 Promise.all。文章先从 setTimeout 的基本用法入手，说明定时器在异步控制中的作用；随后通过手动封装 Promise 和 Promise.race 两种方式实现超时控制；再结合 async/await 实现红绿灯按顺序循环执行；最后分析 Promise.all 的行为特点，并手写实现其核心逻辑，帮助理解 Promise 的串行、并行、竞态和错误处理机制。
2026-05-06 19:17:25
291
原创 链表专题：JS 实现原理与高频算法题总结
本文总结了JavaScript实现链表的原理与高频算法题。首先介绍了JS中链表节点的实现方式，使用对象模拟结构体，包含val和next属性。重点讲解了JS链表的注意事项：变量保存的是节点引用而非副本、头节点head的含义、使用dummy虚拟节点的优势等。随后通过三个经典算法题实战演示：1）相交链表问题通过计算长度差解决；2）反转链表使用双指针迭代法；3）合并有序链表采用虚拟头节点逐个比较。全文以代码示例为主，帮助开发者掌握JS链表操作的核心技巧和常见算法解题思路。
2026-04-29 21:51:48
294
原创 前端手动实现大文件分片上传调度层：分片计算、并发上传与断点续传
本文以一个基于 init / upload / merge 接口的大文件上传方案为例，复盘前端如何手动实现分片上传调度层。内容涵盖文件分片计算、file.slice 切片、分片 MD5 校验、并发上传队列、失败重试、暂停/恢复以及断点续传状态维护。重点说明前端如何通过 uploadedChunks / pendingChunks / failedChunks 管理分片状态，并结合 uploadId + partNumber 与后端完成分片识别、缺片检查和最终合并。
2026-04-29 21:21:14
513
原创 前端八股整理（工程化 01）｜Git 常见命令、rebase/merge、pull/fetch 与前端性能优化
本文整理了前端工程化中的Git常见命令和性能优化方法。Git部分介绍了常用命令如clone、pull、push等，重点讲解了rebase与merge的区别：rebase会重写提交历史形成线性结构，而merge会保留分支历史并创建合并提交。还解释了pull(fetch+merge)与fetch的区别，以及工作区、暂存区、本地和远程仓库的概念。性能优化方面从三个维度展开：1)传输优化(CDN、缓存、HTTP2)；2)体积优化(图片压缩、代码压缩、Gzip)；3)加载策略优化(懒加载、按需加载、预加载)。
2026-04-23 17:37:08
417
原创 前端八股整理（Vue 02）｜组件通信、生命周期、v-if 与 v-show
本文总结了Vue组件通信方式、生命周期钩子和条件渲染的相关知识点。在组件通信方面，介绍了父子组件通过props/emit传值、跨层级组件使用provide/inject以及状态管理方案。生命周期部分详细解析了created和mounted的区别，指出created适合数据初始化而mounted适合DOM操作，并解释了created阶段不能操作DOM的原因。最后对比了v-if和v-show的差异，说明v-if有组件销毁重建的开销，而v-show只是切换显示状态。文章还探讨了visibility:hidden和
2026-04-23 17:34:30
524
原创 前端八股整理（浏览器 01）｜跨域、URL 输入过程与浏览器存储
本文介绍了浏览器跨域问题及解决方案，并详细解析了从输入URL到页面渲染的完整流程。跨域是由于同源策略限制，可通过代理（Vite、Nginx、Node.js BFF层）或CORS（后端设置访问白名单）解决。URL访问流程包括：URL解析、DNS查询、建立TCP连接（HTTPS需TLS握手）、发送请求、接收响应、渲染页面（构建DOM/CSSOM、生成渲染树）及断开连接。文章还简要说明了DNS查询顺序和HTTPS特有的安全握手过程。
2026-04-21 19:15:58
434
原创 前端八股整理（Vue 01）｜响应式原理、computed/watch 与列表 key
本文介绍了Vue3中Proxy的实现原理及其在响应式系统中的应用。Proxy作为JS的代理机制，通过拦截对象操作实现响应式，其核心是"get收集依赖，set触发更新"。文章对比了Proxy与Object.defineProperty的差异，指出Proxy的兼容性问题和可能丢失响应式的情况（如解构赋值）。同时解释了ref和reactive的区别：reactive直接代理对象，ref则通过包装基本类型为对象实现响应式，因此需要.value访问。这些知识点是Vue3响应式系统的核心实现原理。
2026-04-09 20:26:57
364
原创 前端八股整理（JavaScript 03）｜闭包、防抖节流、map 与 forEach
JavaScript闭包让函数记住词法作用域，实现数据私有化。防抖在频繁操作后执行一次，节流固定间隔执行一次。Vue2通过Object.defineProperty劫持数据，结合Dep/Watcher更新；Vue3改用Proxy代理，更高效处理对象/数组变化。核心差异在于响应式实现机制优化。
2026-04-09 20:22:39
457
原创 前端八股整理（JavaScript 02）｜JS/TS 区别、TS 泛型、DOM 查询与 div 数量统计
本文整理了前端开发中关于JavaScript和Vue框架的四个核心知识点：1) JS与TS的核心区别在于TS增加了静态类型系统，更适合大型项目；2) Vue生命周期钩子中created和mounted的区别及适用场景，强调created适合数据初始化而mounted适合DOM操作；3) v-if和v-show的对比分析，指出v-if有创建/销毁开销而v-show切换开销更小；4) 获取页面div数量的多种DOM查询方法。
2026-04-08 17:46:06
473
原创 前端八股整理（CSS 01）｜水平垂直居中、盒模型、BFC 与 Flex 布局
文章摘要 本文整理了CSS常见面试题，包含4个核心知识点：1）元素水平垂直居中的3种方法（定位、flex布局）；2）标准盒模型与IE盒模型的区别及box-sizing属性；3）BFC概念、创建方式及解决高度塌陷、margin重叠的实例；4）flex布局特点及特殊场景应用。重点讲解了CSS布局的核心机制和实用技巧，包括定位原理、盒模型计算、BFC特性等，适合前端开发者系统复习CSS基础。
2026-04-08 17:42:48
661
原创 前端八股整理｜Vue｜虚拟 DOM、Diff 与 Patch 流程
本文围绕 Vue 中的虚拟 DOM、Diff 算法与 Patch 流程进行梳理。先从虚拟 DOM 的定义与优势入手，说明它为什么能帮助框架减少真实 DOM 操作；再进一步分析 Diff 的核心思想，包括同层比较、key 的作用以及启发式优化；最后结合 vnode、patch、patchVnode 与 updateChildren 的执行过程，串起 Vue 更新视图时的整体逻辑，帮助理解面试中常见的相关问题。
2026-04-03 16:07:55
457
原创 前端八股整理（JavaScript 01）｜interface/type 区别、数组常用方法、== 与 ===
1.computed和watch的区别是什么?computed是怎么实现缓存的，底层实现原理是什么?2.了解过哪些布局，flex布局说一下,宽高不定的div如何定位在屏幕中间，宽高为0能用flex实现吗?3.cookie/localstorage/sessionstorage有什么区别?4.数组有哪些常用的方法?说说他们的用途?5.列表渲染时为什么要设置 key?他起什么作用?
2026-04-01 21:10:12
421
原创 算法刷题 JavaScript 工具手册
本文总结了JavaScript中数组和Map的常用操作方法。数组部分包括尾部操作push/pop、头部操作unshift/shift、映射转换map、过滤filter、归约reduce、排序sort、截取slice以及插入删除splice等方法。Map部分介绍了创建、添加键值对set和获取值get等基本操作。这些方法在处理算法问题时非常实用，能有效提升代码效率。文章通过示例代码演示了每个方法的用法和返回值，便于开发者快速掌握这些核心API的使用技巧。
2026-03-17 22:35:35
612
原创 掘金自动签到自动抽奖脚本实战：腾讯云轻量服务器部署与定时任务配置
本文介绍了在腾讯云轻量服务器上部署掘金自动签到抽奖脚本的完整流程。主要内容包括：1）通过宝塔面板配置服务器环境；2）创建Python脚本实现掘金自动签到、抽奖、错误收集和微信推送功能；3）安装所需依赖包并测试脚本运行；4）设置定时任务实现每日自动执行；5）可选配置Server酱实现微信通知。文章提供了详细的配置说明和完整的Python脚本代码，帮助用户快速搭建自动化签到系统。该方案适用于需要长期稳定运行掘金签到任务的场景，通过服务器定时执行确保签到成功率。
2026-03-17 13:51:49
634
原创 Vue scoped 样式不生效的一个坑：CSS 选择器与 class 合并机制
围绕 Vue scoped 样式在组件间不生效的常见问题，分析 CSS 选择器结构与 Vue class 合并机制之间的关系，重点说明 .a .b 与 .a.b 在匹配逻辑上的差异。结合 scoped 编译后的 data-v 属性机制，解释 :deep 穿透的实际作用范围，并通过示例演示父子组件样式覆盖与选择器书写方式对样式生效范围的影响。
2026-03-10 14:01:39
534
1
原创 CSS 动画体系（二）—— Animation关键帧动画
围绕 CSS Animation 关键帧动画体系展开，梳理 @keyframes 的时间轴动画机制及 animation 简写属性的核心组成。结合跑马灯（Marquee）案例，分析无缝滚动的实现原理，并通过数组复制策略解决内容不足导致的空白问题，同时补充 animation-play-state 与 hover 媒体查询在交互控制中的实践方式。
2026-03-10 11:34:44
440
原创 CSS 动画体系（一）—— Transition 过渡动画
在 CSS 动画体系中，Transition 是最基础也是最常用的过渡机制。它的核心作用，是让元素的“属性变化”拥有时间过程，而不是瞬间切换。通过与 transform 等变换属性配合，可以实现位移、缩放、旋转等流畅的交互效果。本篇将从 transform 的形态变化入手，系统讲解 transition 的语法结构、触发原理以及性能优势，并结合实战 Demo 理解其在浏览器渲染流程中的执行机制，建立对 CSS 过渡动画的完整认知。
2026-03-03 13:44:50
651
原创 DOM API - HTMLMediaElement（Video 播放机制与 Vue 实战）
围绕 HTMLMediaElement 的核心能力，梳理 video 的播放机制、play() 返回 Promise 的原因及异常处理方式，并结合常用属性与媒体事件说明浏览器自动播放策略。通过 Vue3 实战示例演示悬浮播放、离开暂停重置与 ended 事件监听，实现可控的视频交互组件。
2026-03-02 17:09:08
754
原创 Vue3 组件通信与 v-model 机制全解析（defineProps / defineEmits / defineModel /defineExpose）
围绕 Vue3 组件通信机制，系统梳理 defineProps、defineEmits 与 v-model 的实现原理，从运行时与 TypeScript 类型层两个维度解析 props 声明与默认值机制，并结合单个与多个 v-model 示例说明 update 事件协议及 defineModel 在 3.3+ 中的简化方式，形成完整的通信模型认知。
2026-03-02 13:56:00
498
原创 Vue Router 编程式导航：router.resolve 的路由解析机制
围绕 Vue Router 中 router.resolve 的使用场景与内部解析机制展开，梳理 RouteLocationRaw 的结构与参数含义，解析 resolve 返回值中 href 与 fullPath 的区别，并结合 base、history/hash 模式差异说明其在新窗口跳转与 URL 生成场景中的工程实践价值。
2026-02-28 17:06:24
763
原创 Zsh + Oh My Zsh + Powerlevel10k 配置图文指南(终端美化补全)：一步一步不踩坑
本文记录了一次在 macOS 上配置 Zsh、Oh My Zsh 与 Powerlevel10k 的完整实践过程，并结合真实踩坑经历，总结了配置过程中可能遇到的环境问题。内容不仅涵盖终端基础美化与常用插件配置，还重点分析了 Zsh 配置后 Node 命令失效、PATH 异常以及 Vite HMR 因文件监听机制导致失效等问题。通过对 macOS 系统行为与官方文档的对照分析，给出可复现、确定性的解决方案，适合希望一次性把开发环境配置“搞稳”的前端开发者阅读。
2026-02-03 13:52:18
983
原创 JavaScript 核心知识索引（面试向）
本专栏系统整理 JavaScript 核心基础、关键原理与高频面试考点，以「问题驱动 + 原理拆解」的方式，对常见但容易混淆的知识点进行集中梳理。内容覆盖 数据类型、作用域与闭包、原型与 this、异步模型（Event Loop / Promise / async-await） 等核心模块，适合作为 日常查阅、阶段性复盘以及前端面试前的系统性回顾索引。
2026-01-30 15:56:58
278
原创 JavaScript 中浅拷贝与深拷贝的差异与实现方式整理
内容围绕 JavaScript 中浅拷贝与深拷贝的概念差异展开，结合示例说明引用共享带来的影响，并对多种常见实现方式进行对比分析，包括展开运算符、Object.assign、JSON 序列化、structuredClone 以及递归深拷贝。重点总结各方案的适用场景与局限性，帮助在实际开发中合理选择拷贝策略。
2026-01-30 14:27:18
625
原创 ES6 中的 class 是什么？和ES5构造函数差别是什么？
ES6 引入 class 语法以统一面向对象的心智模型，但其底层仍基于原型继承实现。通过对比 class 与 ES5 构造函数的差异，梳理了提升规则、new 调用限制、继承方式、静态方法及私有字段等特性，有助于正确理解 class 的本质与使用边界。
2026-01-28 17:43:19
656
2
原创 JavaScript 原型、原型链与原型继承的核心机制解析
围绕 JavaScript 的原型机制，系统梳理了 prototype、proto 与 [[Prototype]] 之间的关系，说明原型链在属性查找过程中的运行方式，并结合构造函数示例解释原型继承的实现思路，帮助建立对 JavaScript 对象模型和继承机制的整体认知。
2026-01-28 14:40:19
1398
原创 什么是箭头函数 (Arrow Function)？跟一般的函数有什么差別？
箭头函数是 ES6 引入的一种更简洁的函数写法。相比一般函数，它语法更简单，但也有明显限制：没有自己的 this、arguments，不能使用 call / apply / bind 改变 this，也不能作为构造函数使用。箭头函数常用于回调场景（如 setTimeout、事件监听），可避免 this 指向混乱，提升代码可读性与一致性。
2026-01-23 15:51:33
1476
原创 如何解释JavaScript 中 this 的值？
这篇文章系统梳理了 JavaScript 中 this 的指向规则，从函数调用、对象方法调用、构造函数调用，到 call / apply / bind 以及箭头函数，逐一结合示例进行说明。通过正反例强调：this 的指向并非由定义位置决定，而是由调用方式决定，帮助读者建立清晰、可迁移的理解模型。
2026-01-23 10:56:47
719
原创 在 JavaScript 中用 var, let, 以及 const 有什么差別？什么时候该用哪个？
本文系统对比了 JavaScript 中 var、let 与 const 的区别，重点从作用域、重复声明、变量提升以及是否允许重新绑定四个方面进行说明。通过示例解释了函数作用域与块级作用域、变量提升与暂时性死区（TDZ）的差异，并强调 const 仅限制重新绑定而非对象内部修改。最后给出实践建议：默认使用 const，需要重新赋值时再使用 let。
2026-01-22 11:03:46
643
原创 CSS 中的高度、滚动与溢出：从 height 到 overflow 的完整理解
这篇文章系统梳理了前端开发中常见但容易混淆的布局与展示知识点，包括 height 与 min-height 的区别、overflow 与 text-overflow 的正确使用方式，以及 object-fit 在图片和视频展示中的实际作用。通过示例和对比，帮助理解内容溢出、滚动控制与媒体适配的本质规则，适合用于夯实 CSS 布局与视觉呈现的基础认知。
2026-01-20 11:05:06
1087
原创 JavaScript 中 ==、===、Object.is 以及 null、undefined、undeclared 的区别
本文系统介绍了 JavaScript 中 ==、=== 与 Object.is 的比较差异，重点说明了类型转换、+0 / -0 与 NaN 等特殊情况；同时对 null、undefined 与 undeclared 进行了区分，结合前后端数据请求与 TypeScript 类型示例，解释了三者在语义和使用场景上的不同，帮助开发者更准确地进行类型判断与数据建模。
2026-01-08 17:51:40
370
javascript基本习题,巩固所学到的js知识
2025-04-17
C语言-数据结构手写实现全部经典数据结构操作合集
2024-12-26
旅游小程序-前端代码-原创素材
2024-07-09
基于单片机控制的步进电机测控系统课程设计,嵌入式课程设计
2024-03-10
东北农业大学 操作系统 期中考试题
2023-12-20
linux虚拟机的安装 linux虚拟机安装centos7保姆级教程
2023-08-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人