- 博客(45)
- 收藏
- 关注
RSS订阅原创 res.body 单次响应流式 和 SSE 长连接持续推送的区别
普通 HTTP +res.body：一问一答，单响应内分块流式下载，传完即结束；适合流式下载、单次大模型回答这类“一次性返回一整条流式内容”的场景；SSE：一次请求建立长连接，服务端可随时推送多条独立事件；适合服务端不定时持续下发消息的场景。
2026-11-06 18:06:02
186
原创 ReadableStream 详解：从概念到实战
在它之前，JavaScript 处理网络资源（如视频、文本）往往需要等整个文件下载完、反序列化后，才能开始操作。你可以把它理解为一个“数据水管”：数据不再需要等全部下载完才能处理，而是像水流一样，一块一块地到达，你可以在第一块数据可用时就开始处理。就是一个流式数据通道，联通客户端与数据源，可以使用一定的手柄获取通道传递过来的数据。：由于数据源发送数据的速度和接受数据的速度可能不匹配，就需要一个缓冲区暂存数据，防止。方法，可以获取一个数据包，返回 promise 对象，resolve 出。
2026-11-06 17:32:32
337
原创 简单小练习：手写简易co，实现generator类似async的效果
该文介绍了通过递归与Promise结合实现Generator函数的异步流程控制。针对yield可能返回Promise或普通值的情况，使用Promise.resolve()统一处理，确保异步执行后调用next()。通过co函数递归调用next，在每次done为false时等待Promise解析并继续，最终返回结果。避免了同步循环无法处理异步的问题，实现了Generator的自动异步执行。
2026-11-06 10:36:49
198
原创 ECMAScript学习：异步遍历器、for await of遍历
同步迭代器next()返回即时结果，无法处理异步数据；虽可将value设为Promise，但存在并发发起、无法串行等待等缺陷。ES2018引入Symbol.asyncIterator规范异步迭代器，其next()返回Promise<{value, done}>，支持for await...of实现串行异步遍历，代码更清晰。异步生成器async function*是创建异步可迭代对象的便捷方式。注意：for await...of必须在async函数中使用，且与Promise.all并行调用有本质区
2026-11-05 15:17:57
98
原创 ES6：Iterator与Generator函数学习及Generator函数和async实现异步编程理解
几个概念：可迭代对象是指具有迭代器接口的对象：实现类数组使用 for of 循环对象无法使用数组的迭代器。 generator 函数类似遍历器函数，返回一个迭代器对象； 该对象调用 方法时，会把 后面的表达式作为值 ，并执行当前指针与下一步指针之间的程序。generator 实现迭代器函数 后面跟的内容为 得到的 值。流程：循环 会调用 generator 函数，返回一个 iterator 对象， 方法由 generator 内部的 决定。Gene
2026-11-04 22:49:40
211
原创 IntersectionObserver交叉观察器——性能优化
IntersectionObserver是浏览器原生API，用于异步监听元素与根容器（默认视口）的交叉状态，实现性能优化。它通过回调获取交叉比例、是否进入可视区等信息，支持懒加载、无限滚动、曝光埋点、动画触发等场景。相比scroll+getBoundingClientRect，避免高频触发，提升性能。可批量监听多个元素，支持threshold数组和rootMargin设置，但不支持跨元素交叉监听，且需元素在文档流中。现代浏览器广泛兼容，是高效观察可视性的首选方案。
2026-10-23 17:45:06
147
原创 requestAnimationFrame——js实现动画基础
在没有requestAnimationFrame的时候，通过js实现动画效果一般使用的是定时器，特别是循环定时器 Interval ，但因为定时器是异步任务，其会参与浏览器任务队列，这就可能会造成本因在16ms执行的任务，因为一些其它异步任务的执行而推迟、被插队等不能准确执行，使动画有撕裂感、不流畅。requestAnimationFrame就是为解决这个问题而诞生的。
2026-05-28 18:23:54
389
原创 Canvas学习一
是 HTML5 提供的，它本身只是一个空白的矩形容器，，需要通过动态绘制图形、图像、动画、视频等所有视觉内容。在学习 gsap 的时候看到了关于canvas的内容，但我之前仅作过初略的了解，并没有深入，想要深入了解一下，故本周开始学习canvas。本篇博客内容并不全面，后续学习之后会逐渐更新。
2026-05-09 20:35:39
560
原创 MVC、MVP、MVVM概念、区别与各自特点
MVC 模型即 Model View Controller(模型 视图 控制器)存储业务数据、验证、业务逻辑(不包含回调函数)，数据展示层，负责数据展示与交互，不能直接操作数据。负责接收 View 用户的操作，然后更改数据，同时更改 Model 层数据，是 M 和 V 的中间层。MVP 模型即 Model View Presenter（模型 视图 主持人）。同 MVC 一样，都是数据存放地，但不和 View 直接耦合，下面会讲。同 MVC 一样，都是数据展示地，也不和 Model 直接耦合。
2026-04-18 21:36:45
454
原创 浏览器的缓存机制
浏览器的缓存机制是指将服务器返回的部分资源（HTML/CSS/图片等）存储在本地，以便在后续请求的时候直接从本地获取对应资源，从而减少网络请求，提升页面加载速度，减轻服务器压力。强缓存和协商缓存。通过合理配置缓存策略，可以让网站在性能和资源新鲜度之间取得平衡，提升用户体验。当在地址栏回车或页面跳转（包含自然跳转、a 标签跳转和 js 跳转等）时，会正常遵循缓存策略；当普通刷新（ F5 ）⽹⻚时，只会跳过强缓存，但是会检查协商缓存；
2026-03-30 21:02:05
356
原创 一篇简单的STOMP教程QAQ
STOMP就是一套简单通用的消息收发协议，核心就是连接→订阅→发送→断开，专门解决实时消息推送、聊天室这类场景。不用纠结底层原理，记住4个命令，照着示例改改地址和参数，就能快速实现功能。核心内容：建连接、订频道、发消息，实时通信。
2026-03-23 13:37:21
492
1
原创 ECharts 学习
${item.seriesName}：${item.value}万件（同比${item.value > 50?'增长' : '下降'}${Math.abs(item.value - 50)}%）
2025-12-22 17:14:09
863
原创 一些css属性学习
在学习这个属性之前我们先了解一下父元素和子元素基线的概念：子元素的基线是指子元素内文本的底部边缘，特别是字母的底部边缘。在包含文本的元素中，每个字母都有一个基线，这个基线决定了文本的垂直对齐方式。例如，字母 “x” 的基线就是 “x” 字母底部的那条线。如下图：对于y、p、q这类占有下位格的，基线定义时并不考虑底下突出部位。父元素的基线是指父元素内所有子元素的基线中的最低点。在一个容器中，如果包含多个子元素（例如文字行或内联元素），它们的基线会在父元素内形成一个基线。
2025-12-15 11:47:00
760
原创 vue3元素拖拽换位的实现——sortablejs
SortableJS是一款轻量级、无依赖的拖拽排序库，支持所有现代浏览器（包括 IE11），核心功能是实现容器内元素的拖拽排序、互换位置，还支持拖拽手柄、占位符、动画效果等实用配置，且对 Vue/React/Angular 等框架友好，目前使用暂没有任何问题。本周还是比较忙的，一是要写项目，二是要看大一的考核页面，同时学业方面要学的东西还是蛮多的，感觉小脑瓜有点转不过来了，周末特意买了两盒咖啡，希望在新的一周里能起到作用。
2025-12-01 11:41:02
1535
原创 富文本编辑器——TinyMCE的基本使用
TinyMCE 是一款开源、可高度定制的富文本编辑器，广泛用于 Web 应用中（如 CMS 系统、博客平台、论坛、表单编辑器等），支持用户通过可视化界面编辑文本、插入图片、表格、链接、媒体等内容，最终输出标准化的 HTML 代码。它于2004年诞生，时隔20余年的更新迭代，已经具有富文本编辑器的绝大多数功能，功能完善，兼容性好，是一个非常值得信赖的富文本编辑器，本文将简单介绍一下如何在Vue3项目里面使用。下面是我写项目时改好样式的一个暗色调TinyMCE，具备基本的功能。
2025-11-24 11:22:29
2188
原创 快速入门：TailwindCSS基础用法详解
1、算上上周末，较为系统的学习了tailwind，使用起来效果还行，不用写css文件太舒服了(*^_^*)2、全面的学习了一下SSE，拓展知识面3、学习了大模型和智能体的使用，挺有意思的4、复习了一下Echarts的使用，还是不太会，下次抽时间系统的学习一下5、学习了vue3项目的搭建和一些方便编程的工具包，如自动路由。
2025-11-17 11:39:57
1245
原创 Vue3组件间通信——pinia
pinia是一项vue官方推荐的组件间通信方式，适用于任意组件之间，实现数据的共享。基本功能类似于vuex，但相较于vuex，pinia适用不会产生偏离vue的感觉，存储更为直观。在vue3里面pinia就是vuex的继任者。首先是把vue3和vue2搞明白了，学了很多vue3里面的新API的使用，特别是把setup函数和setup语法糖里面的API差异学习了一下。其次学习了Element-plus的使用，做了一点小案例，还挺好用的，就是语法有点多，做项目的时候按需使用吧。
2025-11-02 11:16:26
1194
3
原创 Vue组件间通信——Vuex
本周进行了vuex和vue路由的学习，总算把vue2学完了，然后就是ts学了一半左右，下周直接把vue3一口气学完(因该大概能吧)，或者把ts学完，然后vue3先不急。同时尽量复习以下前面学到的基本部分，有些地方有点忘了，特别是作用域插槽，感觉忘的差不多了/(ㄒoㄒ)/~~
2025-10-20 11:05:08
820
原创 Vue2组件间通信
学习了vue2里面的组件部分和样式部分，理解了组件化编程的意思，同时也简单了解了模块化编程和组件化编程的搭配使用，解决了很多理解误区。下一周争取学到路由，及时复习前面学的vue2知识点，同时看情况开启ts的学习。
2025-10-13 11:03:13
844
1
原创 SSE协议
SSE（Server-Sent Events，服务器发送事件）是一种基于 HTTP 协议的服务器向客户端单向推送实时数据的技术，它允许服务器主动向已建立连接的客户端持续发送数据流，无需客户端频繁发起请求，非常适合需要 “服务器主动推送、客户端被动接收” 的实时场景（如实时通知、股票行情更新、日志实时展示、Ai数据推送等）。SSE 本质是对 HTTP 协议的 “轻量级扩展”，而非独立协议与websocket的区别优势：其是基于http协议的，没有像ws协议那样复杂的升级步骤客户端（如浏览器的。
2025-09-29 11:13:33
1868
原创 nodejs中Express框架的基本使用
Express 是基于 Node.js 平台的极简、灵活的 Web 应用开发框架，它为 Node.js 提供了一套强大的功能，用于创建 Web 应用程序和 HTTP 服务器。Express 框架的设计理念是尽可能地保持轻量级，同时又具备高度的可扩展性。它不强制特定的代码结构或开发模式，开发者可以根据项目需求自由选择合适的工具和方法，这使得 Express 在开发过程中拥有极高的灵活性。
2025-06-15 23:39:42
1292
原创 头像预览和上传
在写一个项目的时候，遇到了头像修改这个功能的需求，在最开始的学习中发现可以通过type为file的input文件读取图片，然后将其转换为DataUrl格式，最终作为Ima元素的src即可在页面上展示图片。但到后面开始写交互的时候发现DataUrl格式的图片数据太长了，发送请求不是请求头太大就是数据库塞不下，然后开始学习后面的multipart/form-data这种数据传输方式(虽然没用，但学了doge^-^)
2025-06-02 15:46:23
932
原创 媒体查询使用
媒体查询是前端开发中实现响应式设计的重要工具，通过根据设备的特性应用不同的 CSS 样式，可以使网页在各种设备上都能提供良好的用户体验。在实际写代码时，对于新手来说总是容易忽略这个东西，在自己电脑上显示的很好的网页，在别人电脑上可能布局就变得混乱，因此要注意媒体查询的使用。
2025-04-28 20:06:56
949
原创 web worker
Web Worker 为 Web 应用开发带来了多线程编程的能力，有效解决了 JavaScript 单线程模型带来的性能瓶颈问题。通过将耗时任务转移到后台线程执行，Web Worker 能够显著提升 Web 应用的性能和用户体验，在数据处理、复杂计算、实时应用等众多场景中发挥着重要作用。
2025-04-21 13:20:36
1345
原创 js高级_执行上下文和作用域
在 inner 函数执行时，查找 globalVar，首先在 inner 函数的词法环境中找不到，然后沿着作用域链向上，在全局执行上下文的词法环境中找到 globalVar。最后，对于下一阶段项目的练习，要充分利用这次机会，提高对于学过前端知识的实践能力，提升编程思维，同时更重要的是借此机会加深和小组其它成员之间的练习，锻炼团队合作意识，为后续的团队协作锻炼自己。当查找变量时，JavaScript 引擎会从当前执行上下文的词法环境开始，如果找不到，就会沿着作用域链向上查找，直到全局作用域。
2025-04-14 16:41:40
949
原创 thymeleaf基础语法
Thymeleaf 是一款强大的模板引擎，其语法简洁，与 HTML 高度融合，同时具备丰富的功能，能让开发者灵活地操控页面展示。在使用 Thymeleaf 时，我们能借助其表达式访问后端数据，并在页面上展示这些数据。此外，它还支持条件判断、循环以及模板片段等功能，极大地提升了页面开发的灵活性。下面将详细介绍 Thymeleaf 的使用方法。
2025-04-07 10:29:11
1088
原创 js_对象继承方法
在 JavaScript 中，对象继承有多种实现方式，每种方式都有其独特的优点和缺点。在实际开发中，我们需要根据具体的需求和场景来选择合适的继承方式。如果追求简单和内存效率，原型链继承可能是一个不错的选择，但要注意原型污染的问题。构造函数继承适用于需要每个子对象都有独立属性副本且能传递参数的情况，但会导致方法无法共享。组合继承综合了两者的优点，但存在父构造函数被调用两次的性能问题。寄生组合继承优化了组合继承的性能，但实现相对复杂。
2025-03-31 10:36:28
1206
原创 ES6-Symbol
在这个例子中，我们两次调用Symbol.for('globalSymbol')，尽管是在不同的代码位置，但由于使用了相同的键'globalSymbol'，所以sym1和sym2指向的是同一个 Symbol。通过查看description属性的值，开发者可以更清晰地理解代码中各个 Symbol 的作用，尤其是在复杂的项目中，众多的 Symbol 可能会让代码阅读变得困难，description属性能够提供关键的上下文信息。如果没有找到，则在全局 Symbol 注册表中创建一个新的 Symbol，并返回它。
2025-03-23 09:51:56
1009
原创 JavaScript 中的 var、let 和 const 详解
var 是 JavaScript 中较早期用于声明变量的关键字。使用 var 声明变量非常简单，只需要在变量名前加上 var 关键字即可。例如：var age;age = 25;// 或者可以在声明时直接赋值let 是 ES6 引入的用于声明变量的关键字。它的基本用法与 var 类似，在变量名前加上 let 即可声明变量。例如：let age;age = 30;// 或者声明时直接赋值const 同样是 ES6 引入的关键字，用于声明常量。常量一旦声明，其值就不能再被修改。
2025-03-16 08:47:05
8218
4
原创 JS中通过类操作样式
什么是类操作样式？类操作样式简单来说就是在js里面不使用：对象.style.样式 的形式对样式进行更改，而是直接对对象class属性进行更改，通过将class更改为在css里面预设定好的样式，能一步到位的直接进行样式更换。
2025-03-09 10:05:24
547
原创 Ajax基础详解
定义：发送请求后，无需等待响应即可继续执行其他任务。响应通过回调函数、事件监听等方式处理。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。客户端向服务器端发送请求，必须等待结果返回，才能向服务器端发送下一次请求。说明：异步交互就是第二次请求不需要等待第一次请求结束之后就可以开始。优点：支持高效并发处理提高资源利用率提升用户体验，减少等待时间缺点：实现相对复杂错误处理较为困难增加开发和维护成本。
2025-02-24 13:36:17
1397
原创 JS基础篇——壹
当声明一个变量，但没有给它赋值时就是该类型，表示没有定义-使用typeof检查一个undefined时返回Undefined。
2024-12-09 16:29:05
1643
1
原创 css3里面扇形的创建
布吉岛为啥该方法创建的扇形在使用动画的时候不能达到过渡的效果，不太建议使用，静态图可以。方法1：使用conic-gradient:值.........;方法1：使用conic-gradient:值.........;值的使用和径向渐变一样。
2024-12-02 11:18:15
533
原创 css3弹性盒子
基本内容：基本内容：1.弹性容器和弹性子元素2.主轴（main axis）和交叉轴(cross axis)3.弹性容器的基本属性4.项目的基本属性我是一个分割线一、弹性容器和弹性子元素：弹性盒子：-弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。它的所有子元素自动成为容器成员，称为flex项目，简称-弹性容器内包含了一个或多个弹性子元素。
2024-11-30 16:38:15
1670
1
原创 css3动画
我是一个分割线一、动画的创建：@keyframes 规则是创建动画。语法：@keyframes 动画名{css内容；内容：（1）from(css样式);to(css样式)；（2）0%{css样式;} 可以设置多个变化的时间n1%{css样式;} 0% 是动画的开始，100% 是动画的完成。........100%{css样式}二、动画的捆绑：使用animation将动画myfirst捆绑到需要该动画的元素样式里。
2024-11-30 14:32:22
1316
1
原创 前端学习_二
分端后主要就是学前端了，在之前的学习前端的过程中还算顺利，初步学习还算轻松，但好像前端越往后学越觉得难，那也木事，反正难都难，跟着学习计划走吧，好好学习。如：background-image: url(check.png),linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.5)),url(prj01.jpg);颜色节点处的值可以为rgb()的形式，也可以为rgba()的形式，可以使用rgba()的形式为背景设置一个遮罩（rgba可以设置透明度）
2024-11-25 11:15:26
840
原创 前端_一初识
二、笔记一、本周学习内容：1.简单认识和学习了HTML：基本格式 语法规范 基本的标签 属性 实体 相对路径文档声明 乱码问题 内联元素和块元素2.初步学习了CSS：基本语法 文本样式 CSS引入HTML CSS选择器 伪类和伪元素文档流 盒子模型 浮动 定位 背景 样式的继承 层级常用样式3.小知识：长度和颜色单位二、笔记。
2024-11-18 10:57:09
469
空空如也
vue自动路由生成问题
2025-11-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人