- 博客(473)
- 收藏
- 关注
RSS订阅
原创 React 系统的梳理
本文对比 React 与 Vue 的设计理念，指出 React 为灵活但依赖生态的 UI 渲染库，而 Vue 是集成响应式、模板、状态管理等的一体化框架。文章梳理了 React 的核心概念、组件模型、Hooks 用法、状态管理及性能优化，并推荐以“组件→Hooks→设计思想→状态架构→性能优化”为学习路径，强调 React 更像一套思维模型与技术生态体系。
2026-05-06 09:34:17
334
原创 vue3 系统的梳理
本文是Vue3技术研究合集，包含项目创建、语法特性、组件开发和核心API等内容。重点介绍Vue3的模板语法、组件通信、生命周期、响应式系统等核心概念，同时对比Vue2的差异。文章通过系列教程链接详细讲解Vue3的指令系统、渲染机制、动态样式等特性，适合想系统学习Vue3的开发者参考。部分内容涉及Vue2但不深入讨论，提供相关学习链接供读者延伸阅读。
2026-02-09 20:51:09
311
原创 TS 类型“体操”
本文总结了TypeScript类型体操的核心概念与技巧，将类型系统比作函数式编程环境。主要内容包括： 类型体操本质：在类型系统中进行函数式编程，将JS值转换为类型，函数转为条件类型，递归函数转为递归类型等。 类型结构与运算原语：介绍了Tuple/Object/Union/String等数据结构及其操作符，如extends/infer/keyof等，强调类型体操是"操作类型数据结构"。 思维与算法模型：提出五大核心操作能力，包括递归处理、条件分支、映射转换、类型推断和联合类型操作，这些能力
2026-01-06 15:50:37
1293
原创 动态表单设计解析
动态表单体系架构解析 动态表单体系是一种由Schema驱动、Engine运行、Renderer渲染的规则执行系统，其本质是"规则→状态→决策→表现"的过程。相比传统UI框架表单，动态表单体系具有更高抽象层级和更强扩展性，能够解决复杂表单场景下的维护性、复用性和动态性问题。 核心架构分为三层： Schema层：定义字段结构、校验规则和联动关系，遵循可序列化、UI无关原则 Engine层：负责状态管理、校验裁决和联动执行，是规则的实际执行者 Renderer层：将Schema转化为具体UI展
2026-01-01 17:54:12
1096
原创 知识库分享业务
摘要：前端分享功能的设计与实现 本文系统阐述了前端分享功能的本质和实现方案。分享不仅是生成链接，而是完整的权限管理体系，包含内容、身份、权限、范围、时间和风险六个维度。文章详细分析了分享业务的分类方式（按对象、内容、权限），并提出了核心模型：分享实体模型（独立授权记录）和访问模型（权限校验流程）。前端在分享流程中承担9大职责，从权限校验到风控限制。重点介绍了分享面板的实现细节，包括二维码生成与权限控制的实时同步。企业级系统需确保权限修改立即生效，撤销后所有访问方式即时失效。文章强调前端是权限体验的第一道防线
2026-01-01 13:26:02
817
原创 权限与访问控制
摘要 本文系统梳理了前端视角下的用户权限与访问控制业务体系。主要内容包括：权限控制的概念定位（身份认证与业务执行间的"闸门"）、前端8大核心能力全景图（身份状态管理、角色模型等）、四层权限控制模型（登录态层、路由层、菜单层、组件层）、典型数据流以及三种常见权限模型（RBAC、PBAC、ABAC）。重点剖析了用户鉴权机制，详细讲解了JWT双Token的企业级实现方案，并提供了金融后台系统的完整鉴权示例。文章强调前端主要负责权限的展示与引导，而安全控制必须由后端统一裁决，形成前后端双层校验体
2025-12-31 23:14:18
1161
原创 支付系统业务
本文系统阐述了支付系统中前端的核心职责与技术要点。主要内容包括：1）前端作为支付流程编排者，承担状态机执行、风险防控等关键角色；2）支付链路的完整流程与核心业务对象（订单、支付单、交易）的区分；3）支付状态机的必要性及其实现方案；4）支付页各模块（金额展示、支付方式选择、提交支付）的技术细节；5）第三方支付对接的注意事项；6）支付结果确认的轮询机制与异常处理；7）前端安全防护要点；8）支付系统作为前端天花板业务的复杂度分析；9）各类支付异常的详细分类与兜底策略。文章强调支付前端开发需遵循"失败路径
2025-12-26 00:01:41
877
原创 js 数据结构
本文系统梳理了前端开发中的数据结构体系，主要内容包括： 前端数据结构体系：不仅限于JS原生结构，还包括抽象数据结构（栈/队列/树等）、框架内部结构（VDOM/Fiber）、浏览器结构（DOM树）和数据模型设计。 主流框架数据结构对比：详细分析了React（链表+优先队列）、Vue（树+图）、Solid（图）和Svelte（编译期结构）等框架的核心数据结构差异，揭示了不同框架的设计哲学。 JS数据结构全景：梳理了JS原生数据结构（Array/Object/Map/Set）和常见抽象数据结构的实现方式、复杂度及
2025-12-23 20:03:53
1251
原创 uni-app 全面深入的解读
uni-app是基于Vue的跨端开发框架，通过编译器将一套代码适配到H5、小程序、App等多端。其核心原理是编译时生成各平台原生代码，结合Vue响应式系统实现跨端渲染。技术架构包含Vue层、编译器、跨端运行时和原生桥接，通过条件编译隔离平台差异。开发者使用统一的Vue语法和uni组件/API，最终生成不同平台代码。uni-app适合需要快速覆盖多端的项目，尤其在小程序和H5场景优势明显，但App端性能受限于JSBridge通信。
2025-12-17 11:53:30
983
原创 低代码开发之道
低代码技术解析与应用指南 低代码是一种通过配置化方式构建应用的技术，将业务通用模式抽象为可配置模型（Schema/DSL），实现"模型驱动UI"。相比传统开发，低代码能显著提升效率，固化业务规则，降低认知成本。它适用于表单系统、后台CRUD、数据仪表盘等场景，但不适合游戏、高复杂度交互等特殊需求。 低代码平台由三大核心组成：领域模型（Schema）、渲染引擎和可视化编辑器。前端工程师需掌握JSON Schema、动态组件渲染、拖拽实现等关键技术，并了解主流框架如Amis、LowCodeE
2025-12-01 18:40:19
1210
原创 Web3 基于区块链的下一代互联网（科普）
Web3是基于区块链的下一代互联网，其核心特征包括去中心化、用户自持身份、可验证性和抗审查等。Web3的三大支柱是加密资产、区块链和智能合约，关键形态涵盖钱包、DeFi、NFT、DAO和GameFi。在技术架构上，Web3将传统后端的很大部分功能交给智能合约和区块链处理，形成了"跨前端+链上后端"的全栈模式。Web3前端工程师需要掌握钱包交互、智能合约调用等新技能，而后端则演变为数据服务和链下基础设施。智能合约成为新的"硬核后端"，Web3全栈工程师（前端+Solid
2025-11-30 09:34:58
1876
原创 CI 和 CD（持续集成 & 持续交付/部署）
本文系统介绍了CI/CD在前端开发中的应用与必要性。首先解析了CI（持续集成）和CD（持续交付/部署）的核心概念和工作流程，CI确保代码自动构建和测试，CD实现自动部署。文章指出CI/CD能提高效率、减少错误、保证质量，是现代开发的必备技能。重点推荐了前端常用的CI/CD工具如GitHub Actions、Vercel等，并详细说明了前端项目从构建到部署的完整自动化流程，包括环境管理、版本回滚等关键环节。最后提供了前端CI/CD的学习路径，强调掌握自动化构建、测试和部署等核心技能对开发者的重要性。
2025-11-29 13:43:45
1626
原创 Docker 的运用
Docker是一个容器化工具，可将软件及其运行环境打包成镜像，实现"一次构建，到处运行"。核心概念包括镜像（软件安装包）、容器（运行实例）和Dockerfile（镜像构建说明书）。相比传统部署方式，Docker解决了环境不一致、依赖冲突等问题，使部署更简单可靠。前端应用场景广泛：部署静态资源、Node服务、快速搭建开发环境等。随着全栈趋势，掌握Docker已成为前端开发者必备技能，能显著提升部署效率和运维能力。
2025-11-28 21:47:18
832
原创 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
1336
原创 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
1116
原创 Fastify 深入浅出
Fastify是一个高性能的Node.js Web框架，专注于开发者体验和性能优化。它具有插件机制、内置Schema校验、优秀的TypeScript支持等特点，适用于API服务、微服务等场景。核心功能包括请求/响应API、JSON Schema校验、生命周期钩子、装饰器和封装机制。Fastify通过fast-json-stringify优化序列化性能，建议使用Schema驱动开发并合理组织项目结构。文档还提供了TypeScript集成指南、性能优化建议以及分层架构的最佳实践，帮助开发者构建高效可靠的Web应
2025-11-26 19:18:56
1133
原创 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
1154
原创 Zustand 深入浅出
摘要：Zustand是一个轻量级React状态管理库，基于订阅模式，提供简洁的Hooks API。核心优势包括细粒度订阅、无Provider设计、低性能开销，适合中小型应用或替代Context/Redux的简单场景。支持中间件扩展（如devtools、持久化）。通过选择器优化渲染性能，推荐拆分模块化store。与React Query协同时，Zustand管理UI状态，服务器状态交由专用库。性能优于Redux，但复杂中间件或时间旅行需求仍建议使用Redux。
2025-11-21 14:14:11
841
原创 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
965
原创 vite里的Rollup打包配置
本文介绍了Vite项目中通过build.rollupOptions自定义Rollup打包配置的方法。主要内容包括基础配置中的external（忽略外部依赖）、input（入口文件设置）和output（输出配置），以及进阶配置中的assetFileNames（静态资源命名规则）。文章详细说明了各项参数的取值方式和使用场景，并提供了代码示例，如多入口配置、动态生成入口文件等。还介绍了输出格式（amd/cjs/es/iife/umd/system）的选择和全局变量映射等高级用法，帮助开发者根据项目需求灵活定制打包
2024-08-22 14:21:56
9348
2
原创 一些图表的实现
本文对比了主流前端图可视化库（G6、Cytoscape.js、Relation-Graph等）的适用场景和核心能力。通过详细对比表格展示了各库在图可视化、大图性能、布局质量、交互能力等方面的差异，并提供了快速选型建议：G6适合专业关系图，Cytoscape.js擅长科研网络图，Relation-Graph是Vue项目快速实现关系图的首选。文章还包含各库的官网链接和典型代码示例，为开发者提供一站式选型参考。
2024-08-09 16:40:53
1267
原创 单点登录（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
1361
原创 网格布局 Grid
grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。Grid 布局远比 Flex 布局强大。
2023-12-16 18:15:51
16101
原创 iframe 使用心得
本文全面介绍了HTML中的<iframe>元素，包括其工作原理、基本语法、跨源通信、使用场景、安全性考量和性能优化。<iframe>允许在当前页面内嵌入外部资源，通过隔离环境实现跨页面展示。文章详细讲解了postMessage实现跨源通信的方法，并列举了嵌入视频/地图、支付页面等典型应用场景。在安全方面，建议使用sandbox属性、X-Frame-Options和CSP策略进行防护。性能优化部分提出了延迟加载、srcdoc内联内容、重用iframe等技巧。最后总结了限制权限、避免过度
2023-07-16 23:55:27
650
原创 前端缓存 & 浏览器存储
前端缓存 一般用于缓存一些不常修改的常量数据或一些静态资源文件。大部分接口请求的数据都缓存在了服务端，方便统一管理缓存数据。前端做缓存的必要性：可以缓解服务端的压力，减少带宽的占用，同时也可以提升前端的查询性能。浏览器缓存和HTTP 缓存。
2022-11-22 20:13:16
4710
原创 前端性能优化之道
前端性能优化指南 核心优化思路 理解浏览器工作原理：掌握渲染流程、进程线程机制对性能的影响 精准性能分析：使用Lighthouse、PageSpeed Insights等工具获取性能报告 针对性优化：通过Chrome DevTools定位性能瓶颈 关键优化指标 FP/FCP（首次绘制/内容绘制） LCP（最大内容渲染） CLS（布局偏移） TTI（可交互时间） FID（输入延迟） 主要优化策略 网络优化： 使用CDN加速 DNS预解析 减少TCP连接 资源加载优化： 预加载关键资源 懒加载非关键资源 合理使
2021-10-15 15:27:34
623
1
原创 微前端架构
微前端架构实践指南 微前端是一种将前端拆分为多个独立微应用的前端架构模式，每个应用可独立开发、部署和运行，最终由壳应用组合成统一体验。其核心理念是将后端微服务的优势带到前端，适用于超大型后台系统、多团队协作开发等场景，但不适合小型项目或移动端高性能需求。 主流实现方案包括： iframe（简单但性能差） single-spa（经典方案） Qiankun（国内最流行） Webpack模块联邦（新潮高性能） single-spa作为微前端运行时内核，通过生命周期管理(bootstrap/mount/unmoun
2021-10-09 12:01:52
490
原创 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
1266
原创 pnpm 常用指令
本文总结了前端开发中90%的pnpm使用场景，涵盖依赖管理、脚本执行、依赖排查及Monorepo操作。核心指令包括pnpm i、add/remove、dev/build、exec与dlx区分、why排查依赖，以及--filter、-r、-w等Workspace命令。配合package.json、pnpm-lock.yaml、pnpm-workspace.yaml三文件，可高效应对单项目到多包工程的全流程需求，是掌握pnpm的实用指南。
2021-07-08 11:19:11
4185
1
原创 前端鉴权：cookie、session 和 token 3种机制，以及 jwt 和 单点登
Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。Token 的特点：Token 完全由应用管理，所以它可以避开同源策略；Token 可以避免 CSRF 攻击；Token 可以是无状态的，可以在多个服务间共享。参考文档：https://www.cnblogs.com/xuxinstyle/p/9675541.html............
2021-05-31 17:02:01
3280
1
原创 Git 系统教程：核心原理、常用命令与工程实战
本文系统梳理Git核心机制与实战流程，涵盖从基础配置、工作区管理到分支合并、远程协作的完整知识体系。重点解析暂存区作用、提交历史记录原理及HEAD指针机制，强调通过git status、git diff等命令精准控制变更。结合真实开发场景，详解分支管理、合并冲突处理、版本回退与恢复策略，倡导“先查状态、再操作”的安全习惯。最终引导建立以可追溯、可恢复、可协作为核心的正确Git使用思维，助力高效团队开发。
2021-04-01 18:50:08
790
1
原创 AI Coding 时代的 Git：代码隔离、Agent 协作与工程实践
AICoding时代，开发者需重新审视Git在任务隔离、变更可验证与操作可恢复中的核心作用。通过GitWorktree实现多Agent并行开发环境隔离，结合任务分支、Checkpoint、Diff审查与PullRequest门禁，构建安全、可追溯的工程流程。强调任务拆分、权限控制与人工验收，确保AI生成代码的质量与可控性。Git不仅是版本管理工具，更是AICoding时代保障工程可靠性的基石。
2021-02-16 19:55:43
523
原创 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
15566
6
原创 理解 React children 与 Vue slot
React 的 children 与 Vue 的 slot 均实现组件内容分发，核心思想一致：父组件提供内容，子组件决定渲染位置。主要区别在于：Vue 采用专门的 <slot> 语法，语义清晰；React 则通过 children 和函数式 Props（Render Props）实现，更灵活、贴近 JavaScript 本质。两者各具优势，体现不同框架的设计哲学——Vue 偏模板声明，React 重逻辑组合。
2026-10-17 15:41:08
1023
原创 git 安装教程
本文提供了Git在不同操作系统下的安装指南。Windows用户可通过官网下载.exe文件安装，MacOS推荐使用Homebrew安装，Linux用户可使用系统包管理器（如apt/dnf/yum）安装。安装后需配置用户名和邮箱，并通过git --version验证安装。常见问题包括PATH设置错误导致命令未找到，建议重启终端解决。安装完成后即可使用Git进行版本控制操作。
2026-03-09 09:42:18
1393
原创 React 常用的 API
本文系统介绍了React Hooks的核心用法与优化技巧。主要涵盖useState状态管理、useEffect副作用处理、useContext上下文共享、useRef DOM操作等基础Hook，以及useMemo/useCallback性能优化、useReducer复杂状态管理等进阶Hook。重点解析了各Hook的使用场景、实现原理和最佳实践，如useState的惰性初始化、useEffect的清理机制、useMemo的缓存优化等。同时对比了React.memo与PureComponent的性能优化方式，为
2026-03-04 17:10:46
438
原创 Vue2 与 Vue3 的区别
Vue 3相比Vue 2在性能、功能和开发体验方面有显著提升。主要改进包括：采用Proxy重构响应式系统，提升性能；引入Composition API增强代码组织和复用性；原生支持TypeScript；新增Fragments和Teleport等特性优化DOM操作；重写虚拟DOM提高渲染效率。此外，Vue 3在生命周期钩子、自定义事件和依赖注入等方面也有所改进。这些变化使Vue 3更适合大型应用开发，在性能、灵活性和可维护性上全面超越Vue 2。对于新项目推荐直接使用Vue 3，现有项目也可考虑逐步迁移。
2026-03-01 22:25:21
895
原创 Vue 性能优化
Vue性能优化指南 本文系统总结了Vue性能优化的核心思路和具体实践方法。主要从以下几个方面进行优化： 代码层面优化：正确使用v-if/v-show、合理设置key值 减少组件渲染：拆解组件、避免父组件无意义更新、使用computed缓存 v-for优化：避免v-for与v-if混用、长列表使用虚拟滚动 内置指令优化：v-once、v-memo和keep-alive的使用场景 核心优化原则是减少effect执行次数和缩小diff范围，通过合理的组件拆分、缓存机制和虚拟滚动等技术手段，可显著提升Vue应用的性
2026-02-27 20:05:51
923
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人