Justus- - 博客园

2025年6月12日

摘要：前端自动鉴权与全局 Token 注入的深度实践 “安全不是终点，而是每一次请求的起点。” 在现代 Web 应用中，接口安全和统一鉴权已成为前端架构设计的核心环节。尤其在微服务、API 网关盛行的今天，如何让前端自动、无感地完成鉴权，保障每一次数据交互的安全与合规，是每个前端工程师都绕不开的话题。本阅读全文

posted @ 2025-06-12 18:02 Justus- 阅读(79) 评论(0) 推荐(0)

前端构建工具解析：Webpack:Rollup:Vite:Gulp的特性对比

摘要：本文档对常见前端打包工具的特征进行对比，并结合实际项目经历进行说明。 1. Webpack 应用场景：用于普通前端项目的打包，适合大型复杂项目。特征：支持模块化开发，生态丰富。插件和Loader机制强大，灵活性高。支持代码分割、懒加载等高级优化。性能优化手段多，如Tree Shaking、阅读全文

posted @ 2025-06-12 17:29 Justus- 阅读(297) 评论(0) 推荐(0)

前端跨窗口通信：Iframe - postMessage的透传原理及应用

摘要：背景最近在做的一个中台系统有这样一个需求：在顶部导航栏增加一个tab，点击后渲染一个外部生产地址，并且当前系统登录后才可以正常开始加载。在前端开发中，这种跨窗口通信是一个常见的需求，HTML5提供的postMessage API为我们提供了安全可靠的跨窗口通信解决方案。所以，使用iframe加载阅读全文

posted @ 2025-06-12 17:13 Justus- 阅读(712) 评论(0) 推荐(0)

2025年6月11日

Vue响应式进化：从Object.defineProperty到Proxy

摘要： Vue3已经发布了一段时间了，那么相比于Vue2做了哪些升级，解决了什么问题呢？众所周知Vue的响应式系统是其核心特性之一，它能够自动追踪数据变化并更新视图。从Vue 2到Vue 3，响应式系统经历了一次重要的技术升级，从使用Object.defineProperty到采用Proxy，本文将结合关阅读全文

posted @ 2025-06-11 16:26 Justus- 阅读(54) 评论(0) 推荐(0)

低成本高收益：用LocalStorage构建接口流量闸门

摘要：通过有效期控制与缓存一致性校验，将非频繁更新接口的调用量降低70% 背景在前端开发中，接口的调用频率往往随着用户体量的增长而成倍提升。我们某个产品使用了“券商配置”接口（作用：根据不同的客户，返回对应的线上脚本地址，动态加载），最初服务的客户体量较小，接口被频繁调用但未造成明显压力。然而，随着某大阅读全文

posted @ 2025-06-11 16:21 Justus- 阅读(47) 评论(0) 推荐(0)

前端长链接架构设计：WebSocket数据流实现AI对话页

摘要：背景最近新增了一个产品项目“今天炒什么”，这是一款面向短线用户的热点选股工具。展示每日精选的热点话题，及相关话题近一个月的热度值。有一个“热点解读”功能，需要调用大模型接口实现一个AI对话页。其中大模型接口为流式响应，所以决定采用 WebSocket 技术实现前后端实时通信，确保为用户提供流畅自然阅读全文

posted @ 2025-06-11 15:28 Justus- 阅读(465) 评论(0) 推荐(0)

前端音视频大文件分片上传与断点续传方案设计

摘要：背景文件上传是前端开发中一个常见的功能需求，最近给在对接券商的一个后台管理系统需求的时候，需要新增音视频素材库，用于上传相应的素材在业务中使用。由于音视频文件体积一般都较大，直接上传会遇到很多问题，比如：文件体积大，上传时间长、网络不稳定上传失败、服务器压力大和用户体验差等。为了解决这些问题，我阅读全文

posted @ 2025-06-11 14:30 Justus- 阅读(171) 评论(0) 推荐(0)

2025年6月10日

教你从0开始搭建一个NodeJs前端脚手架

摘要： “深入浅出Node.js前端脚手架：解析commander.js + inquirer.js + fs的核心组合” 在现代前端工程化体系中，脚手架工具已成为提升开发效率、规范团队协作的利器。本文将以实际项目为例，深入解析如何用 Node.js 结合 commander.js、inquirer.js 阅读全文

posted @ 2025-06-10 08:09 Justus- 阅读(120) 评论(0) 推荐(0)

2025年6月7日

高频接口前端缓存解决方案：Service Worker + IndexedDB

摘要：背景在2024年国庆前后，股市行情出现了一波高潮，国庆期间利好消息影响散户情绪造成拥堵开户的场景。对网络和后端造成巨大的压力，同时也影响用户体验，这种突发情况一般是网络组会采用扩容的方式进行应对，但由于内部硬件资源不充裕、资源调配不均匀，所以需要前端同事一起进行优化。我这边最终组织团队决定使用S 阅读全文

posted @ 2025-06-07 10:46 Justus- 阅读(171) 评论(0) 推荐(0)

SSO单点登录原理解析：前端工程师必须知道的认证逻辑

摘要：在多系统协作的企业级应用中，单点登录（SSO, Single Sign-On）是提升用户体验和安全性的关键技术。本文结合实际前端实现代码和 SSO 认证中心的原理，详细解析如何在前端项目实现单点登录。一、业务背景与需求随着团队业务系统和业务组的划分逐渐增多，用户频繁切换系统时需要重复登录，既影响阅读全文

posted @ 2025-06-07 10:33 Justus- 阅读(305) 评论(0) 推荐(0)

前端BEM规范：说服团队统一css代码风格

摘要：背景在我负责建设移动端组件库的前期，发现团队对 JS/TS 代码规范的重视，往往远超 CSS/SCSS。但在当前这种UI体系的“样式驱动”项目中，CSS 规范的缺失会带来极大的维护成本和协作障碍。BEM（Block-Element-Modifier）规范，是解决这一痛点的最佳实践之一。为什么 J 阅读全文

posted @ 2025-06-07 10:18 Justus- 阅读(60) 评论(0) 推荐(0)

2025年5月19日

移动端自适应方案：从px到rem的换算逻辑

摘要：因为UI稿中的组件单位默认为px，当在vue移动端项目中一比一还原后，会出现设备分辨率越大元素越小的问题，所以要通过元素缩放的形式进行移动端适配。解决方案为（vue2.x）：amfe-flexible + postcss-pxtorem； amfe-flexible：配置可伸缩方案，主要是将 1r 阅读全文

posted @ 2025-05-19 22:54 Justus- 阅读(70) 评论(0) 推荐(0)

2025年5月18日

template不行？使用render函数开发动态组件

摘要：背景今天在开发某个需求的时候遇到了一个问题，某个组件的一些html标签需要根据props定义的tag字段自定义传入，生成对应的div、p、span等标签显示在页面中，并且tag不固定（排除了枚举所有标签并使用v-if控制实现的可能）。但是vue2.x的模板语法只支持在template中添加某些确定阅读全文

posted @ 2025-05-18 12:22 Justus- 阅读(43) 评论(0) 推荐(0)

一行代码切换暗黑模式：CSS变量与全局状态管理怎样结合

摘要：预设配色要求两套主题风格为白版跟黑版，默认主题为白版；变量白版黑板主色 #E8302E #E9533E 警告色 #ED7F31 #ED7F31 字体色 #333333 #202022 背景色 #FFFFFF #252528 线条色 #252528 #D2D2D2 实现方案 1.scss混入阅读全文

posted @ 2025-05-18 12:22 Justus- 阅读(49) 评论(0) 推荐(0)