qq_41798568的博客

原创 Vite 前端项目 - CSS变量智能提示

这是一个基于Vite的现代化前端项目，专注于提供CSS变量智能提示功能。项目集成了完整的CSS变量支持，包括智能补全、详细描述和颜色预览，大幅提升开发效率。通过配置VSCode设置和安装CSS Var Complete插件，开发者可以快速获取变量提示。项目支持多主题切换，提供开箱即用的开发体验，包含详细的配置说明和使用指南，适合需要高效CSS开发的前端项目。

原创 BFC（块级格式化上下文）- 邪修理解办法

BFC（块级格式化上下文）是一种CSS布局概念，可形象理解为"独立王国"。触发BFC的方式包括根元素、浮动、绝对定位、特殊display值等。BFC具有四大特性：1)内部元素相互隔离；2)垂直边距不合并；3)包含浮动元素；4)不与浮动元素重叠。实际应用中可用于清除浮动、防止margin重叠和实现自适应布局。通过"独立王国"的比喻，可轻松记忆BFC的核心原理和应用场景，如使用overflow:hidden快速创建BFC解决问题。

原创 这是一个很好的效果展示

原创 学习笔记——常识解答之垃圾回收机制

本文介绍了JavaScript中的垃圾回收机制。首先解释了什么是"垃圾"——即不再被引用的内存对象，并通过代码示例说明内存泄漏的风险。然后详细讲解了两种主要回收算法：标记清除法（从根节点标记可达对象后清除不可达对象）和引用计数法（通过计数引用次数判断对象是否存活），分析了各自的优缺点。接着介绍了V8引擎的分代回收策略，将堆内存分为新生代（采用空间复制策略）和老生代（采用标记整理算法）。最后提到增量标记和懒性清理等优化技术，以及三色标记法和写屏障等实现细节。这些机制共同保障了JavaScr

原创 学习笔记——vite 打包构建优化之tree shaking

本文总结了Vite打包构建优化方案，重点分析了Tree Shaking机制。通过区分开发环境和生产环境优化，详细说明了如何处理代码副作用：1）在package.json中配置sideEffects属性；2）使用/*#__PURE__*/注释标记无副作用代码；3）针对lodash等库推荐使用按需导入方式（如lodash-es）而非全量引入。通过正确配置可显著减少打包体积，提升构建效率。文末展示了不同配置下的打包效果对比图，直观呈现优化效果。

原创 学习笔记——主攻 vite

本文介绍了如何手动实现Vite的基础加载逻辑，主要步骤包括：1)使用Babel转换JSX语法；2)创建本地服务器拦截请求并处理JSX文件；3)通过CDN加载React库。通过示例代码展示了服务器如何拦截.jsx文件请求，并用Babel将其转换为浏览器可执行的JavaScript代码。最终实现了React组件的正确渲染，为后续Vite开发环境优化和插件开发奠定了基础。

原创 学习笔记——最新版本的代码提交规范

本文介绍了如何通过husky和lint-staged实现Git提交规范化。首先安装相关依赖，配置husky的commit-msg和pre-commit钩子，用于校验提交消息格式和暂存区代码。提交信息需符合特定格式（如feat(git):to #新加提交规范），否则会拦截并提示错误。执行顺序为pre-commit先于commit-msg，若前者失败则后者不执行。注意需使用Node 20版本以避免兼容性问题。该方案能有效规范团队代码提交，提升协作效率。

原创 vue学习笔记

Vue2.0 学习要点总结 本文记录了Vue2.0学习过程中的关键知识点和常见问题。主要内容包括： 脚手架安装和常见问题处理 核心概念对比：v-if与v-show的区别、v-model与v-bind的区别 组件开发：props定义、生命周期钩子函数 响应式特性：计算属性与侦听器的适用场景分析 列表渲染：v-for使用注意事项及key的作用 事件处理：v-on用法和自定义事件 插槽机制：具名插槽和默认插槽的使用 重点解决了计算属性与侦听器的选择问题，详细分析了各自适用场景，并提供了组件间通信的实践方法。

原创 宝宝～我成功登上了泰山

摘要 本文通过攀登泰山的经历，阐述了人生感悟。作者从五个方面展开：1)目标与方向的重要性，即使看不见终点也要坚定前行；2)突破规则束缚，敢于打破思维定式；3)避免被同路人拖累，保持超越意识；4)号召力需因时因地制宜；5)看似捷径未必适合自己。文章以登山喻人生，强调在未知面前保持勇气，通过实际行动突破自我限制，最终实现目标。字里行间流露出对生活的思考和对挑战的积极态度。

原创 宝宝～我成功登上了泰山

摘要（149字） 泰山之行让我领悟：确立目标后，每个脚步都在缩短与"南天门"的距离。黑暗中微弱的灯光如同人生路上的技能点，积累越多前路越明。在拥堵的十八盘，我明白固守规则可能错失良机；而同行者的舒适节奏启示我：持续超越自我才是突破关键。号召力需情境配合，否则易成尴尬；下山时误选的"捷径"更是证明：表面平坦的路可能更耗心力。这次攀登不仅是体力挑战，更是对生活哲理的生动诠释。

原创 vite_react 插件 find_code 最终版本

文章摘要：本文介绍了一个基于Vite的React开发辅助插件find_code的实现方案。该插件通过AST解析在JSX元素中添加行号标记，并提供两个服务接口：/getPathIndexMap获取文件路径映射，/jumpToVscode实现点击元素跳转至VSCode对应代码位置的功能。核心代码展示了如何通过Babel解析修改源码，以及创建可视化选择框辅助开发定位。该插件有效解决了大型项目开发中模块定位耗时的问题，提升了开发效率。

原创 find_code 插件 2

本文介绍了一个基于Vite的React插件开发方案，主要功能是为JSX元素自动注入代码位置信息。该插件使用Ant Design + Vite + TypeScript + React技术栈开发，通过Babel解析代码生成AST，遍历JSX元素并添加"data-path"属性（包含文件路径和行号）。插件在开发环境下运行，可帮助开发者快速定位代码位置。文章还提供了完整的插件实现代码和配置示例，并指出需要注意合理注入标准HTML属性。最终实现效果是为组件自动添加源码位置标记，方便调试和开发。

原创 find_code 插件 react_vite

本文介绍了使用Babel工具链实现JSX元素自动添加路径属性的两种方法。第一种是同步方式，通过解析代码生成AST，遍历JSX元素并添加包含文件路径和行号的path属性，最后重新生成代码。第二种是异步版本，使用Promise API处理文件操作。两种方法都确保不会重复添加已存在的path属性，并保留原始代码格式。执行后会在JSX元素中自动添加形如"文件路径:行号"的path属性，方便代码定位和调试。

原创 基金估值收益统计系统

本文介绍了一个自建的基金估值收益统计系统。作者因现有系统数据获取卡顿，开发了本地化解决方案，支持基金搜索添加、本金配置、收益预估和自动更新功能。系统提供总收益统计、涨跌幅排行，数据本地存储保障隐私，并支持配置文件快速初始化。未来计划加入跌幅提醒、AI识别导入、历史数据分析等功能优化用户体验。该系统旨在帮助投资者更高效地跟踪基金表现，把握市场机会。

原创 自定义 eslint 规则

自定义ESLint规则实现金额运算校验本文介绍了如何创建自定义ESLint规则来检测金额变量直接相加的操作，防止精度丢失问题。通过创建eslint-plugin-guojieeslint插件，实现规则定义（禁止Amount结尾变量直接相加）、错误提示和规则配置。使用npm link方式在项目中应用该规则，并在.eslintrc.js中配置启用。该方案适用于ESLint 8.57.1及以上版本，可以有效规范团队代码中的金额运算操作。

原创 聊天评论区

vue

原创 React实现lottie文件预览（可识别json文件或压缩包带资源的素材）

获取到json 数据 外加 图片/媒体资源文件 就可以组装数据。🔴 1、React实现lottie文件预览，所用到的第三方库。后缀的文件，在进行文件资源遍历的时候需要过滤掉。也可以实现资源本地化模式的方式预览压缩包。可以实现资源线上化模式的方式预览压缩包。解压之后，会存在一些隐藏文件的出现。使用会有点问题，后面就进行说明。可以实现json文件的直接预览。mac 电脑的压缩文件在使用。也可以实现压缩包带资源的素材。🟢 1.2、可实现的效果。

原创 国内大量平台接入DeepSeek-R1-联网满血版 -

钉钉Ai助理：https://applink.dingtalk.com/client/aiAgent。腾讯文档：https://docs.qq.com/ai?腾讯元宝：https://yuanbao.tencent.com/QQ浏览器：https://aisearch.qq.com/知乎直答：https://zhida.zhihu.com/当贝AI：https://ai.dangbei.com/腾讯ima：https://ima.qq.com/

原创 优雅的git log输出内容更加醒目

【代码】优雅的git log输出内容更加醒目。

原创 分组标签tag

【代码】分组标签tag。

原创 分组表格antd+ react +ts

【代码】分组表格antd+ react +ts。

原创 grid 布局react组件可以循数据自定义渲染某个数据 ，或插入某些数据在某个索引下

【代码】grid 布局react组件可以循数据自定义渲染某个数据 ，或插入某些数据在某个索引下。

原创 工程化开发谷歌插件到底有爽

谷歌插件开发本质上就是写一些 html + js + css。

原创 快速的配置Prettier，让代码更整洁

一个人一个代码风格，先抛开语法的使用不谈，加不加空格、加不加分号也是萝卜白菜各有所爱，那怎么统一我们的代码格式呢prettier就是为我们解决这个问题的。

原创 快速的配置Prettier，让代码更整洁

一个人一个代码风格，先抛开语法的使用不谈，加不加空格、加不加分号也是萝卜白菜各有所爱，那怎么统一我们的代码格式呢prettier就是为我们解决这个问题的。

原创 node实现自动部署

init.js [用于初始化执行，获取当前操作的分支]publish.js [发布所需核心命令]

原创 git误操作带来的麻烦-merge

如果你想将一个本地分支（我们称之为source-branch）的内容完全覆盖远程的另一个分支（我们称之为target-branch），可以按照以下步骤操作。但请注意，这种方法会永久性地改变target-branch的提交历史，所以在执行之前，请确保你有相应的权限，并且已经备份了所有重要数据。数据安全：这一步骤会永久性地改变远程分支的历史，如果有其他人在该分支上工作，他们的本地历史将与远程不匹配，可能导致他们需要采取额外措施（如重新克隆或变基）来解决冲突。

原创 react 判断整个表单/state数据是否有变化 从而实施不同的操作逻辑解决方案【潦草版】

如果使用的antd 的from ，可以直接进行整个表单的数据监听onchange，判断这个key 是否是排除之外的值 如果不是则给haschange 打上标记。我们可以重写setState 方式，只要他调用我们的setState参数 则 进行haschange打标记。产品说需要判断整个表单的数据 如果只有某两个值变化不会走这个逻辑，其他值变化了那就需要走这个逻辑。比如从 1 => 0 又从 0 =>1 本质上是没有变化 但是我们依旧判断为变化了。这个只是粗略的监听 并没有实质性监听某个值真的是否发生变化。

原创 【不用学习git指令，也能快速解决git合并提交所带来的问题】待完成

开发时候，我有很多小需求，都是在不同的开发分支上进行开发，最终合并到某个版本的分支上预发环境，验收通过之后需要单独将某个小需求上生产环境。有时候自己会忘记这个需求代码的分支是哪个了。平时都是记录在笔记本上去查看的，但就是忘记了，怎么根据某次改动去查看他的提交信息呢。这个插件可以指出我们提交的信息，想看我们提交的代码和分支我们如下操作。当我们在vscode中鼠标放置某行的时候就可以看到对应的提交信息。首先我们先安装两个常用的git插件。

原创 【在开发小程序的时候如何排查问题】

思路：实现一个react组件，该组件可以配置在最外层，则他的子组件里的所有原生的console方法，都会被重写，重写的console方法会自动收集打印的日志内容，并将内容存储起来，然后在ui中呈现出来。在最近开发小程序的时候，经常出现本地在浏览器中调试没有问题，但是一发布到预发环境就出现各种个样的问题。ps: 最好做一个悬浮的工具按钮，让其悬浮固定在页面某个位置，点击查看日志即可。所以，作为前端的小伙伴我们应该怎样处解决小程序开发中所出现的问题呢？ps: 样式可以自行定义。边界问题，导致js报错。

原创 commonjs、module 模块同时启动

❓：在一个react 项目中怎么既可以执行node 代码又可以启动正常的react 项目 ,不然每次都要切换package.json文件中 “type”: “module”, 或 commonjs。后端目录（例如/server）：存放Node.js服务器代码，使用CommonJS或ES模块，根据需要设置"type"字段。今天在使用node实现完增删改查的接口之后，将自己node代码嵌入到我们react项目中。前端目录（例如/client）：包含React应用，可以正常使用ES模块。

原创 多使用hook处理纯数据

多使用hook处理纯数据 列表。

原创 使用ndoe实现自动化完成增删改查接口

使用手写笔记的方式去记录分支到头来也是眼花缭乱，作为前端工作3年的弟弟想着为啥不能自己直接将这些数据存在数据库里，实现一个增删改查的日常工作记录管理呢？🟢 2.2、我们新建一个连接，连接到我们的数据库，连接成功之后，我们新建一个数据 名字你随便，然后我们新建表，我们在上面的新建查询中执行。🟢 2.3、我们的表就创建完成了，接下来我们就可以使用node连接我们这个数据库去实现一些增删改查的操作了。🟢 1.3、完成数据库的安装，能正常启动我们即可进入正题。数据库的可视化工具免费的哦，

原创 专属特别的评论区

*

原创 使用useContext封装一个小型全局数据存储共享工具hook

在构建React应用时，我们经常需要跨多个组件共享状态。虽然Redux等状态管理库在大型应用中表现出色，但对于小到中等规模的项目来说，它们可能显得过于复杂。在这篇文章中，我将向你展示如何使用React的useState和useContext钩子创建自定义Hook来管理全局状态，同时演示如何有效地执行批量状态更新以防止状态覆盖在我们的APP.tsx中，将我们的hook包裹这个组件

原创 React文本溢出组件封装以及高亮提示

【代码】React文本溢出组件封装以及高亮提示。

原创 vue2.0 怎样监测对象、数组

❓：1. 如何监测对象中的数据？❓：2. 如何监测数组中的数据。

原创 v-model 根据不同的输入类型，设置不同的属性

❓：v-model 根据不同的输入类型，设置不同的属性。

原创 React实现Abbr组件（基础版）

日常开发中我们可能有一些文本长度很长溢出的情况，我们可以通过设置他可以展示多少个字或展示几行来让其溢出之后展示省略号，且鼠标hover之后我们使用antd组件Tooltip进行提示，目前还是基础版本，后续要给其添加heightline 可以高亮关键字，大佬们如果存在问题可以联系我，一起讨论哈。

原创 双击事件怎么解决防止触发单击事件

为啥不能使用 state / 静态变量。state 就存在闭包。