在全栈和前端徘徊的程序员

原创 vite实际应用中常出现的问题

Vite开发常见问题及解决方案摘要： 1.依赖解析问题：检查插件配置和预构建依赖 2.静态资源路径：正确配置base路径 3.HMR失效：检查网络和WebSocket连接 4.CSS污染：使用CSS Modules和正确配置预处理器 5.兼容性问题：调整构建目标和添加polyfill 6.TypeScript支持：安装插件并配置tsconfig 7.代理配置：确保路径匹配和正确写法 8.打包优化：使用动态导入和代码分割 9.跨域问题：配置代理或后端响应头 10.组件热更新：正确使用框架插件和组件结构

原创 vue对axios的封装和使用

本文介绍了在Vue项目中封装axios的完整方案，包括基础封装（请求/响应拦截、错误处理）、TypeScript支持、取消重复请求机制和全局loading实现。重点讲解了如何统一管理API请求、处理认证token和网络异常，并提供了模块化API的组织方式。该方案适用于Vue2/Vue3项目，能有效提高代码复用性、可维护性和开发效率，同时通过类型定义增强代码健壮性。文中包含完整代码示例和目录结构建议，是Vue项目网络请求层的工程化实践指南。

原创 前端权限模型（RBAC、ABAC、ACL、IAM）

本文介绍了前端权限模型及其实现方式，重点解析了RBAC和ABAC两种模型。文章从四个层级详细说明权限控制：路由级（通过导航守卫校验）、组件/按钮级（自定义指令实现）、API接口级（请求拦截器处理）和数据级（字段过滤）。针对不同场景，给出了权限模型选型建议（如中小系统推荐RBAC+路由权限），并以Vue为例展示了典型实现结构（路由配置、状态管理、导航守卫）。最后强调前端权限需结合后端验证，确保安全性。全文提供代码示例和实用建议，适合开发人员快速掌握权限系统设计要点。

原创 前端开发处理‘流式数据’与‘非流式数据’，在接收完整与非完整性数据时应该如何渲染和使用

本文总结了前端处理数据的四种典型场景： 完整数据非实时渲染（如静态资源请求） 完整数据模拟实时效果（如打字效果） 流式数据等待完整处理（如大文件下载） 流式数据实时处理（如AI聊天） 针对每种场景提供了实现方案和技术选型建议，包括fetch、Streams API、WebSocket等技术应用，并给出了Vue/React框架下的优化示例。特别强调了流式数据的buffer处理和JSON增量解析技巧，为不同业务场景的数据处理提供了清晰的技术指导。

原创 实现对deepseek流式返回的json数据，进行逐字解析并实时渲染

摘要：流式JSON数据实时解析与渲染方案 本文介绍如何处理流式返回的JSON数据实现实时渲染。核心是通过fetch+ReadableStream逐步接收数据，拼接缓冲字符串，并解决未完成JSON解析的难题。提供两种方案：1)按行或分隔符切分处理完整JSON片段；2)使用jsonparse等库进行增量解析。同时给出了实时UI渲染建议和完整代码示例。需要注意后端支持、错误处理、性能优化等关键点，建议在流结束时再做一次完整JSON验证。该方案适用于需要实时显示API流式响应内容的场景。

原创 vue路由的使用与鉴权

在 Vue 项目中，使用vue-router实现路由管理是构建单页应用（SPA）的核心部分。结合可以实现登录验证、权限控制等常见业务需求。

原创 svg与Three.js对比

SVG（）和 Three.js 是两种不同的技术，分别适用于和。

原创 svg实现常见伪3D效果

使用 SVG 可以通过多种技巧实现，虽然它本身是二维矢量图形格式，但结合，可以模拟出立体感、透视感和深度感。对于需要3D效果又不想使用three.js等技术时，可以使用svg进行伪3D，节省资源，也更容易上手。

原创 sass高阶应用

使用@function创建返回值的函数。body {

原创 Less基础语法

摘要： Less 是一种功能强大的 CSS 预处理器，提供变量、嵌套、混合宏、运算、函数等特性，增强 CSS 的可维护性和开发效率。其核心语法包括：变量（@定义）、嵌套结构、父选择器&、带参数的 Mixin、数学运算、颜色处理函数、模块化导入等。此外，支持命名空间、条件判断和递归循环等高级功能。可通过 Node.js、VSCode 插件或构建工具（如 Webpack）编译为 CSS。推荐模块化开发、语义化命名、合理控制嵌套层级，并善用 Mixin 提升代码复用性。

原创 svg的制作与动态效果的开发使用

在 Vue 或其他前端框架中使用 SVG 时，除了引入和展示静态图形外，还可以通过制作 SVG 并为其添加动态效果。svg也可作为数据可视化开发使用，比Three耗能低，但效果和复杂度不建议太高。下面是关于和。

原创 sass基础语法

Sass/SCSS是一种CSS预处理器，提供变量、嵌套、混合宏等高级功能增强CSS编写效率。基础语法包括变量定义（$var）、嵌套规则、父选择器（&）、复用代码块（@mixin）和模块化导入（@use）。支持条件判断（@if）、循环（@for/@each）等逻辑控制，并能通过@extend实现样式继承。推荐使用SCSS语法（.scss文件），配合Dart Sass等工具编译为CSS。开发建议采用模块化文件结构（_partials.scss）、命名规范化和占位符优化代码组织。

原创 vue中使用svg

在 Vue 中使用 SVG 主要有五种方式：1）直接内联 SVG 代码，适合需要动态交互的场景；2）通过<img>标签引用，适合静态展示；3）封装为可复用组件，便于管理属性；4）使用vue-svg-loader将 SVG 转为组件；5）结合响应式数据实现动态 SVG。建议根据需求选择：交互功能优先考虑内联或组件化，静态展示可用<img>，大型项目推荐使用vue-svg-loader实现按需加载。

原创 Vue 项目中 Sass 与 Less 的对比

sass&less对比

原创 浅解Vue 数据可视化开发建议与速度优化

数据可视化在现代前端应用中至关重要，但处理大规模数据时容易遇到性能瓶颈。以下是针对 Vue 项目的个人看法的优化方案：二、大数据渲染优化数据采样策略Web Worker 处理三、渲染性能提升Canvas vs SVG性能对比：GPU加速技巧四、内存管理对象池模式大数据分页加载五、监控与调试性能指标采集六、进阶优化方案WebGL方案推荐库： 或 适用场景：地理数据可视化/3D图表WASM加速七、Vue特定优化组

原创 vite常见面试问题

本文深入解析Vite的核心原理与优化策略。开发环境下，Vite利用原生ESM实现毫秒级启动和按需编译；生产环境则采用Rollup高效打包。文章详细介绍了热更新机制、多环境配置、构建优化技巧，并对比了Vite与Webpack的差异。还涵盖插件开发、SSR支持等高级场景，以及预构建原理和常见问题解决方案。最后提供面试实战问题示例，帮助读者全面掌握Vite的核心技术要点。

原创 vue项目webpack、vite、rollup、parcel四种构建工具对比

Vue项目构建工具对比摘要（150字） 主流构建工具在Vue项目中表现各异：Webpack适用于复杂应用，支持精细配置但速度较慢；Vite基于ESM实现秒级启动和热更新，推荐用于Vue3开发；Rollup专注输出精简代码，适合组件库开发；Parcel以零配置见长。性能测试显示Vite开发体验最优（冷启动0.3s），Webpack生产优化更成熟，Rollup产物体积最小。选型建议：新项目优先Vite，组件库选Rollup，遗留项目可保留Webpack。工具迁移需权衡生态兼容性与配置成本，Vite正逐渐成为现代

原创 针对vue项目的webpack优化攻略

Vue项目性能优化实践 通过开发阶段热更新、多线程构建、缓存策略提升构建效率50%；产物体积通过Tree Shaking、按需加载和Gzip压缩减少70%；Vue专项优化如模板预编译、异步组件分割进一步加速首屏加载。结果对比显示，优化后构建时间从45s降至22s，产物体积从4.2MB压缩到1.3MB，首屏加载时间缩短至0.9s。关键措施包括精确配置Loader范围、使用Webpack5持久化缓存、模块联邦实现微前端资源共享等。

原创 webpack面试问题

本文总结了Webpack的核心概念、配置优化与开发实践，主要内容包括：1）Webpack构建流程分初始化、编译、模块处理和输出四阶段；2）Loader处理单文件转换，Plugin扩展整体功能；3）代码分割与Tree Shaking的实现条件；4）构建速度优化策略如缓存、多线程；5）热更新原理与自定义插件开发方法；6）多页应用配置和Webpack5新特性；7）附简易Webpack实现代码，展示模块解析与依赖图生成原理。全文覆盖配置技巧、性能优化与底层机制，提供Webpack开发的实用指南。

原创 webpack优化方法

本文系统总结了Webpack优化策略，涵盖构建速度、输出体积和缓存优化三个核心维度。在构建速度方面，提出缩小文件搜索范围、多线程加速和缓存机制，通过配置示例展示了具体实现方法。输出体积优化包括Tree Shaking、代码分割和图片压缩等技术。缓存策略部分重点介绍了文件哈希命名和模块ID稳定化方案。文章还提供了DLL预编译、可视化分析等高级优化手段，并对比了不同优化方案的效果差异。全文通过具体配置代码和原理说明，为Webpack性能优化提供了可落地的实践指南。

原创 Vue项目前后端交互大量数据的-之-前端优化方案

【代码】Vue项目前后端交互大量数据的-之-前端优化方案。

原创 Three.js与Babylon.js对比

是两个流行的 WebGL 框架，用于在浏览器中创建 3D 图形和动画。它们都基于 WebGL，但设计理念、功能特性和适用场景有所不同。

原创 WebGL基本概念

WebGL 是一种基于 OpenGL ES 2.0 的 API，用于在浏览器中渲染 3D 图形。其核心组件包括 Canvas、上下文、着色器、缓冲区、纹理和矩阵变换。WebGL 的渲染管线涵盖顶点着色器、图元装配、光栅化、片段着色器及测试与混合等步骤。使用 WebGL 的基本步骤包括初始化上下文、定义顶点数据、创建和编译着色器、绑定顶点数据以及设置渲染循环。WebGL 的核心技术涉及矩阵变换、纹理、光照和阴影等，其中矩阵变换用于控制物体的位置和投影，纹理用于贴图，光照模型如 Phong 用于模拟光线效果，阴

原创 canvas（三）-动画3d

在 <canvas> 中实现 3D 动画通常需要借助 WebGL 技术，因为原生的 2D 上下文无法直接支持 3D 渲染。WebGL 是基于 OpenGL ES 2.0 的 JavaScript API，能够通过 JavaScript 与 GPU 交互，实现高性能的 3D 图形渲染。3D 动画的核心包括顶点数据、着色器、矩阵变换以及光照与材质的处理。实现步骤包括初始化 WebGL 上下文、定义顶点数据、创建和编译着色器、绑定顶点数据以及设置渲染循环。然而，3D 动画的实现也面临一些难点，如复杂的

原创 canvas（二）-动画（2d）

<canvas> 动画通过 JavaScript 动态更新画布内容，利用 requestAnimationFrame 实现平滑效果，适用于游戏、数据可视化等场景。动画的基本原理包括逐帧绘制、时间控制和状态更新，实现步骤包括初始化画布、定义动画状态、绘制函数和启动动画。动画类型涵盖简单动画、复杂动画和交互式动画。难点在于性能优化、时间控制、复杂动画实现和事件协调。最佳实践包括使用 requestAnimationFrame、减少绘制操作、优化性能和模块化代码。

原创 canvas浅析（一）

是 HTML5 提供的一个用于绘制图形的元素，它通过 JavaScript 操作来实现动态的 2D 或 3D 图形渲染。在 JavaScript 中，需要通过。元素添加事件监听器，实现交互功能。的各个部分详解及其使用方法。），然后才能进行绘制操作。元素获取绘图上下文（

原创 vue3函数、变量

Vue 3的组合式API（Composition API）为开发者提供了更灵活的方式来管理函数和变量的作用范围。通过ref和reactive定义响应式变量，开发者可以在setup函数中定义局部变量、函数以及计算属性，并通过返回值将其暴露给模板使用。组合式API还支持模块化开发，通过自定义Hook封装逻辑，隔离作用范围，避免命名冲突，提升代码的可维护性。合理使用局部变量和函数，减少全局污染，是编写高效、可维护Vue 3应用的关键。

原创 vue3个生命周期解析，及setup

Vue 3的生命周期钩子提供了在不同阶段执行代码的能力，合理使用可以提高组件的效率和性能。主要钩子包括onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onErrorCaptured以及onActivated和onDeactivated。每个钩子都有特定的调用时机和使用场景，如初始化数据、执行DOM操作或清理资源。setup函数是Vue 3组合式API的核心，用于定义响应式数据、方法以及调用生命周期钩子。

原创 浅入ES5、ES6（ES2015）、ES2023（ES14）版本对比，及使用建议---ES6就够用（个人觉得）

JavaScript（ECMAScript）的发展经历了多个版本，其中ES5、ES6（ES2015）和ES2023（ES14）是常用版本。ES5适合兼容老旧浏览器和小型项目，ES6引入了块级作用域、箭头函数、模板字符串等现代特性，适合现代Web开发，尤其是React、Vue等框架。ES2023则提供了findLast、toSorted等新方法，适合前沿项目如AI和机器学习。建议老项目更新到ES6，而最新ES2023特性在非必要项目中可暂缓使用。

原创 ES（ES2023/ES14）最新更新内容，及如何减少内耗

截至2023年10月，JavaScript的最新版本ES2023（ES14）引入了多项新特性，如findLast、toSorted等，并优化了性能。新特性包括从数组末尾查找元素的findLast和findLastIndex、支持Hashbang语法、以及改进的Symbol.prototype.description。性能方面，ES2023优化了数组操作和垃圾回收，减少了内存占用和GC停顿时间。此外，通过减少全局变量、避免内存泄漏、优化循环、减少DOM操作、使用Web Workers、懒加载、缓存、高效数据结

原创 浅析时空数据存储、优化-来自前端的看法

时空数据存储与优化涉及数据建模、存储引擎选择、索引优化、查询性能等多个方面。关键策略包括：1) 数据建模，使用时间戳和空间参考系统；2) 存储引擎选择，如关系型数据库、NoSQL数据库或时空专用数据库；3) 索引优化，采用R-tree、Quadtree等空间索引和B-tree时间索引；4) 查询优化，支持范围查询、最近邻查询和时空查询；5) 数据压缩与分区，减少存储空间和查询范围；6) 分布式存储与计算，利用HDFS、Spark等处理大规模数据；7) 缓存与预计算，加速查询和减少计算开销；8) 可视化与分析

原创 React学习（三）-函数概览

在React中，函数是构建组件和处理逻辑的核心部分。React函数主要分为以下几类：1. 函数组件，用于定义无状态或使用Hooks的组件；2. 箭头函数组件，语法更简洁；3. 事件处理函数，用于处理用户交互事件；4. Hooks函数，如useState和useEffect，用于在函数组件中添加状态和副作用；5. 高阶组件（HOC），用于增强组件功能；6. 渲染函数，用于返回JSX或渲染逻辑；7. 工具函数，用于封装通用逻辑；8. 生命周期函数，适用于类组件；9. 自定义Hooks，封装可复用的逻辑。这些函数

原创 React学习（二）-变量

在React中，变量根据其用途和生命周期可以分为多种类型。**状态变量（State）**用于存储组件的内部状态，状态变化会触发重新渲染，可通过useState或this.state定义。**属性变量（Props）**用于从父组件向子组件传递数据，子组件不能直接修改。局部变量是临时变量，生命周期限于函数或组件的执行过程。**上下文变量（Context）**用于跨层级传递数据，避免“Props Drilling”。**Ref变量（Refs）**用于直接访问DOM元素或存储可变值，不会触发重新渲染。全局变量在组件

原创 React学习（一）

【代码】React学习（一）

原创 正则表达式（三）-动态正则表示式、扩展语法——看看就好，一般编程用不上╮(╯▽╰)╭

动态正则表达式是指在程序运行时根据变量或条件生成的正则表达式，适用于需要根据用户输入、配置文件等动态数据生成正则表达式的场景。其核心思想是通过字符串拼接或模板化生成最终的正则表达式模式。常见使用场景包括用户输入验证、配置文件解析和动态搜索。此外，正则表达式扩展语法在Python、JavaScript、Perl等语言中支持命名分组、非捕获分组、零宽断言等高级功能，适用于复杂文本解析、数据提取和高级验证。尽管动态正则表达式功能强大，但在一般编程中并不常用。

原创 正则表达式（二）-高级应用_谨慎使用

文章主要探讨了正则表达式的使用建议及其高级功能。首先，建议尽量减少前端对数据的处理，保持数据的原始完整性，避免不必要的正则表达式使用。接着，文章详细介绍了正则表达式的多种高级功能，包括分组捕获、非贪婪匹配、零宽断言、条件匹配、递归匹配、回溯引用、模式修饰符、复杂模式匹配、动态正则表达式以及性能优化技巧。这些功能可以帮助开发者更高效地处理复杂的字符串匹配任务，同时通过优化策略提升正则表达式的执行效率。

原创 正则表达式常用验证（一）

正则表达式常用验证

原创 后端开发面试高频50个问题，简单解答

后端开发面试中常见的50个高频问题涵盖了编程语言基础、数据库、网络、操作系统、设计模式、分布式系统、算法与数据结构、安全及性能优化等多个方面。编程语言部分涉及Java的final关键字、Python的GIL、C++的虚函数、Go的Goroutine和JavaScript的事件循环机制。数据库部分包括事务的ACID特性、MySQL索引、数据库范式、SQL查询优化和Redis持久化机制。网络部分探讨了HTTP与HTTPS的区别、TCP与UDP的区别、三次握手与四次挥手、RESTful API和WebSocket

原创 前端面试高频50个问题，解答

本文总结了前端面试中常见的50个高频问题及其简要解答，涵盖了HTML、CSS、JavaScript、框架与库、工具与构建等多个方面。HTML部分包括HTML5新特性、语义化标签、跨域请求等；CSS部分涉及盒模型、垂直居中、BFC、响应式布局等；JavaScript部分包括数据类型、闭包、原型链、事件循环等；框架与库部分讨论了React、Vue、虚拟DOM、双向绑定等；工具与构建部分则涉及Webpack、Babel、Tree Shaking、CI/CD等。这些问题和解答为前端开发者提供了全面的面试准备参考。

原创 大数据模型的构建与优化