- 博客(64)
- 收藏
- 关注
RSS订阅原创 大文件上传代码示例（原生前端三剑客 + Express.js后端）
本文介绍了前端实现大文件分片上传的核心流程和技术要点。分片上传能解决大文件上传的超时、断点续传、并发提速和内存占用问题。关键步骤包括：1) 使用Blob.slice切割文件；2) 用spark-md5计算文件唯一哈希；3) 上传前校验已传分片；4) 并发上传分片并携带索引信息；5) 请求后端合并文件；6) 实时展示进度。文章提供了完整的Express后端实现代码（含分片校验、上传和合并接口）和前端HTML示例（含文件哈希计算和分片上传逻辑），其中前端采用2MB分片大小，通过axios实现并发控制，并支持上传
2026-06-04 16:42:07
196
原创 IntersectionObserver 详解：封装 Vue 指令实现图片懒加载
本文介绍了如何使用IntersectionObserver API实现图片懒加载功能。首先对比了传统scroll监听与IntersectionObserver的性能差异，后者只在元素交叉状态变化时触发，性能更优。然后详细讲解了IntersectionObserver的基本语法、回调参数和配置选项。重点展示了如何封装Vue指令实现图片懒加载，包括核心思路、指令封装代码、注册方法及组件使用示例。文章还提供了增强版指令，支持自定义占位图、错误处理等更多配置选项，通过异步监听元素可见性来优化图片加载性能。
2026-05-20 14:06:11
217
原创 Vue3 + ECharts 企业级封装实践：按需引入 + useECharts Hooks
本文介绍了一套在Vue 3项目中优化使用ECharts的完整方案。通过按需引入图表组件减少打包体积，封装统一的echarts实例导出模块确保类型安全，并开发了useECharts组合式函数自动处理图表生命周期管理。该方案实现了DOM挂载、配置响应式更新、窗口/元素尺寸自适应以及自动销毁等功能，提供了完整的类型支持。文中详细展示了三个核心文件的实现代码：按需注册的echarts实例封装、类型定义文件以及核心Hook实现，最后给出了基础使用示例。这套方案可直接落地应用，显著提升ECharts在Vue项目中的开发
2026-05-16 20:31:21
207
1
原创 Vue2 vs Vue3 父子组件通信：纯代码示例
本文提供了Vue2和Vue3中父子组件通信的纯代码示例对比。Vue2使用props/$emit实现父子通信，Vue3则采用defineProps/defineEmits语法。文章包含可直接运行的.vue文件代码片段，展示了父传子和子传父两种场景的实现方式，并附有快速对比表。内容简洁实用，适合开发者快速查阅和复制使用。
2026-05-16 20:16:08
32
原创 前端埋点从入门到企业实践：手写一个Demo + 主流方案对比
前端埋点是数据采集的关键技术，通过在代码中植入数据采集逻辑，记录用户行为（如点击、页面访问等），解决产品功能评估、用户流失分析、运营效果追踪等问题。埋点分为三类：代码埋点（精准但开发成本高）、可视化埋点（灵活无需发版）、无埋点（全量采集但数据量大）。文章通过手写Demo演示基础埋点（手动上报）和封装SDK（批量上报），并对比大厂与中小企业的埋点落地策略，强调混合使用多种埋点方式以实现精准与效率平衡。
2026-05-16 20:09:08
422
原创 从SKU到SDK：10分钟理清互联网领域最易混淆的9个术语
互联网行业术语扫盲：9个高频缩写解析 本文整理了互联网公司常用的9个专业术语，涵盖电商、技术和数据分析领域。电商类包括SKU（具体商品编码）和SPU（商品家族）；技术开发类涉及SDK（开发工具包）和API（通信接口）；数据分析类包含UV（独立访客）、PV（浏览量）和DAU/MAU（活跃用户）；通用管理类则介绍UI（用户界面）和KPI（绩效指标）。文章通过实例说明每个术语的含义和应用场景，并附对比表格帮助理解。掌握这些术语有助于跨部门高效沟通，建议收藏备用。
2026-05-16 20:04:49
388
原创 JavaScript 字符串与数组核心方法详解
本文介绍了JavaScript中四个核心方法的使用场景和技巧： Array.some()：用于检测数组中是否存在满足条件的元素，在代码扫描工具中可用于多模式匹配检测。 RegExp.test()：快速验证字符串是否匹配正则表达式，适合表单验证和文本分析场景。 String.match()：提取字符串中匹配正则的内容，可获取捕获组信息，适用于模板解析等场景。 String.includes()：简单检查字符串是否包含子串，适合基础包含性判断。 这些方法各具特色：some()关注存在性，test()侧重验证，m
2026-03-23 14:54:33
344
原创 前端SSE（Server-Sent Events）实现详解：从原理到前端AI对话应用
SSE（Server-Sent Events）是一种服务器向客户端单向推送数据的技术，适用于实时通信场景。其特点包括基于HTTP协议、自动重连、轻量级实现等。实现方式分为两种：使用原生EventSource API（仅支持GET请求）或fetch+ReadableStream（支持POST请求）。后端通过设置text/event-stream响应头并持续发送数据块，前端则需正确处理SSE格式数据、流式读取和解码。相比WebSocket，SSE实现更简单但仅支持单向通信。关键技术点包括数据格式处理、流式读取、
2026-03-22 20:17:28
1025
2
原创 深入理解 ES6 Map 数据结构：从理论到实战应用
摘要： Map是ES6引入的键值对集合，相比Object具有更灵活的特性：支持任意类型键、保持插入顺序、内置遍历方法和动态大小。基本操作包括set()、get()、has()和delete()。与Object相比，Map在频繁增删、有序遍历时表现更优，但不支持JSON序列化。实际应用包括请求去重、缓存管理和状态管理，其高效查找（O(1)）和键类型灵活性是核心优势。最佳实践建议在复杂键、频繁增删场景使用Map，而简单键值存储仍可用Object。注意及时清理无用数据以优化性能。
2026-03-08 20:35:33
433
原创 企业级 Axios 配置实战：从基础到完整封装
本文详细介绍了企业级Axios封装方案，涵盖核心功能实现：1）基于环境变量创建多实例；2）请求拦截器实现Token注入、重复请求取消和全局Loading管理；3）响应拦截器处理业务状态码、HTTP错误和401跳转；4）集成axios-retry实现自动重试机制；5）开发环境日志记录。通过AbortController替代传统CancelToken，采用计数器控制Loading显示，并提供了完整的错误处理链路。该方案可直接应用于生产环境，有效提升前端HTTP请求的健壮性和可维护性。
2026-03-08 20:33:02
505
原创 Canvas 简单案例
本文分享了一个HTML5 Canvas的简单案例，帮助初学者理解Canvas绘图功能。通过JavaScript代码演示了如何获取Canvas元素、创建2D绘图上下文，并实现图像绘制功能。文章包含完整的HTML示例代码，展示了使用drawImage方法在Canvas上绘制图片的基本操作。作者还提到后续会专门讲解Canvas，为读者提供进一步学习资源。该案例适合具备HTML5和JavaScript基础的学习者参考。
2026-03-02 13:11:25
172
原创 Vue Router 企业级配置全攻略：打造专业级路由系统
本文详细介绍了企业级Vue项目中路由配置的最佳实践。主要内容包括：路由在企业级应用中的核心作用（权限控制、用户体验、性能优化等）；推荐的模块化目录结构设计，实现职责分离；通过TypeScript扩展路由元信息，增强类型安全；具体路由配置示例展示模块化路由和静态路由的实现方式。文章强调优秀的路由配置能显著提升项目的可维护性、安全性和开发效率，为构建复杂Vue应用提供了实用指南。
2026-01-22 13:58:34
873
原创 快速上手 Dart 基础
本文介绍了Dart语言的基础知识，包括变量与常量的声明(var/const/final)、常用数据类型(String/数字/布尔/List/Map/dynamic)及其常用操作方法。同时讲解了Dart的空安全机制(?, ?., !, ??运算符)和运算符使用。内容涵盖字符串拼接、类型转换、列表增删改查、字典操作等基础语法，适合有前端基础的学习者快速掌握Dart核心语法要点
2025-11-15 20:46:18
956
原创 Trae 一键换装 Dracula 主题 + 改注释颜色 + 去掉 console.log 多余分号
本文介绍如何快速配置Trae编辑器的前端开发环境
2025-11-13 19:23:33
1743
原创 Vue 3 项目 ESLint 配置详解：初始模板的正确配置
本文介绍了在pnpm create vue创建的Vue3项目中配置ESLint的方法
2025-11-12 14:05:13
318
原创 Vue 图片性能优化双剑客：懒加载与自动压缩实战指南
Vue图片优化指南：使用vue-lazyload和vite-plugin-imagemin提升应用性能
2025-11-02 13:14:25
780
原创 DataGrip连接本地数据库报错 nested exception is:java.net.ConnectException: Connection timed out: connect.的解决方案
DataGrip连接本地数据库报错：DBMS: MySQL (no ver.) Case sensitivity: plain=mixed, delimited=exactConnection refused to host: 127.0.0.1; nested exception is: java.net.ConnectException: Connection timed out: connect. 的解决方案
2025-11-01 14:11:25
1295
原创 Vue 3 + TypeScript 项目性能优化全链路实战：从 2.1MB 到 130KB 的蜕变
本文详细介绍了Vue3项目的全链路优化方案，通过系统化手段实现了显著的性能提升。基于Vite构建工具，采用CDN外部化、精细化代码分割等策略，使首包体积从2.1MB降至130KB（降幅94%）。同时通过自动化图片压缩、智能预加载等技术，将LCP时间从3.2s缩短至1.8s（提升44%）。全文提供了完整的TypeScript配置代码和优化前后对比数据，包括构建体积减少70%、Lighthouse评分提升30%等具体成果。项目采用Vue3+TypeScript+Composition API技术栈。
2025-10-24 11:59:15
1159
原创 # JavaScript 数组方法：.some()
JavaScript 数组的 .some() 方法是一个高效的短路求值工具，用于检测数组中是否存在满足条件的元素
2025-10-11 11:26:23
473
原创 Marked.js：一个强大的Markdown解析库
摘要： Marked.js是一款高效的Markdown解析库，支持浏览器端和Node.js环境，可将Markdown快速转换为HTML。
2025-09-25 16:51:55
2150
原创 MySQL 学习笔记 (Part.1)
本文介绍了MySQL数据库的基础知识，包括其发展历史和关系型数据库特点、重点讲解了DDL（数据定义语言）和DML（数据操作语言）两类核心SQL语句。
2025-09-23 11:08:02
341
原创 .env与.gitignore：现代软件开发中的环境管理与版本控制防护
本文系统介绍了.env和.gitignore文件在现代软件开发中的关键作用
2025-09-21 20:59:01
1184
原创 用 PyInstaller 把 Python 脚本变成“真正”的桌面应用——从安装到发布一篇通
PyInstaller是一个将Python脚本转换为可执行文件的工具，支持跨平台打包，让Python程序无需安装解释器即可运行
2025-09-20 20:19:03
518
1
原创 ECharts 核心：深度解析 options 配置项
本文为ECharts初学者提供了一份系统性配置指南，重点解析折线图7大options核心模块的配置方法
2025-09-15 13:06:40
1127
原创 深入理解防抖（Debounce）：原理、实现与应用场景
摘要： 防抖是一种前端性能优化技术，用于限制高频事件的触发频率，仅在单位时间内执行最后一次事件
2025-09-12 11:38:57
1456
原创 JavaScript 中 map 和 filter 方法的快速上手指南 (附综合案例)
本文通过色彩轮播图示例介绍了JavaScript数组的map和filter方法
2025-09-11 16:06:01
1184
原创 Next.js 快速上手指南
动态路由允许你定义一个页面模板，该模板可以根据 URL 中的参数动态加载不同的内容。例如，你有一个博客网站，每个博客文章都有一个唯一的 ID。你可以使用动态路由来创建一个页面模板，该模板可以根据文章 ID 显示不同的文章内容。layout通过动态路由，你可以根据 URL 参数动态加载页面内容，这非常适合构建需要根据参数显示不同内容的页面。而layout组件则允许你定义页面的共享结构，通过嵌套layout，你可以轻松地构建复杂的页面布局。
2025-08-30 12:03:30
1334
原创 Axios 实例配置指南
本文介绍了Axios在前端项目中的配置与使用方法。Axios是基于Promise的HTTP客户端，具有简洁API、请求拦截、跨浏览器兼容等优势。文章详细展示了如何创建Axios实例（包括设置基础URL、超时时间），添加请求/响应拦截器（处理认证、错误等），并导出配置好的实例。最后演示了如何使用该实例发送GET/POST请求。通过合理配置Axios，可以显著提升前后端交互效率。
2025-08-30 10:41:27
707
1
原创 Python爬虫：Requests与Beautiful Soup库详解
本文介绍了Python爬虫的两个核心库Requests和Beautiful Soup的基本用法
2025-06-29 22:09:24
2237
原创 语法糖：编程中的甜蜜简化 (附 Vue 3 & Javascript 实战示例)
语法糖是编程语言中简化代码表达的语法结构，不增加新功能但提升可读性和开发效率
2025-06-21 12:26:05
856
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人