- 博客(460)
- 收藏
- 关注
RSS订阅
原创 动态表单设计解析
动态表单体系架构解析 动态表单体系是一种由Schema驱动、Engine运行、Renderer渲染的规则执行系统，其本质是"规则→状态→决策→表现"的过程。相比传统UI框架表单，动态表单体系具有更高抽象层级和更强扩展性，能够解决复杂表单场景下的维护性、复用性和动态性问题。 核心架构分为三层： Schema层：定义字段结构、校验规则和联动关系，遵循可序列化、UI无关原则 Engine层：负责状态管理、校验裁决和联动执行，是规则的实际执行者 Renderer层：将Schema转化为具体UI展
2026-01-01 17:54:12
989
原创 权限与访问控制
摘要 本文系统梳理了前端视角下的用户权限与访问控制业务体系。主要内容包括：权限控制的概念定位（身份认证与业务执行间的"闸门"）、前端8大核心能力全景图（身份状态管理、角色模型等）、四层权限控制模型（登录态层、路由层、菜单层、组件层）、典型数据流以及三种常见权限模型（RBAC、PBAC、ABAC）。重点剖析了用户鉴权机制，详细讲解了JWT双Token的企业级实现方案，并提供了金融后台系统的完整鉴权示例。文章强调前端主要负责权限的展示与引导，而安全控制必须由后端统一裁决，形成前后端双层校验体
2025-12-31 23:14:18
1016
原创 支付系统业务
本文系统阐述了支付系统中前端的核心职责与技术要点。主要内容包括：1）前端作为支付流程编排者，承担状态机执行、风险防控等关键角色；2）支付链路的完整流程与核心业务对象（订单、支付单、交易）的区分；3）支付状态机的必要性及其实现方案；4）支付页各模块（金额展示、支付方式选择、提交支付）的技术细节；5）第三方支付对接的注意事项；6）支付结果确认的轮询机制与异常处理；7）前端安全防护要点；8）支付系统作为前端天花板业务的复杂度分析；9）各类支付异常的详细分类与兜底策略。文章强调支付前端开发需遵循"失败路径
2025-12-26 00:01:41
759
原创 js 数据结构
本文系统梳理了前端开发中的数据结构体系，主要内容包括： 前端数据结构体系：不仅限于JS原生结构，还包括抽象数据结构（栈/队列/树等）、框架内部结构（VDOM/Fiber）、浏览器结构（DOM树）和数据模型设计。 主流框架数据结构对比：详细分析了React（链表+优先队列）、Vue（树+图）、Solid（图）和Svelte（编译期结构）等框架的核心数据结构差异，揭示了不同框架的设计哲学。 JS数据结构全景：梳理了JS原生数据结构（Array/Object/Map/Set）和常见抽象数据结构的实现方式、复杂度及
2025-12-23 20:03:53
1155
原创 Monaco Editor 的使用与二次开发
Monaco Editor 是一个功能强大的代码编辑器，本文总结了其快速上手方法和常用功能。主要内容包括：安装方法、核心代码模板、20个常用配置项（布局、编辑、高亮等）、常用API操作（主题设置、内容编辑、快捷键、搜索查找等）、以及自定义语言支持。文章提供了丰富的代码示例，涵盖编辑器设置、内容操作、模型管理等实用技巧，适合开发者快速掌握Monaco Editor的核心功能。
2025-12-05 20:05:10
764
原创 低代码开发之道
低代码技术解析与应用指南 低代码是一种通过配置化方式构建应用的技术，将业务通用模式抽象为可配置模型（Schema/DSL），实现"模型驱动UI"。相比传统开发，低代码能显著提升效率，固化业务规则，降低认知成本。它适用于表单系统、后台CRUD、数据仪表盘等场景，但不适合游戏、高复杂度交互等特殊需求。 低代码平台由三大核心组成：领域模型（Schema）、渲染引擎和可视化编辑器。前端工程师需掌握JSON Schema、动态组件渲染、拖拽实现等关键技术，并了解主流框架如Amis、LowCodeE
2025-12-01 18:40:19
971
原创 Web3 基于区块链的下一代互联网（科普）
Web3是基于区块链的下一代互联网，其核心特征包括去中心化、用户自持身份、可验证性和抗审查等。Web3的三大支柱是加密资产、区块链和智能合约，关键形态涵盖钱包、DeFi、NFT、DAO和GameFi。在技术架构上，Web3将传统后端的很大部分功能交给智能合约和区块链处理，形成了"跨前端+链上后端"的全栈模式。Web3前端工程师需要掌握钱包交互、智能合约调用等新技能，而后端则演变为数据服务和链下基础设施。智能合约成为新的"硬核后端"，Web3全栈工程师（前端+Solid
2025-11-30 09:34:58
1317
原创 CI 和 CD（持续集成 & 持续交付/部署）
本文系统介绍了CI/CD在前端开发中的应用与必要性。首先解析了CI（持续集成）和CD（持续交付/部署）的核心概念和工作流程，CI确保代码自动构建和测试，CD实现自动部署。文章指出CI/CD能提高效率、减少错误、保证质量，是现代开发的必备技能。重点推荐了前端常用的CI/CD工具如GitHub Actions、Vercel等，并详细说明了前端项目从构建到部署的完整自动化流程，包括环境管理、版本回滚等关键环节。最后提供了前端CI/CD的学习路径，强调掌握自动化构建、测试和部署等核心技能对开发者的重要性。
2025-11-29 13:43:45
1313
原创 Nuxt.js 学习
Nuxt.js是一个基于Vue.js的通用应用框架，提供开箱即用的SSR服务端渲染、文件路由系统和静态站点生成等功能。其核心模块包括： Nitro服务端引擎：实现跨平台SSR渲染、API路由和Serverless部署 文件系统路由：自动生成路由配置，支持动态和嵌套路由 数据获取系统：提供useAsyncData和useFetch等统一数据层API 插件系统：扩展运行时能力，支持全局变量注入 配置系统：通过nuxt.config.ts集中管理所有模块配置 CLI工具：提供项目创建、构建和预览等命令 Nuxt.
2025-11-28 15:21:58
1023
原创 Next.js 学习
Next.js 是由 Vercel 维护的 React 框架，简化了构建生产级 Web 应用的开发流程。它采用 RSC（服务器组件）+ Streaming SSR + 客户端组件的组合方式，实现了强大的架构优势：服务器执行数据库查询、减少前端JS体积、支持组件级流式加载等。核心功能包括两套路由系统（App Router和Pages Router）以及多种渲染模式（CSR、RSC、SSR、SSG、ISR、PPR）。App Router基于文件系统，支持嵌套路由和Server Components，而Pages
2025-11-27 19:31:32
896
原创 Fastify 深入浅出的学习
Fastify是一个高性能的Node.js Web框架，专注于开发者体验和性能优化。它具有插件机制、内置Schema校验、优秀的TypeScript支持等特点，适用于API服务、微服务等场景。核心功能包括请求/响应API、JSON Schema校验、生命周期钩子、装饰器和封装机制。Fastify通过fast-json-stringify优化序列化性能，建议使用Schema驱动开发并合理组织项目结构。文档还提供了TypeScript集成指南、性能优化建议以及分层架构的最佳实践，帮助开发者构建高效可靠的Web应
2025-11-26 19:18:56
931
原创 Electron 深入浅出的解读
Electron是一个基于Web技术（HTML/CSS/JS）的跨平台桌面应用开发框架，结合Chromium和Node.js实现。其核心是多进程架构（Main/Renderer进程+Preload脚本），通过IPC通信实现进程交互。虽然开发门槛低且生态丰富，但也存在体积大、性能消耗高和安全风险等缺点。安全实践需禁用NodeIntegration、开启ContextIsolation并使用Preload桥接。性能优化包括内存管理、打包瘦身和ASAR打包。常见问题涉及XSS防护、IPC回调管理和跨平台兼容等，需
2025-11-23 14:21:44
884
原创 Tailwind CSS 深入浅出的解读
Tailwind CSS 实用指南 Tailwind CSS 是一款革命性的原子化 CSS 框架，通过"Utility-first"的设计理念彻底改变了前端样式开发方式。与传统框架不同，Tailwind 提供原子化类名(如p-4、flex)而非预置组件样式，让开发者能自由组合构建个性化UI。 核心优势包括： 消除CSS污染，提高可维护性 高度可定制化，支持设计系统统一管理 工程友好，自动实现Tree-shaking 完美适配主流前端框架 学习路径建议从Layout、Typography等
2025-11-19 21:51:08
777
原创 前端开发者如何拥抱 AI-Agent（科普）
在人工智能领域，Agent 到底扮演着什么角色？层级核心能力特点举例AI（模型层）推理、语言理解、生成只能“说”，不会主动执行Agent（行动层）调用工具、执行多步任务会自动完成一个任务链Multi-Agent System / Orchestrator（协作层）多 Agent 协作、任务分发、资源调度像“公司调度中心”，管理多 Agent，实现复杂目标AutoGPT + Worker 集群、LangGraphAutonomous System / AI-native 应用（生态层）
2025-11-18 23:06:41
874
原创 vite里的Rollup打包配置
在使用 vite 配置其 build 属性时，我们可以通过 build.rollupOptions 来自定义底层的 Rollup 打包配置（
2024-08-22 14:21:56
8790
2
原创 一些图表的实现
本文对比了主流前端图可视化库（G6、Cytoscape.js、Relation-Graph等）的适用场景和核心能力。通过详细对比表格展示了各库在图可视化、大图性能、布局质量、交互能力等方面的差异，并提供了快速选型建议：G6适合专业关系图，Cytoscape.js擅长科研网络图，Relation-Graph是Vue项目快速实现关系图的首选。文章还包含各库的官网链接和典型代码示例，为开发者提供一站式选型参考。
2024-08-09 16:40:53
960
原创 Nginx 安装与实践
在本地通过 Nginx 运行项目后，很想查看项目的运行日志，于是我们先来了解下查看日志的 Linux 命令。推荐使用 HomeBrew 来安装 Nginx。
2024-04-06 12:32:14
1288
原创 单点登录（SSO）
单点登录（SSO）是企业业务整合的核心解决方案，允许用户一次登录即可访问多个系统。主流方案包括OAuth2+OIDC（行业标准）、Token/JWT中央认证（工程实用）和Cookie/Session同域（简单场景）。OAuth2+OIDC通过身份认证、授权和信任传递实现SSO，涉及access_token、refresh_token和id_token三类令牌，安全性高但实现复杂。Token/JWT方案依赖中央认证中心签发令牌，实现简单但需注意JWT不可撤销问题。前端实现需关注令牌存储、登录态判断和全局登出等
2024-01-06 20:28:24
1200
原创 网格布局 Grid
grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。Grid 布局远比 Flex 布局强大。
2023-12-16 18:15:51
15865
原创 前端缓存 & 浏览器存储
前端缓存 一般用于缓存一些不常修改的常量数据或一些静态资源文件。大部分接口请求的数据都缓存在了服务端，方便统一管理缓存数据。前端做缓存的必要性：可以缓解服务端的压力，减少带宽的占用，同时也可以提升前端的查询性能。浏览器缓存和HTTP 缓存。
2022-11-22 20:13:16
4570
原创 前端性能优化之道
前端性能优化指南 核心优化思路 理解浏览器工作原理：掌握渲染流程、进程线程机制对性能的影响 精准性能分析：使用Lighthouse、PageSpeed Insights等工具获取性能报告 针对性优化：通过Chrome DevTools定位性能瓶颈 关键优化指标 FP/FCP（首次绘制/内容绘制） LCP（最大内容渲染） CLS（布局偏移） TTI（可交互时间） FID（输入延迟） 主要优化策略 网络优化： 使用CDN加速 DNS预解析 减少TCP连接 资源加载优化： 预加载关键资源 懒加载非关键资源 合理使
2021-10-15 15:27:34
539
1
原创 微前端架构
微前端架构实践指南 微前端是一种将前端拆分为多个独立微应用的前端架构模式，每个应用可独立开发、部署和运行，最终由壳应用组合成统一体验。其核心理念是将后端微服务的优势带到前端，适用于超大型后台系统、多团队协作开发等场景，但不适合小型项目或移动端高性能需求。 主流实现方案包括： iframe（简单但性能差） single-spa（经典方案） Qiankun（国内最流行） Webpack模块联邦（新潮高性能） single-spa作为微前端运行时内核，通过生命周期管理(bootstrap/mount/unmoun
2021-10-09 12:01:52
398
原创 ES6 +
目录一、ES6(2015)二、ES7(2016)1、Array.prototype.includes()2、幂运算符**3、模板字符串扩展三、ES8(ES2017)1、async/await2、对象（1）、Object.values()（2）、Object.entries()（3）、Object.getOwnPropertyDescriptors()3、padStart() 和 padEnd()4、ShareArrayBuffer四、ES9(ES2018)1、for await…of2、模板字符串扩展3、正
2021-09-28 15:41:42
1219
原创 js 设计模式（23种）
一、工厂模式// 工厂模式——创建一个 div 标签function createDiv(w, h, bg){ var style = `width:${w}px;height:${h}px;background:${bg};`; return `<div style=${style}></div>`;}for(var i=0; i<3; i++){ document.write(createDiv(Math.random()*100, Ma
2020-06-21 22:56:55
15447
6
原创 git 基础知识
一、git 有三个分区工作区：就是你在电脑里能看到的目录（代码编辑区）。 暂存区：一般存放在 ".git目录下" 下的index文件中（过渡层，避免误操作）。 版本库：工作区有一个隐藏目录.git （本地仓库，专门控制版本）。另外还有一个远程仓库：比如GitHub上的库。他们之间的关系如下：二、git 的常用命令1、克隆—git clone从远程仓库克隆代......
2020-02-18 19:48:30
9749
2
原创 深入浅出 WebSocket 协议
WebSocket是一种基于HTTP握手建立的全双工TCP协议，主要用于实现实时交互通信。其生命周期包括连接、打开、关闭和关闭完成四个状态。核心流程是：通过HTTP升级请求建立连接后，切换为WebSocket协议进行二进制帧通信，支持Ping/Pong心跳机制维持连接，最终通过Close帧优雅关闭。与HTTP相比，WebSocket具有长连接、有状态和全双工等优势。前端实现需关注自动重连、心跳检测、消息可靠性等工程化问题，并与业务逻辑解耦。
2026-01-11 16:29:16
656
原创 TS 类型“体操”
本文总结了TypeScript类型体操的核心概念与技巧，将类型系统比作函数式编程环境。主要内容包括： 类型体操本质：在类型系统中进行函数式编程，将JS值转换为类型，函数转为条件类型，递归函数转为递归类型等。 类型结构与运算原语：介绍了Tuple/Object/Union/String等数据结构及其操作符，如extends/infer/keyof等，强调类型体操是"操作类型数据结构"。 思维与算法模型：提出五大核心操作能力，包括递归处理、条件分支、映射转换、类型推断和联合类型操作，这些能力
2026-01-06 15:50:37
1166
原创 Monorepo 单仓库管理
前端Monorepo工程化实践指南 本文深入探讨了前端Monorepo的核心概念与实践方法，指出真正的Monorepo不仅是代码集中管理，更是一个包含统一依赖、强包边界、增量构建等六大核心能力的完整工程系统。文章详细分析了Workspace管理、包边界治理、增量构建系统、独立发布体系等关键技术点，并提供了一个基于pnpm+Turborepo+Changesets的企业级实践方案。 核心要点包括： Monorepo需要解决协作与规模问题，而非简单代码集中 六大核心能力构建完整的工程系统 pnpm Worksp
2026-01-04 22:38:34
1077
原创 知识库分享业务
摘要：前端分享功能的设计与实现 本文系统阐述了前端分享功能的本质和实现方案。分享不仅是生成链接，而是完整的权限管理体系，包含内容、身份、权限、范围、时间和风险六个维度。文章详细分析了分享业务的分类方式（按对象、内容、权限），并提出了核心模型：分享实体模型（独立授权记录）和访问模型（权限校验流程）。前端在分享流程中承担9大职责，从权限校验到风控限制。重点介绍了分享面板的实现细节，包括二维码生成与权限控制的实时同步。企业级系统需确保权限修改立即生效，撤销后所有访问方式即时失效。文章强调前端是权限体验的第一道防线
2026-01-01 13:26:02
684
原创 处理音视频业务
前端音视频技术全景解析 音视频业务是前端工程能力的"天花板业务"，涉及从采集到渲染的完整生命周期。其本质是处理时间连续的信号流，具有强时序性、高数据量、低容错等特点。前端主要参与采集(摄像头/麦克风)、预处理(滤镜/降噪)、传输(HLS/WebRTC)等环节，需要掌握Media API、Canvas、Web Audio等技术栈。典型应用包括点播系统、直播系统和实时音视频(RTC)，各自对延迟、稳定性和并发量有不同要求。前端开发需平衡性能、画质与带宽，并解决多终端兼容性问题。
2026-01-01 10:00:36
674
原创 金融系统的身份认证
金融身份认证不是“你能不能登录”，而是“在任何时刻你是否仍然可信”。金融系统必须满足：所以，金融认证具备 4 个核心目标：三、前端身份认证流程四、金融身份认证的完整业务生命周期用户初始身份建立（KYC）登录认证（Login Authentication）会话与持续认证（Session / Token）高风险操作的二次认证（Step-Up Auth）设备与环境认证（金融必备）行为认证（隐形认证）1、用户初始身份建立（KYC）这是金融与普通互联网最大的分水岭。典型 KYC 认证流程
2025-12-30 23:46:14
796
原创 NestJS 深入浅出的学习
NestJS是一个基于TypeScript的Node.js框架，借鉴Spring框架的工程思想，旨在解决Node.js的工程失控问题。它通过模块化架构（Module）、依赖注入（IoC/DI）、分层请求拦截（Middleware/Guard/Pipe/Interceptor）等机制，实现代码的稳定性、可扩展性和可维护性。核心成员包括承载业务逻辑的Provider、处理请求的Controller，以及模块边界管理、生命周期钩子等特性。NestJS特别适合构建大型企业级应用，提供清晰的架构边界和标准化开发模式。
2025-12-29 16:35:40
1041
原创 react 之服务端渲染（SSR）
React SSR（服务端渲染）是在Node.js服务端运行React组件生成完整HTML返回浏览器，再通过hydration使其可交互。相比CSR（客户端渲染），SSR首屏更快、SEO更友好，但需要处理服务端与客户端的数据同步。核心流程包括服务端渲染组件、注入HTML模板和客户端hydration。关键技术涉及React Router适配、数据预取方案（服务端fetch+注入window.INITIAL_DATA）以及React 18的流式渲染（renderToPipeableStream）。主流框架Ne
2025-12-24 19:19:40
706
原创 uni-app 全面深入的解读
uni-app是基于Vue的跨端开发框架，通过编译器将一套代码适配到H5、小程序、App等多端。其核心原理是编译时生成各平台原生代码，结合Vue响应式系统实现跨端渲染。技术架构包含Vue层、编译器、跨端运行时和原生桥接，通过条件编译隔离平台差异。开发者使用统一的Vue语法和uni组件/API，最终生成不同平台代码。uni-app适合需要快速覆盖多端的项目，尤其在小程序和H5场景优势明显，但App端性能受限于JSBridge通信。
2025-12-17 11:53:30
778
原创 主流 AI 应用的“流式技术”的探索交流
本文探讨了AI Agent中流式输出的必要性及其技术实现。文章指出，主流AI Agent采用切片分段输出是由于大模型天生流式生成、Agent长期运行特性、执行路径不可预期等因素决定的。文中详细分析了六种常见的流式技术（LLM Token Streaming、HTTP Chunked、SSE、WebSocket、Async Generator、Message Stream），比较了它们的优缺点和适用场景。特别强调了ReadableStream作为标准承载体在流式分层模型中的关键作用，它能将异步产出转化为标准流
2025-12-14 23:45:05
841
1
原创 前端沙箱机制
前端沙箱机制是一种隔离技术，用于在浏览器中安全运行不可信代码而不影响宿主应用。其核心目标包括隔离（避免污染主应用）、限制（控制API访问）和监控（审计行为）。常用技术包括iframe（最强隔离）、Proxy+with（微前端常用）、ShadowRealm（未来标准）、AST编译限制和WASM等。典型应用场景涵盖微前端、低代码平台、在线代码运行、第三方脚本隔离等。需要注意的是，非iframe沙箱存在被突破风险，构建安全级沙箱需组合多种方案。随着前端复杂度的提升，沙箱技术成为保障应用安全的关键机制。
2025-12-04 19:48:16
636
原创 油猴（Tampermonkey）开发“攻防一体化”
Tampermonkey是一款强大的浏览器用户脚本管理器，允许开发者通过JS/CSS修改网页内容、拦截请求或实现自动化操作。本文介绍了其核心功能，包括脚本结构、运行时机、常用API（如跨域请求GM_xmlhttpRequest、持久化存储GM_setValue等）以及开发技巧。重点讲解了DOM操作、UI注入、请求拦截等实战场景，并提供了工程化开发建议，帮助前端开发者高效定制浏览器功能。通过Tampermonkey，开发者无需插件即可实现复杂的网页定制需求。
2025-12-01 22:55:31
953
原创 React + Fastify + DeepSeek 实现一个简单的对话式 AI 应用
本文介绍了一个基于React前端和Fastify后端的DeepSeek API集成方案。系统采用三层架构：前端负责用户交互，后端作为API代理保护密钥，DeepSeek提供LLM对话、图像识别和文本向量生成三大核心能力。文章详细说明了三种API的调用流程（对话、图像问答、文本向量），并提供了完整的Fastify后端实现代码和React前端示例。该方案遵循API密钥不暴露在前端的原则，支持消息和图像的统一处理，并预留了向量检索(RAG)的扩展空间。
2025-11-28 23:09:46
937
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人