- 博客(110)
- 收藏
- 关注
RSS订阅原创 MySQL 学习第一天：从数据库创建到 SQL 基础增删改查
今天正式开始学习 MySQL，主要接触了数据库与数据表的创建、SQL 基本语法、数据的增删改查、条件筛选、排序、聚合函数以及 SQL 文件的保存与执行。对于之前主要学习 JavaScript、React、Node.js 的我来说，MySQL 是后端开发中重要的一环。前端负责展示数据，Node.js 可以负责处理业务逻辑，而 MySQL 则可以用来持久化存储和管理数据。本文记录第一天学习的核心知识点。经过第一天的学习，我对 MySQL 的基本操作有了初步认识，也理解了数据库与前后端之间的关系。
2026-10-26 14:48:18
136
原创 前端网络请求详解：AJAX、XHR、Fetch、Axios、Beacon 的区别
在前端开发中，我们经常需要向服务器获取数据或提交数据，例如查询用户信息、提交登录表单、上传文件等。AJAX、XHR、Fetch、Axios、Beacon 都与网络请求有关，但它们并不是五种完全独立的请求方式。其中 AJAX 是一种技术思想，其他四个则是具体的 API 或工具。
2026-10-24 21:12:22
374
原创 Web 渲染模式：SSR、CSR、SEO 与前后端分离
浏览器想显示一个网页，需要获取 HTML、CSS、JavaScript 等资源。其中 HTML 决定页面的结构，CSS 负责样式，JavaScript 负责交互和动态内容。<h1>姓名：张三，年龄：20</h1>浏览器拿到这段 HTML，就能够解析并显示内容。但真实项目中的用户信息往往存储在数据库中，需要通过程序获取。用户数据应该在服务器端转换成 HTML，还是交给浏览器通过 JavaScript 转换成 HTML？
2026-10-24 21:02:17
267
原创 Express 静态资源托管详解：从本地 HTML 到 express.static()
静态资源是指服务器可以直接提供给客户端的文件，例如：HTML：网页结构CSS：网页样式JavaScript：网页交互逻辑图片、字体等资源文件├── app.js其中public文件夹保存网站需要的静态资源。静态资源托管，就是让服务器根据客户端的 HTTP 请求，找到并返回对应的静态文件。访问。但如果我们希望 URL 中明确带上/public就需要设置路径前缀。'/public'：指定 URL 访问前缀。：指定实际存放静态文件的目录。浏览器请求：↓匹配 URL 前缀 /public↓。
2026-10-17 22:04:18
432
原创 从零理解缓存机制：LeetCode 146 LRU 缓存
本文以LeetCode146题为切入点，系统讲解LRU缓存机制。从缓存的基本概念出发，阐明其“用空间换时间”的核心思想，重点解析LRU（最近最少使用）淘汰策略的原理与应用场景。结合JavaScript Map的插入顺序特性，实现高效O(1)时间复杂度的缓存操作，完整展示get与put方法的逻辑，并揭示其在前端开发中优化性能、减少请求的实际价值。
2026-10-17 15:06:55
496
原创 为什么 JavaScript 能开发前端，Node.js 却能开发后端？
一门编程语言，定义了语法和核心能力。JavaScript 引擎，负责执行 JavaScript 代码。在 JavaScript 引擎之外，提供各种可供调用的 API。浏览器提供 DOM、BOM 等 Web API，让 JavaScript 可以操作网页；Node.js 提供文件系统、网络服务等能力，让 JavaScript 可以开发后端。一句话总结：JavaScript 能做什么，不仅取决于语言本身，还取决于它所处的运行环境。
2026-10-14 17:54:06
374
原创 两小时带你入门 TypeScript（下）：工程配置、类型报错与高级类型
至此，《两小时带你入门 TypeScript》系列就结束了。上篇介绍了 TypeScript 的基础类型与核心语法；中篇通过泛型和 React、Vue 实战，了解如何在前端项目中使用 TS；下篇则补充了工程配置、常见类型报错，以及一些高级类型操作。对于刚接触 TypeScript 的前端开发者，现阶段最重要的不是掌握复杂的类型体操，而是能够在真实项目中正确使用类型系统。建议优先完成一次小型 JS 项目向 TS 的迁移，重点练习接口数据、组件 Props、状态和事件的类型声明。
2026-10-13 20:39:15
192
原创 两小时带你入门 TypeScript（中）：泛型与 React / Vue 项目实战
我们可以使用interface这里的约束了组件应该接收哪些属性，以及每个属性的类型。<UserCard name="张三" age={20} /><UserCard name="张三" age="20" />会报错，因为age应该是数字。表示父组件需要传入一个无参数的回调函数。学完本篇，我们已经从单纯编写 TypeScript 类型声明，过渡到了在前端项目中实际使用类型。泛型允许我们暂时不确定具体类型，但仍然保持数据之间的类型关系。
2026-10-13 20:32:06
219
原创 两小时带你入门 TypeScript（上）：从 JavaScript 到类型系统
到这里，我们已经完成 TypeScript 的核心基础。回顾一下，TypeScript 并不是要改变 JavaScript 的运行方式，而是在 JavaScript 之上增加一套类型描述和静态检查机制。类型注解：使用: 类型声明变量、参数和返回值的类型。类型推断：让 TypeScript 自动推断明确的类型，避免重复声明。函数类型：约束函数接收什么参数、返回什么结果。联合类型：使用表达多种可能类型，并通过类型收窄安全使用。字面量类型：将变量限制在具体值范围内，适合表示业务状态。
2026-10-13 20:18:20
206
原创 前端面试:JavaScript 栈与堆的区别：内存管理与引用类型详解
特性栈（Stack）堆（Heap）主要存储内容函数调用和执行状态动态创建的对象等数据内存分配随函数调用建立栈帧根据对象需要动态分配管理开销通常较低分配和回收机制更复杂内存管理函数返回时移除栈帧主要依靠垃圾回收存储结构后进先出动态内存区域大小限制通常较小通常较大，但同样有限线程关系不同线程通常有独立调用栈是否共享取决于运行时栈和堆之所以采用不同的管理方式，根本原因是程序运行时不同数据的生命周期不同。函数调用具有明确的执行顺序，适合使用后进先出的调用栈管理；
2026-10-09 17:20:57
250
原创 JavaScript this 面试：五种绑定规则、优先级与常见面试陷阱
this是 JavaScript 提供的一个特殊关键字，用于在函数执行过程中访问当前的调用上下文。sayHi() {这里通过调用函数，因此this指向user，相当于访问user.name。但如果改变函数的调用方式，即使是同一个函数，this的指向也可能发生变化。JavaScript 中this的核心并不是判断函数在哪里定义，而是判断函数怎样调用。调用方式示例this 指向new 绑定新实例显式绑定指定对象隐式绑定obj.fn()调用对象默认绑定fn()取决于严格模式和运行环境箭头函数。
2026-10-09 11:42:16
170
原创 LeetCode 21：合并两个有序链表——双指针与哑节点详解
这里使用的是 JavaScript 的逻辑或运算符||。它会返回第一个真值操作数；如果第一个是假值，就返回第二个操作数。在这道题中，list1和list2是链表节点引用或null。可以理解成：如果 list1 还有节点，就使用 list1；否则使用 list2。已合并：list1 剩余：4 → nulllist2：null因为list1直接把剩余节点连接到结果链表末尾。为什么可以直接连接，不需要继续逐个比较？因为两个原始链表都是升序排列的。
2026-10-09 11:29:37
364
原创 ACM/ICPC 竞赛入门指南：从零基础到算法竞赛，如何规划学习路线？
ACM 是一个需要长期积累的领域，不存在适合所有人的固定学习路线。有人喜欢先系统学习算法，再参加比赛；也有人更适合通过比赛发现问题，然后反过来补充知识。无论采用哪种方式，都需要避免两个常见误区：只学习算法却不独立做题，以及只追求刷题数量却不总结思路。算法竞赛真正考察的是能否在有限时间内，把已有知识转化成解决未知问题的能力。对于刚入门的同学来说，没有必要一开始就追求复杂算法和高难度题目。更重要的是打好基础，形成持续训练和及时复盘的习惯。
2026-10-09 11:18:46
220
原创 每日一题:LeetCode 206：反转链表——三指针与原地反转详解
理解反转链表之前，需要先知道链表的基本结构。数组通过下标访问元素，而链表由多个节点连接而成。val：当前节点保存的数据。next：指向下一个节点的引用。val: 1,next: nullval: 2,next: nullnode1.val// 1node1.next// node2 对象// 2也就是说，next保存的不是下一个节点的数值，而是下一个节点对象的引用。就表示让node1不再指向node2。反转链表，正是通过不断修改这样的next引用完成的。head↓↑head。
2026-10-09 11:11:44
180
原创 前端八股：JavaScript 深拷贝详解：实现方式、递归原理与循环引用
JavaScript 中的对象属于引用类型。当一个变量赋值给另一个变量时，如果赋的是对象，复制的是对象的引用，而不是重新创建一个对象。info: {age: 18// 20这是因为obj1和obj2指向同一个对象，因此修改其中一个，另一个也会受到影响。浅拷贝（Shallow Copy）会创建一个新对象，但只复制第一层属性。如果属性值是嵌套对象，复制的仍然是原对象的引用。// false// true虽然obj1和obj2是两个不同对象，但里面的info仍然指向同一个对象。而。
2026-10-08 22:32:02
365
原创 每日一题：LeetCode 1：两数之和——从暴力枚举到 Map 哈希表优化
这道题最重要的优化思想，是把寻找两个数的问题转换成查找差值的问题。i++) {遍历当前数字↓计算 need = target - nums[i]↓检查 Map 是否存在 need↓存在 → 返回之前下标和当前下标↓不存在 → 保存当前数字及其下标↓继续遍历一句话记住：Map 保存已经遍历过的数字和下标，每遇到一个数字，就检查目标差值是否已经出现。这道题不仅要掌握代码，更要理解其中的空间换时间思想，它也是哈希表在算法题中最经典的应用之一。
2026-10-08 22:19:26
368
原创 每日一题:LeetCode 20：有效的括号——栈与哈希映射详解
这是为了防止字符串中还有没有闭合的左括号。s = "((("因为始终没有右括号，所以之前的匹配判断不会报错。// false说明还有左括号没有匹配成功。stack = []// true因此，判断有效括号需要同时满足两个条件：每次遇到右括号，都能匹配最近的左括号。所有字符遍历结束之后，栈必须为空。这道题的核心是使用栈来维护尚未匹配的左括号。')': '(',']': '[','}': '{'} else {遍历字符串↓遇到左括号↓push() 入栈↓遇到右括号↓。
2026-10-08 17:54:22
474
原创 每日一题:LeetCode 88：合并两个有序数组——双指针与从后往前填充
两个数组中的每个元素最多只会被处理一次。i最多移动m次。j最多移动n次。O(m + n)同时没有额外创建长度为m + nijkO(1)这也是这道题要求“原地合并”的意义。这道题最重要的不是记代码，而是理解：两个数组已经有序，而且nums1后面还有空位置，所以可以从最大元素开始比较，从后向前填充。i--} else {j--k--i 看 nums1 当前最大的数j 看 nums2 当前最大的数比较两者谁大↓放到 nums1 最后面然后对应指针向前移动。
2026-10-07 15:30:04
368
原创 每日一题：LeetCode 165：比较版本号
1-1说明所有对应版本号都相等。1 == 10 == 00 == 0return 0表示：两个版本号相同。i < len;i++) {return 0先 split 拆版本号，再从左到右逐段转成数字比较；缺失部分补 0，前导 0 用 Number 自动处理。
2026-10-07 15:10:27
269
原创 每日一题：LeetCode 3：无重复字符的最长子串——滑动窗口思路详解
滑动窗口本质上就是：用两个指针维护一个连续区间。↑ ↑L Rabc没有重复字符，所以窗口合法。于是righta b c a↑ ↑L Rabca出现了两个a，不合法。a b c a↑ ↑L Rbca重新满足“没有重复字符”。右指针负责扩张，左指针负责缩小。这道题的核心不是Set滑动窗口 + 双指针。right++) {left++maxLength,right 不断往右扩↓如果出现重复↓left 不断往右缩↓直到窗口重新合法↓记录当前窗口长度↓继续向右。
2026-10-06 21:09:02
217
原创 前端八股: var、let、const 的区别
JavaScript 在执行代码之前，会先处理变量和函数声明。变量提升 Hoistingvar a = 10undefinedvar aa = 10var声明会被提升，并且初始化为undefined。let a = 10let a = 10之前，这一段区域就是a的暂时性死区。进入作用域↓TDZ 开始↓console.log(a) // 不能访问↓let a = 10↓TDZ 结束↓之后可以正常使用 alet完全没有变量提升。提升了，但在初始化之前不能访问。const同样如此。
2026-10-06 20:56:23
331
原创 前端八股：Vue2 与 Vue3 的核心区别：响应式、Composition API 与性能优化
打包时把没有使用到的代码删除。import {ref,reactive,computedref现代打包工具会尽可能把没有使用到的部分移除。只保留真正需要的代码bundle 体积。
2026-10-06 15:25:05
199
原创 JavaScript 原型链：prototype、proto、new 与 instanceof
JavaScript 中，一个对象通常会关联另一个对象。这个对象的原型。p// truep↓ 原型如果p自己找不到某个属性，就会去它的原型上继续查找。p而nullp↓↓↓null原型链 Prototype Chain当对象自身找不到属性时，就会沿着这条链向上查找。p↓ 没有↓ 没有↓ 找到 toString对象能使用某个方法，不代表这个方法一定属于对象自己，也可能来自原型链。概念含义原型一个对象真正关联的上层对象原型对象被其他对象当作原型使用的对象prototype。
2026-10-05 00:27:51
270
原创 面试热点： JavaScript 事件循环：Event Loop、宏任务、微任务与执行顺序
script 整体代码setTimeoutI/O部分事件回调console.log("宏任务")})setTimeout本身是浏览器或 Node.js 提供的能力，不是 JavaScript 语言本身负责计时。setTimeout↓浏览器 / Node.js 处理↓回调进入任务队列↓宏任务定时器、事件、I/O 等宿主环境提供的能力有关。async / await 后续代码console.log("微任务")}).then()微任务队列Promise 这套异步机制有关。async。
2026-10-04 00:45:17
236
原创 一篇搞懂 defer 和 async
defer= 一边下载，一边解析 HTML= HTML 解析完后按顺序执行async= 一边下载，一边解析 HTML= 谁先下载完谁马上执行defer更稳，适合普通业务脚本；async更自由，适合互不依赖的独立脚本。
2026-10-04 00:20:37
202
原创 一篇搞懂 link、href、src、import：前端资源到底是怎么引入的？
写法作用<link>关联外部资源href指定链接或资源地址src指定要加载的资源import导入 JS / TS 模块href是“指向哪里”，src是“从哪里加载”，import是“从别的模块拿代码”，link是负责关联外部资源的 HTML 标签。
2026-10-04 00:17:09
155
原创 从 dispatch(fetchChannelList()) 开始，彻底搞懂 Redux 异步、Thunk 和两层 dispatch
然后完成数据修改。这篇文章就把这几个问题一次理顺。
2026-09-21 16:54:24
127
原创 从零理解 Redux：从 state、action、reducer 到 Redux Toolkit 与异步请求
React组件↓↓Redux收到action↓reducer根据 action 修改 state↓store保存新的state↓useSelector拿到新state↓React组件重新渲染↓帮你生成：reducer负责说：“我要做什么”reducer负责真正修改 state不是自己让 count 加一。↓生成“我要加一”的 action↓dispatch↓Redux 找到 reducer↓↓↓生成：↓dispatch↓reducer↓↓↓。
2026-09-20 23:17:58
187
原创 DeepSeek Harness 上手教程：从 API 密钥到本地 WebUI 完整部署
普通用户最简流程：安装 Node.js → 执行→ 浏览器访问 3080 端口，填入密钥、选择工作区，即可拥有本地代码 Agent，自动读库、执行命令、处理工程任务。依托「一切皆插件」的架构，后续模型、工具都可以灵活替换，是值得持续关注的开源 Agent 项目。
2026-09-14 16:07:43
554
1
原创 Vue / React 列表渲染中的 key：为什么没有 key，Checkbox 可能“对号跑错”？
本文通过一个Vue列表渲染中checkbox状态错位的典型案例，深入解析了key的本质作用：为列表项提供稳定的身份标识，避免因位置复用导致的状态错乱。文章强调，key并非仅用于循环，而是确保框架在数据变动时能正确识别、复用或销毁对应节点，尤其在包含input、checkbox等有状态组件时至关重要。推荐使用唯一且稳定的item.id作为key，避免使用index或Math.random()，并指出key是内部机制，不影响最终渲染。核心口诀：列表项要有“身份证”，数据变，身份不变。
2026-09-14 16:05:26
312
原创 # CSS 全局样式污染怎么办？4 种主流方案带你彻底解决## 前言
CSS 设计之初就是全局生效的：浏览器会把页面中所有样式表合并成一张，只要两个元素的class名称相同，后加载的样式就会覆盖先加载的样式，和它属于哪个组件、哪个文件毫无关系。CSS 全局污染的本质，是「全局作用域 + 类名重复」的叠加效应。让样式的作用域限定在组件内部，互不干扰。没有绝对最优的方案，根据自己的技术栈、项目规模和团队习惯选择即可。理解了背后的原理，无论用哪种方案，你都能清晰地知道它在解决什么问题、为什么能解决问题。
2026-09-13 22:05:13
288
原创 从语法坑点到 JS 内存底层：Vue 3 watch 侦听器深度全解
为了在日常开发中写出清晰、高效且无 bug 的watch监听目标推荐写法oldValue 是否准确？deep 配置策略单个ref基本类型✅ 准确默认浅层多个ref✅ 准确默认浅层整个reactive对象❌ 一模一样强制深度监听（无需配置）reactive的基本类型属性✅ 准确无需配置reactive的对象类型属性修改内部属性时一模一样必须显式设置。
2026-08-13 21:41:54
413
原创 视图的秘密：从内存静默到 Vue 2/3 响应式原理与 Reflect 进阶
内存的数据自己会变，不需要任何人允许；响应式的本质不是 “阻止你改数据”，而是 “监控改动，收到改动信号后更新页面”；get/set 拦截 = 信号接收器。没有接收器，改动发生了，但是无人通报，视图停滞。
2026-08-13 16:04:22
291
原创 Vue 2-3 架构演进-2：从“全局单例”到“应用实例”API 变化解析
Vue3将全局API从构造函数迁移到应用实例，通过createApp实现多应用隔离，解决了Vue2全局污染、Tree-Shaking困难等问题。这一改变支持微前端架构，避免插件冲突，优化了模块化设计和性能。开发者需更新全局API调用方式，但这一架构演进显著提升了Vue在大规模应用中的健壮性和可维护性。
2026-08-12 23:13:59
386
原创 Vue 2 与 Vue 3 在应用初始化上的设计差异与技术演进
在 Vue 框架的发展历程中，入口文件（main.js）的初始化代码虽然只有短短几行，却代表了框架底层架构思想的根本变革。本文将深度解析 Vue 2 与 Vue 3 在应用初始化上的设计差异与技术演进。
2026-08-12 22:58:34
196
原创 Vue 路由 Hash 模式与 History 模式详解
Vue Router 提供了两种主流实现方案：Hash 模式与 History 模式，二者在底层原理、URL 形态、部署要求等维度存在本质差异。
2026-08-11 23:49:17
399
原创 浏览器原理深度解析：从输入 URL 到页面展现的全流程剖析
本文系统梳理了现代Web开发的核心技术要点，包括：1）主流JavaScript引擎（V8/SpiderMonkey/JavaScriptCore）的特性对比与识别方法；2）完整页面加载流程，涵盖7个关键阶段（从DNS解析到渲染绘制）；3）DOM/CSSOM解析机制与渲染树合成原理；4）性能优化核心策略，重点解决回流/重绘问题；5）内存管理技巧与缓存配置方案。全文通过技术对比、流程图解和代码示例，完整呈现了浏览器从接收请求到页面渲染的全链路技术实现，为开发者提供了全面的性能优化方法论。
2026-07-24 17:09:08
184
原创 前端页面白屏问题排查与处理指南
本文介绍了页面白屏问题的定义、排查流程及解决方案。白屏指网页未渲染任何内容的现象，需与加载缓慢或样式异常区分。排查流程包括：浏览器控制台分析JS错误、网络请求状态；代码级检查常见错误（如未定义属性访问）；资源加载检测；框架相关排查（如React错误边界）。解决方案涵盖资源加载重试、防御性编程、接口容错处理及监控报警体系（如Sentry）。最佳实践建议优化构建配置、部署策略、性能监控，并准备容灾方案（如ServiceWorker缓存）。最后以Vue路由级白屏为例，展示异步组件加载优化方法。全文提供完整代码示例
2026-07-24 17:03:00
250
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人