- 博客(49)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 前端抽象化，打破框架枷锁:react现代化项目中的思想体现
这是一套面向react前端的轻量分层规范，目标是把“展示、状态、副作用、业务逻辑、数据访问”清晰拆开：组件更轻、用例更清晰、服务更可复用、测试更可控。它不追求“全能框架”，而是帮助你在日常迭代中，稳步提升可读性与可维护性。并且将业务逻辑与 React 解耦，方便未来迁移到其他框架（如 Vue、Svelte、原生 Web Components）。
2025-09-11 12:08:54
525
原创 更好轮询，降低你的心智负担
前端轮询代码的优化方案。常见的递归轮询实现存在代码嵌套深、可读性差等问题。用异步迭代器封装轮询逻辑，通过for await...of语法简化调用方代码。这种方案将轮询转为声明式，提高了可读性和可扩展性，同时避免了递归调用带来的内存问题。示例展示了如何创建字符串轮询器，并对比了两种实现方式的优劣。该方案特别适合需要监控状态或处理分片数据的场景，使代码更易于维护和扩展。
2025-08-22 02:29:05
452
原创 前端单元测试最佳实践(一)
摘要： 本文探讨如何结合领域驱动设计（DDD）与测试驱动开发（TDD）提升前端单元测试的有效性。传统前端测试常因UI与逻辑耦合而价值有限，通过DDD将业务规则封装为独立领域模型（如Task类），再通过用例（如CreateTaskUseCase）定义操作，结合TDD“红-绿-重构”循环（先写失败测试，再实现最小代码），确保代码精准对应需求。最后用React Hook桥接业务与UI（如useCreateTask），使组件仅关注展示，逻辑由可测试的用例驱动。该方法解耦了业务与界面，使测试聚焦核心逻辑，提升代码健壮
2025-08-08 20:09:15
1052
原创 AIAgent核心组件思路
那么构建一个能够处理复杂任务、实现无缝交互并具备强大性能的 AI Agent 需要深思熟虑的架构设计。我将我自己的想法和接触到的相关的内容，整理了一些核心模块，将在本文介绍一个模块化的 AI Agent 设计思路，我们的架构包括以下模块：**模型接入层**、**提示工程层**、**记忆管理**、**工具调用**、**多任务执行**以及**监控与错误处理**。
2025-07-24 08:39:33
1067
原创 使用 Web Worker 优化 Three.js 渲染的正确指南
通过合理利用 Web Worker 和所有权转移机制，可以显著提升 Three.js 在大数据量场景下的渲染性能。但在实际应用中，仍需结合项目特点，综合考虑数据结构、通信延迟和 Worker 管理等因素，才能实现最优的性能提升效果。
2025-07-07 15:33:35
875
原创 前端抽象化，打破框架枷锁：Hook 函数的现代接口范式
TypeScript 4.9 引入的 `satisfies` 操作符，结合索引签名 `[key: string]: any`，提供了一种现代化、优雅的解决方案。本文通过一个简洁的登录场景示例，展示如何使用这一范式实现灵活的 Hook 函数接口，打破框架限制，提升前端架构的抽象能力。
2025-07-02 15:21:30
927
原创 中文Windows系统下程序输出重定向乱码问题解决方案
最近我在用 Rust 开发时，遇到了一个让人头疼的问题：运行 `cargo run -- version Cargo.toml > output.txt` 将输出重定向到文件后，打开 `output.txt` 却发现里面全是乱码！我的程序确实是UTF8但是输出的文件却是UTF16LE编码的。特别是在中文 Windows 系统上，这个问题尤为明显。
2025-06-20 11:00:06
407
2
原创 构建一个 MCP 服务：统一管理公司代码规范、文档、组件库和配置
在这篇博客中，我将分享我最近开发的 **MCP（Model Control Protocol）服务**，最初为我的个人博客（`inksnowhl.cn`）设计，用于便捷获取博客内容和代码片段。随着开发的深入，我发现这个服务不仅能满足个人需求，还能扩展到企业团队中，用于统一管理文档、公共组件、代码规范和配置。以下是我的开发初衷、核心思路和实现流程，希望能为你提供灵感，照猫画虎打造自己的 MCP 服务。
2025-06-18 16:04:21
1103
原创 Packagerun：VSCode 扩展 快捷执行命令
**Packagerun** 是一个为 前端和node开发者设计的 VSCode 扩展，旨在简化 `package.json` 中脚本的执行，并支持自定义命令以提升开发效率。
2025-06-12 15:22:34
1278
原创 前端抽象化，打破框架枷锁:面向对象思想一定要class吗？
本文探讨现代前端开发中如何结合函数式编程与工程设计思维，通过TypeScript接口抽象和React Hook实现模块化架构。文章首先指出当前前端开发过度依赖框架特性导致的设计缺失问题，提出用接口定义三个核心模块（持久化、设置管理、排序收藏）的抽象结构。随后展示如何用Hook实现这些模块，将面向对象的设计思想从类继承中解放出来。这种设计使代码摆脱对特定框架特性的依赖，保持架构灵活性，能适应API变更或范式转换，确保系统的可维护性和迭代升级能力。
2025-06-04 18:30:38
751
原创 速率限制器设计思路
在网络系统中，**速率限制器（Rate Limiter）**用于控制客户端或服务端的请求速率，防止资源滥用、降低系统负载并提高稳定性。
2025-05-21 10:32:26
955
原创 纯前端实现基于位置的天气和动态背景图片
根据用户所在位置显示当地天气、日出日落时间，并加载一张与天气和时间段匹配的高质量背景图片，可以显著提升用户体验。
2025-05-15 16:48:40
1155
原创 前端性能优化3:深入分析 Web Worker 和 Service Worker
本文不打算介绍 Web Worker 和 Service Worker 的用法，而是深入探讨它们的底层机制，包括执行时机、性能影响、可传递数据类型以及两者的区别，特别说明耗时任务阈值的选择理由
2025-05-13 16:37:07
865
原创 前端性能优化2:结合HTTPS与最佳实践，全面优化你的网站性能
关于在请求文件上的性能优化优化网站性能是一项系统性、持续性的工作，它绝非一蹴而就，更像是一门需要不断打磨的技艺。通过**拥抱并充分利用 HTTPS 及其带来的 HTTP/2、TLS 1.3 等现代协议优势**，**像雕刻艺术品一样严格控制页面文件大小（力争首屏 < 500KB）**，**以百米冲刺的速度压缩页面加载时间（力争 LCP < 1.5s）**，**深入服务器内部优化 TTFB（力争 < 200ms）**，以及**精简到极致的 HTTP 请求管理**，你就能为用户打造出真正流畅、安全、值得信赖的
2025-04-29 16:25:48
1314
原创 前端现代化性能优化1：iframe、CSS 与图片的深度解析
在这个系列中，我将分享前沿的性能优化技巧,记录一些学到的性能优化技巧，并记录一些性能优化工具，以及性能优化工具的原理，并记录一些性能优化工具的实践。且涉及内容会更现代，更适合开箱即用的感觉的东西。
2025-04-27 16:53:11
865
原创 PowerToys：让你的windows拥有更丝滑的体验
Microsoft PowerToys 是一套免费、开源的实用工具集，轻量，旨在增强 Windows 的生产力和个性化体验。最初为 Windows 95 开发，PowerToys 在 Windows 10 和 11 上以现代化工具集的形式重生。无论你是开发者、设计师，还是希望优化工作流程的普通用户，PowerToys 都能提供一系列工具，让你的 Windows 环境更高效、更符合个人需求。本文将详细介绍 PowerToys 是什么、其核心功能以及如何使用它来提升生产力。
2025-04-24 18:29:04
1380
原创 前端抽象化，打破框架枷锁:web的多端通讯抽象
本文介绍了一种面向多端通讯场景的模块化设计方案，该方案通过抽象化接口和统一数据结构，实现了不同通讯方式（如iframe、WebSocket、WebView等）的标准化处理。核心设计包含桥对象（Bridge）、桥监听器（BridgeListener）、桥数据对象（BridgeDTO）和桥工厂（BridgeFactory）四个主要组件，其中桥对象定义了通讯的基本接口，桥监听器统一了事件监听机制，桥数据对象规范了消息格式，而桥工厂则负责管理桥接实例的创建、缓存和销毁。相比适配器模式，该方案采用工厂模式的优势在于能
2025-04-24 10:12:37
1303
原创 前端性能优化：所有权转移
所有权转移通过的transfer参数，将对象所有权移交到目标上下文，原始上下文无法再访问该对象。性能：避免复制大型数据。独占性：确保单一上下文控制资源。内存：释放原始上下文内存。高兼容性：窗口间、Web Worker、WebView iframe、Canvas 位图数据处理，（Safari 15+ 需注意）。兼容性有限：Service Worker、WebRTC、离屏渲染，, 流对象，仅最新浏览器支持。建议：优先使用高兼容性场景，检测功能支持，提供降级方案，确保跨平台稳定性。
2025-04-21 18:07:13
919
原创 使用 inobounce 解决 iOS 皮筋效果导致的无法下拉刷新
iOS 设备的 Safari 浏览器（包括混合APP开发的webview情况）在页面滚动到顶部或底部时，会允许页面继续上下滑动一段距离，并伴随弹性回弹。下拉刷新功能被皮筋效果覆盖，用户无法触发刷新。页面整体滑动导致布局错位或内容被截断。内部滚动区域（如表格或列表）无法正常滑动。通过使用inobounce，我们可以轻松禁用 iOS 的皮筋效果，从而解决下拉刷新功能被干扰的问题。无论是通过 npm 安装还是 CDN 引入，inobounce都提供了简单易用的 API，适合各种 H5 项目。
2025-04-21 16:03:22
970
原创 ✨ 照片美学评分系统：对您的照片进行视觉、构图、质量三个维度进行评分
**照片评分模型**，利用深度学习技术，能够自动对照片进行评分，输出视觉吸引力（Visual Appeal）、构图（Composition）和质量（Quality）三个维度的分数（1-100 分）。
2025-04-15 21:53:02
1769
原创 Windows通过WSL2释放AI训练的无限潜能：打造高效Linux开发环境
WSL2为Windows用户提供了一个高效、轻量级的Linux环境，非常适合AI学习和训练。通过与VSCode和Jupyter的集成，开发者可以在Windows系统中享受Linux生态的完整开发体验，同时利用GPU加速进行模型训练。无论是初学者还是专业开发者，WSL2都是一个值得尝试的工具。开始使用WSL2，开启你的AI开发之旅吧！
2025-04-15 10:51:20
1006
原创 TypeScript：从类型工具到前端系统设计的跃迁
你是否曾觉得 TypeScript 只是给 JavaScript 加了个类型“紧身衣”？本文不聊基础的 JS vs TS 对决，而是带你走进一个更高层次的视角——如何用 TS 从“码农式写代码”转型为“工程师式设计系统”。通过两个简单例子，我将展示 TS 不仅是工具，更是思维方式的革命。
2025-04-08 15:54:37
1080
原创 前端抽象化，打破框架枷锁:Http请求也许该一样
发送请求的库，和方法，有几种常用的，axios、fetch、uni.request等通常我们会在一个文件中，写入大量长得几乎一模一样的函数，只是参数稍微改变，来储存大量请求函数但是一旦使用的库变化了，这些或多或少，会有微调，如今我们将其抽象出来，让我们的使用变统一，让其实现解耦合，达到更高的复用性和可维护性。
2025-03-31 11:25:29
506
原创 前端抽象化，打破框架枷锁:统一路由的设计
对于前端路由的高级抽象设计，最核心的理念是**抽象**与**解耦**。我希望路由导航的逻辑能够独立于具体的框架存在，这样一套代码就能适配各种环境，既减少重复开发，又方便未来的扩展。同时使用中间件，让路由导航的逻辑更加模块化，可插拔，可控。
2025-03-25 15:50:57
1038
原创 前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理
前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理。
2024-06-20 10:14:37
514
原创 仅展示类型页面的高效编写代码的思维模式与方法
本文档旨在记录前端开发过程中的一种特殊情况：在没有后端接口的情况下，前端可以自由定义字段进行业务开发。当后端接口完成后，使用适配器将后端数据结构和字段适配修改为前端需要的结构和字段，而不改变前端页面任何代码的情况下进行接口对接。
2024-06-20 10:09:50
363
原创 scopeinject vue3-vite-ts 插件
用于修复vue3引用外部 ts文件中的数据的一些问题，当然也可以用作其他自动化用途用于将指定文件夹下第一层的.ts结尾内容，直接注入指定位置。
2023-05-31 18:20:03
233
原创 关于创建vue3项目 vscode的vetur插件依然报错需要template有根标签解决方法
最简单方便的解决vscode的vetur报错The template root requires exactly one element. eslint-plugin-vue
2022-04-27 09:52:45
2137
原创 vue 库模式打包 批量
vue库模式 WebComponents 的批量打包方法 使用Nodejs进行批量打包使用nodejs执行cmd中的命令的方法
2022-03-01 14:45:00
721
原创 functionPlot.js 拿到y轴函数某个点的位置 以及各种接口
functionPlot.js 获取 y轴坐标 曲线某个点的位置 各种隐藏的api
2022-02-26 11:08:34
525
原创 nuxt asyncData请求数据失败的问题 如何解决
失败原因折磨，折磨，asyncData请求数据，流程很离谱首先，asyncData只在页面级别的组件中才会执行其次，也是重点如果你看见这个了，那么，你就遇到问题了我通过process.client以及process.server发现第一次进入页面，asyncData里的请求，是在客户端请求。第二次进入页面，asyncData里的请求，是算服务端的。而服务端的请求，不会走代理，于是会自动在本地的127.0.0.1:80去请求数据遇到的问题然后，因为这两个奇怪的流程，就出现了：第一次不
2021-10-20 16:13:02
3628
2
原创 关于vue和nuxt的env配置。
VUEenv配置是为了前端能够根据不同的环境，在一些功能上有不同表现。如请求数据的接口。为了不用频繁修改这些配置，可以配置env来让程序中有一个很方便的判断环境的属性，或者是可以直接使用当前环境的特定配置的属性。首先在根目录放三个固定文件这三个文件，命名固定，不能乱改。.env：基础配置项，无论在哪个环境运行，都会加载里面的内容.env.development:开发环境会加载，而且相同的配置项会覆盖掉.env中的.env.production:生产环境会加载，而且相同的配置项会覆盖掉.env中
2021-10-07 12:19:18
3782
6
vscode dart开发没有代码提升和报错波浪线，为什么？
2021-07-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人