qq_41361668的博客

从案例分析 Vue3 Tokenizer+Parser 源码五

qq_41361668 — Thu, 10 Sep 2026 00:26:03 +0800

指令的完整解析链路，从词法分析（tokenizer）到语法分析（parser），逐行还原标签解析的状态切换、回调触发与 AST 节点生成全过程。Tokenizer 解析完完整属性（属性名 + 属性值 + 引号）后触发。在整条指令解析流程中，Tokenizer 会依次切换 6 种解析状态，完成标签名、属性名、属性值分段读取。：属性名称读取完毕后触发，普通 HTML 属性与指令属性都会走到该回调。，主循环读取到非空白字符，启动属性解析初始化。），更新索引位置到目标字符（本例中目标字符位置。），途中记录换行符；

从案例分析 Vue3 Tokenizer+Parser 源码四

qq_41361668 — Mon, 07 Sep 2026 00:19:26 +0800

状态后，Tokenizer 会根据属性值的包裹符号自动区分三种解析模式：双引号（Dq）、单引号（Sq）、无引号（Nq），本次案例覆盖全部三种场景。Parser 回调收尾逻辑：统一处理属性值赋值、位置修正、空格压缩、异常校验，最终将完整属性节点推入元素的 props 数组。主循环读取到非空格字符（属性首字符）时，触发属性解析初始化逻辑。，覆盖无引号属性、双引号属性、布尔属性、空值属性四种常见属性场景。后，遇到空格（多属性分隔符），触发属性值解析结束，执行。赋值，创建属性节点基础结构，记录属性名及位置信息。

从案例分析 Vue3 Tokenizer+Parser 源码三

qq_41361668 — Mon, 31 Aug 2026 23:00:49 +0800

Tokenizer 入口主循环，不停读取字符，根据当前 state 分发不同处理函数，同时记录换行用于行列位置。本小节拆解 Vue3 编译器中普通 HTML 标签与内部文本节点的完整解析流程。作为父节点（就是 div），把 TEXT 节点 push 进父节点 children。= div 元素节点，后续解析到的子节点都会挂载到 div。，i=0，直接 shift 弹出 div；（a‑z/A‑Z）；，此时节点还没有真正加入 AST。是所有标签的总入口，根据。回调：处理栈的弹出逻辑。，进入标签名解析阶段。

从案例分析 Vue3 Tokenizer 源码二

qq_41361668 — Sat, 29 Aug 2026 23:35:19 +0800

插值表达式已有独立测试用例，源码分析阶段可将普通文本与插值场景合并梳理，我们先看对应的测试用例，验证解析后生成的 AST 结构是否符合预期。回调会自动完成几项工作：v-pre 降级处理、剔除插值表达式首尾空白、HTML 实体解码，最后生成 INTERPOLATION 节点并推入根节点的 children。将插值之前的普通文本生成文本节点，并入根节点的 children 数组，该回调的基础逻辑已在情形一中说明。初始值为 0，用来标记当前正在收集的连续文本 / 节点区间起始下标，和不断自增的。

从案例分析 Vue3 Tokenizer 源码

qq_41361668 — Fri, 28 Aug 2026 22:37:38 +0800

换行/多余空格处理原理，全程保留核心源码，按「执行流程+核心原理+案例佐证」的逻辑梳理，清晰还原 Vue 模板文本解析底层机制。createRoot 根节点创建源码：根节点为整棵 AST 的顶层节点，存储模板原始源码、子节点、编译辅助变量等全局信息。测试场景：模板源码仅含换行、空格与普通文本，无标签、无插值语法，是最基础的模板解析场景。，对文本节点的换行、空格、Tab 做统一规范化处理，是 Vue 模板空白优雅渲染的核心。回调，接收文本片段的起止索引，最终生成/合并文本节点，挂载到根节点。

Vue3 Tokenizer 词法分析器完整状态机流转深度梳理（3.4+ 新版架构）

qq_41361668 — Fri, 21 Aug 2026 21:55:07 +0800

通过type区分节点类型：0=根节点、1=元素节点、2=文本节点、4=表达式节点、7=指令节点元素子节点统一存储在children数组，天然对应模板嵌套结构元素原生属性、Vue 指令统一存放在props数组不同节点拥有专属字段：指令节点含，表达式节点含contentAST 与原始模板完全同构，模板所有顶级标签均作为 Root 根节点的子元素。

血条识别功能实现及原理

qq_41361668 — Sun, 20 Jul 2025 22:47:02 +0800

本文介绍了如何利用Python和OpenCV实现游戏怪物的血条识别功能。通过颜色阈值分割技术(cv2.inRange)在HSV色彩空间中提取红色血条区域，结合形态学操作(腐蚀膨胀)优化检测效果，最后使用轮廓检测定位怪物位置。该方法避免了直接识别复杂多变的怪物图像，转而利用固定特征(血条)实现高效目标定位，为游戏自动化提供了实用解决方案。文章详细解释了关键函数原理和参数设置，并附有完整的代码实现和效果演示图。

【基础夯实】TCP/IP 协议是怎么控制数据收发

qq_41361668 — Tue, 30 Jul 2024 23:03:32 +0800

对于第三点 TCP/IP 协议是怎么来控制数据在网络中的传递一知半解，最近查阅相关网络方面的书籍才彻底搞懂其原理。

vue + vite 图标导入总结

qq_41361668 — Thu, 06 Jun 2024 22:47:07 +0800

在页面中我们会使用到各种图标，为了保证图标在放大缩小不失真，通常会采用 SVG 来作为图标。SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它可以用来创建清晰的、可缩放的图形，无论放大多少倍都不会失真。/* 你可以通过CSS来控制SVG图标 */.my-iconwidth;height;fill;/* 这会让SVG填充颜色跟随父元素的颜色 */

通用表格组件改造记录

qq_41361668 — Thu, 09 May 2024 23:55:28 +0800

参照 ruoyi-vue 完成权限管理系统后台时，在大部分页面上都需要使用到表格。ruoyi-vue 做法是每个表格都单独完成，观察每个表格样式很接近，遂想封装一个通用表格组件来取代之前的代码。以下是 ruoyi-vue 的页面：极其糟糕的思路一：将通用表格组件仅抽取出一个 vue 文件，传入表格列表数据通过 v-for 循环生成，针对不同的列如状态，操作列需要实现不一样的样式和功能，采用 v-if 来判断。当多复用几个表格场景后就发现此种方式纯纯屎山，复用场景一多，看着都头皮发麻，在通用组件中还参杂业

openApi3 规范及knife4j使用

qq_41361668 — Tue, 12 Mar 2024 21:52:19 +0800

OpenApi 规范，swagger3 结合 knife4j 完成接口设计

万字梳理 redis

qq_41361668 — Tue, 02 May 2023 14:25:05 +0800

前置环境准备：自己购买云服务器或者使用VMWare本地虚拟机，通过安装 C++ 库环境下载：通过 redis 官网获取下载地址，打开终端cd /opt进入 opt 文件夹，通过 wget 命令下载安装包进入目录，执行 make 命令，该过程需要一定的时间，出现以下结果表示安装成功进入目录，ll查看安装的目录redis-benchmark:性能测试工具redis-check-aof：修复有问题的AOF文件redis-check-rdb：修复有问题的dump.rdb文件。

vue-element-admin和ruoyi-vue权限控制

qq_41361668 — Fri, 03 Mar 2023 14:10:50 +0800

上份工作是做权限管理的项目，做过前端也做过后端，过程中只是对权限管理有一定了解，认证和鉴权具体实现并不清楚。利用闲暇时间学习和来弥补和完善整个权限认证体系。

PlantUML 用代码画思维导图，时序图，流程图

qq_41361668 — Tue, 28 Feb 2023 15:14:16 +0800

PlantUML 是一个开源项目，支持通过脚本绘图。下面通过一些简单案例来完成思维导图，时序图，活动图。

万字总结网络请求和浏览器渲染机制

qq_41361668 — Tue, 14 Feb 2023 19:34:06 +0800

在浏览器地址栏输入正确的 url 到整个页面渲染完成都经历了什么，补全输入的网址，DNS解析拿到IP地址；遵循网络通信的协议将请求发送到目标IP，目标IP返回所需资源；浏览器拿到响应资源按照一定规则渲染页面

从0开始canvas系列四 --- 运动模型

qq_41361668 — Sat, 07 May 2022 10:26:04 +0800

【扩展】匀速/加速/弹性运动要了解这运动，首先你必须得对速度（v），位移（s），时间（t），加速度（a）完全了解，如果你完全了解上述概念，那你就可以直接跳过往下看，不清楚那就往下看吧 s=vt 相信接受过九年义务教育的你，对于这个公式不会陌生吧，但是你真的完全了解它吗上述公式仅适用于匀速运动，且s和v都是矢量，正负代表方向匀速直线运动即速度大小和方向不变的运动，其相同时间位移量变化一致，即 v=Δs/Δt 为定值，速度是矢量，他有大小和方向 s=vt或者s = s1+v*t 代码中的匀速直线运动

从0开始canvas系列三 --- 图像像素级操作

qq_41361668 — Sun, 01 May 2022 10:21:33 +0800

从0开始canvas系列从0开始canvas系列一 — canvas画布从0开始canvas系列二 — 文本和图像从0开始canvas系列三 — 图像像素级操作图像像素级操作 imageData对象大家都知道图片是由许多的像素点构成的，canvas对图像的操作也是基于像素点的，所有的像素点信息都可以存放在imageData实例中 ImageData() 构造函数返回一个新的实例化的 ImageData 对象，此对象由给定的类型化数组和指定的宽度与高度组成 new ImageData([arr

从0开始canvas系列二 --- drawImage

qq_41361668 — Thu, 21 Apr 2022 23:36:20 +0800

canvas画布简单案例经过第一期从0开始canvas系列，相信大家对于canvas都有了一定的了解，下面我们通过一个案例巩固下上一期的canvas 案例一：霓虹灯特效