- 博客(41)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Packagerun：VSCode 扩展 快捷执行命令
**Packagerun** 是一个为 前端和node开发者设计的 VSCode 扩展，旨在简化 `package.json` 中脚本的执行，并支持自定义命令以提升开发效率。
2025-06-12 15:22:34
341
原创 前端抽象化，打破框架枷锁:面向对象思想一定要class吗？
本文探讨现代前端开发中如何结合函数式编程与工程设计思维，通过TypeScript接口抽象和React Hook实现模块化架构。文章首先指出当前前端开发过度依赖框架特性导致的设计缺失问题，提出用接口定义三个核心模块（持久化、设置管理、排序收藏）的抽象结构。随后展示如何用Hook实现这些模块，将面向对象的设计思想从类继承中解放出来。这种设计使代码摆脱对特定框架特性的依赖，保持架构灵活性，能适应API变更或范式转换，确保系统的可维护性和迭代升级能力。
2025-06-04 18:30:38
705
原创 速率限制器设计思路
在网络系统中，**速率限制器（Rate Limiter）**用于控制客户端或服务端的请求速率，防止资源滥用、降低系统负载并提高稳定性。
2025-05-21 10:32:26
912
原创 纯前端实现基于位置的天气和动态背景图片
根据用户所在位置显示当地天气、日出日落时间，并加载一张与天气和时间段匹配的高质量背景图片，可以显著提升用户体验。
2025-05-15 16:48:40
1017
原创 前端性能优化3:深入分析 Web Worker 和 Service Worker
本文不打算介绍 Web Worker 和 Service Worker 的用法，而是深入探讨它们的底层机制，包括执行时机、性能影响、可传递数据类型以及两者的区别，特别说明耗时任务阈值的选择理由
2025-05-13 16:37:07
763
原创 前端性能优化2:结合HTTPS与最佳实践，全面优化你的网站性能
关于在请求文件上的性能优化优化网站性能是一项系统性、持续性的工作，它绝非一蹴而就，更像是一门需要不断打磨的技艺。通过**拥抱并充分利用 HTTPS 及其带来的 HTTP/2、TLS 1.3 等现代协议优势**，**像雕刻艺术品一样严格控制页面文件大小（力争首屏 < 500KB）**，**以百米冲刺的速度压缩页面加载时间（力争 LCP < 1.5s）**，**深入服务器内部优化 TTFB（力争 < 200ms）**，以及**精简到极致的 HTTP 请求管理**，你就能为用户打造出真正流畅、安全、值得信赖的
2025-04-29 16:25:48
1227
原创 前端现代化性能优化1：iframe、CSS 与图片的深度解析
在这个系列中，我将分享前沿的性能优化技巧,记录一些学到的性能优化技巧，并记录一些性能优化工具，以及性能优化工具的原理，并记录一些性能优化工具的实践。且涉及内容会更现代，更适合开箱即用的感觉的东西。
2025-04-27 16:53:11
790
原创 PowerToys：让你的windows拥有更丝滑的体验
Microsoft PowerToys 是一套免费、开源的实用工具集，轻量，旨在增强 Windows 的生产力和个性化体验。最初为 Windows 95 开发，PowerToys 在 Windows 10 和 11 上以现代化工具集的形式重生。无论你是开发者、设计师，还是希望优化工作流程的普通用户，PowerToys 都能提供一系列工具，让你的 Windows 环境更高效、更符合个人需求。本文将详细介绍 PowerToys 是什么、其核心功能以及如何使用它来提升生产力。
2025-04-24 18:29:04
830
原创 前端抽象化，打破框架枷锁:web的多端通讯抽象
本文介绍了一种面向多端通讯场景的模块化设计方案，该方案通过抽象化接口和统一数据结构，实现了不同通讯方式（如iframe、WebSocket、WebView等）的标准化处理。核心设计包含桥对象（Bridge）、桥监听器（BridgeListener）、桥数据对象（BridgeDTO）和桥工厂（BridgeFactory）四个主要组件，其中桥对象定义了通讯的基本接口，桥监听器统一了事件监听机制，桥数据对象规范了消息格式，而桥工厂则负责管理桥接实例的创建、缓存和销毁。相比适配器模式，该方案采用工厂模式的优势在于能
2025-04-24 10:12:37
1276
原创 前端性能优化：所有权转移
所有权转移通过的transfer参数，将对象所有权移交到目标上下文，原始上下文无法再访问该对象。性能：避免复制大型数据。独占性：确保单一上下文控制资源。内存：释放原始上下文内存。高兼容性：窗口间、Web Worker、WebView iframe、Canvas 位图数据处理，（Safari 15+ 需注意）。兼容性有限：Service Worker、WebRTC、离屏渲染，, 流对象，仅最新浏览器支持。建议：优先使用高兼容性场景，检测功能支持，提供降级方案，确保跨平台稳定性。
2025-04-21 18:07:13
858
原创 使用 inobounce 解决 iOS 皮筋效果导致的无法下拉刷新
iOS 设备的 Safari 浏览器（包括混合APP开发的webview情况）在页面滚动到顶部或底部时，会允许页面继续上下滑动一段距离，并伴随弹性回弹。下拉刷新功能被皮筋效果覆盖，用户无法触发刷新。页面整体滑动导致布局错位或内容被截断。内部滚动区域（如表格或列表）无法正常滑动。通过使用inobounce，我们可以轻松禁用 iOS 的皮筋效果，从而解决下拉刷新功能被干扰的问题。无论是通过 npm 安装还是 CDN 引入，inobounce都提供了简单易用的 API，适合各种 H5 项目。
2025-04-21 16:03:22
871
原创 ✨ 照片美学评分系统：对您的照片进行视觉、构图、质量三个维度进行评分
**照片评分模型**，利用深度学习技术，能够自动对照片进行评分，输出视觉吸引力（Visual Appeal）、构图（Composition）和质量（Quality）三个维度的分数（1-100 分）。
2025-04-15 21:53:02
1098
原创 Windows通过WSL2释放AI训练的无限潜能：打造高效Linux开发环境
WSL2为Windows用户提供了一个高效、轻量级的Linux环境，非常适合AI学习和训练。通过与VSCode和Jupyter的集成，开发者可以在Windows系统中享受Linux生态的完整开发体验，同时利用GPU加速进行模型训练。无论是初学者还是专业开发者，WSL2都是一个值得尝试的工具。开始使用WSL2，开启你的AI开发之旅吧！
2025-04-15 10:51:20
829
原创 TypeScript：从类型工具到前端系统设计的跃迁
你是否曾觉得 TypeScript 只是给 JavaScript 加了个类型“紧身衣”？本文不聊基础的 JS vs TS 对决，而是带你走进一个更高层次的视角——如何用 TS 从“码农式写代码”转型为“工程师式设计系统”。通过两个简单例子，我将展示 TS 不仅是工具，更是思维方式的革命。
2025-04-08 15:54:37
1045
原创 前端抽象化，打破框架枷锁:Http请求也许该一样
发送请求的库，和方法，有几种常用的，axios、fetch、uni.request等通常我们会在一个文件中，写入大量长得几乎一模一样的函数，只是参数稍微改变，来储存大量请求函数但是一旦使用的库变化了，这些或多或少，会有微调，如今我们将其抽象出来，让我们的使用变统一，让其实现解耦合，达到更高的复用性和可维护性。
2025-03-31 11:25:29
492
原创 前端抽象化，打破框架枷锁:统一路由的设计
对于前端路由的高级抽象设计，最核心的理念是**抽象**与**解耦**。我希望路由导航的逻辑能够独立于具体的框架存在，这样一套代码就能适配各种环境，既减少重复开发，又方便未来的扩展。同时使用中间件，让路由导航的逻辑更加模块化，可插拔，可控。
2025-03-25 15:50:57
1014
原创 前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理
前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理。
2024-06-20 10:14:37
498
原创 仅展示类型页面的高效编写代码的思维模式与方法
本文档旨在记录前端开发过程中的一种特殊情况：在没有后端接口的情况下，前端可以自由定义字段进行业务开发。当后端接口完成后，使用适配器将后端数据结构和字段适配修改为前端需要的结构和字段，而不改变前端页面任何代码的情况下进行接口对接。
2024-06-20 10:09:50
345
原创 scopeinject vue3-vite-ts 插件
用于修复vue3引用外部 ts文件中的数据的一些问题，当然也可以用作其他自动化用途用于将指定文件夹下第一层的.ts结尾内容，直接注入指定位置。
2023-05-31 18:20:03
214
原创 关于创建vue3项目 vscode的vetur插件依然报错需要template有根标签解决方法
最简单方便的解决vscode的vetur报错The template root requires exactly one element. eslint-plugin-vue
2022-04-27 09:52:45
2120
原创 vue 库模式打包 批量
vue库模式 WebComponents 的批量打包方法 使用Nodejs进行批量打包使用nodejs执行cmd中的命令的方法
2022-03-01 14:45:00
707
原创 functionPlot.js 拿到y轴函数某个点的位置 以及各种接口
functionPlot.js 获取 y轴坐标 曲线某个点的位置 各种隐藏的api
2022-02-26 11:08:34
503
原创 nuxt asyncData请求数据失败的问题 如何解决
失败原因折磨，折磨，asyncData请求数据，流程很离谱首先，asyncData只在页面级别的组件中才会执行其次，也是重点如果你看见这个了，那么，你就遇到问题了我通过process.client以及process.server发现第一次进入页面，asyncData里的请求，是在客户端请求。第二次进入页面，asyncData里的请求，是算服务端的。而服务端的请求，不会走代理，于是会自动在本地的127.0.0.1:80去请求数据遇到的问题然后，因为这两个奇怪的流程，就出现了：第一次不
2021-10-20 16:13:02
3573
2
原创 关于vue和nuxt的env配置。
VUEenv配置是为了前端能够根据不同的环境，在一些功能上有不同表现。如请求数据的接口。为了不用频繁修改这些配置，可以配置env来让程序中有一个很方便的判断环境的属性，或者是可以直接使用当前环境的特定配置的属性。首先在根目录放三个固定文件这三个文件，命名固定，不能乱改。.env：基础配置项，无论在哪个环境运行，都会加载里面的内容.env.development:开发环境会加载，而且相同的配置项会覆盖掉.env中的.env.production:生产环境会加载，而且相同的配置项会覆盖掉.env中
2021-10-07 12:19:18
3742
6
原创 axios delete请求 携带request payload
最近遇到个需要在delete请求中，既要在路径中传参数，又要携带request payload参数的问题然后百思不得其解，不知道咋才能给delete带上request payload最后找了半天才知道，需要传递的数据，需要用对象保存，键名是data// 删除路径下的课程export function delWayClass(params) { return del(`/admin/course/path/deleteCourse?pathId=${params.pathId}`, { data
2021-09-28 14:49:24
971
原创 vue+element写后台管理系统时，表格和分页功能的一个注意事项（容易忽略的重要细节）
用vue+element 写后台管理系统，是很常见的项目。其中，element的table表格和分页功能，常常会配合使用。这里，有一个关于删除的重要细节如图示，在表格只有最后一条数据时候，删除的请求，如果只是把id上传去删除，然后做请求成功和失败的处理，就会出现删除后，重新获取所有列表的页码仍然是第二页。但实际上删除了这条数据，应该只剩下一页的数据数据了。导致页面出现暂无数据。如图中，删除后，重新请求所有数据的请求，页码是2，但实际上，页面只剩下1页了，所以请求不到数据。于是，我们应该在删除后，
2021-09-27 11:13:49
321
原创 跨域，为解决跨域的代理原理是什么？vue2中如何配置跨域
在js使用ajax请求后台接口的数据时，新人会遇到跨域问题，也许你已经通过百度，知道了怎么通过代理解决跨域问题，那么，原理是什么？当遇到跨域情况时，控制台会有以下类似的报错*Access to XMLHttpRequest at ‘xxxxxxxxxxxxxxxxx’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No‘Access-Control-Allow-Origin’ header is presen
2021-09-25 22:56:32
358
原创 nest 服务与cookie 2021/7/16
服务Nestjs 中的服务可以是 service 也可以 provider 他们都可以通过 constructor 注入依赖关系 服务本质上就是通过@Injectable() 装饰器注解的累 在 Nestjs 中服务相当于 MVC 的 Model在服务中，可以封装公共的功能或进行数据库操作nest g provider 或 service 都可以创建服务在服务中 可以去定义一个个方法 然后在控制器中去使用像这样，先引入 并进行以来注入import { ListService } from './
2021-07-16 14:28:30
304
原创 nest 模板引擎 重定向 2021/7/15
“在这种共同到来中，我们带着深刻的确信（一起）懂得了，我们使之产生的任何一件事，既不是因你而来，也不是为我而存在，而是因为我们。”进入正题 nest的模板引擎，引擎选择有很多种类这里使用ejscnpm i ejs --save 这里使用ejs 首先在main.ts中配置 第一步 // 配置模板引擎目录 app.setBaseViewsDir('views'); 第二步 // 配置使用的模板引擎 cnpm i ejs -
2021-07-15 09:57:19
447
原创 JavaScript的this是什么，用来干啥？
JavaScript的this是什么，用来干啥？在函数执行的时候，函数内部会在底层上自动创建两个变量 arguments和this标准一些的讲 this指向函数的上下文通俗来说 ：一般情况下一个函数 ，是谁调用的，this就指向谁对于构造函数来说，this会指向由这个构造函数创建的实例call方法、apply方法，可以改变一个函数的this指向到你指定的对象...
2021-03-06 23:53:44
285
2
原创 那些编程中，遇到的十分奇怪的事情(1)
JavaScript比较符 与那些特殊的 “数值”js的比较符号让我发觉了一些奇怪的问题比如NaNif(NaN>=0){ console.log('NaN>=0')}else if(NaN<0){ console.log('NaN<0')}//以上的都不会执行，全都是false //但是逻辑上，一个值不大于等于另一个值，那就一定是小于，//可这东西却全都是false知道更奇怪的是什么不？console.log(NaN)//这东西，居然返回的是number
2020-09-23 10:53:18
131
原创 php的单双引号是有区别的！！
php的单引号与双引号，居然是不一样的我是个php初学者，突然发现，php的单双引号并不一样。$v1="csdn"; //给变量赋值字符串时候，似乎是没什么区别的//双引号echo "$v1"; // 这个会输出csdn//单引号echo '$v1'; // 这个会直接输出$v1//如果想在单引号中使用变量echo '{$v1}';//也不是很麻烦似乎双引号才会被进行解析，而单引号则不会。这样一来，单引号的效率高于双引号是必然的；这是个小细节，在很多时候，可以去区分字符串引号的使
2020-09-21 08:13:15
165
vscode dart开发没有代码提升和报错波浪线，为什么？
2021-07-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人