- 博客(472)
- 收藏
- 关注
RSS订阅
原创 vue3 系统的梳理
本文是Vue3技术研究合集，包含项目创建、语法特性、组件开发和核心API等内容。重点介绍Vue3的模板语法、组件通信、生命周期、响应式系统等核心概念，同时对比Vue2的差异。文章通过系列教程链接详细讲解Vue3的指令系统、渲染机制、动态样式等特性，适合想系统学习Vue3的开发者参考。部分内容涉及Vue2但不深入讨论，提供相关学习链接供读者延伸阅读。
2026-02-09 20:51:09
265
原创 TS 类型“体操”
本文总结了TypeScript类型体操的核心概念与技巧，将类型系统比作函数式编程环境。主要内容包括： 类型体操本质：在类型系统中进行函数式编程，将JS值转换为类型，函数转为条件类型，递归函数转为递归类型等。 类型结构与运算原语：介绍了Tuple/Object/Union/String等数据结构及其操作符，如extends/infer/keyof等，强调类型体操是"操作类型数据结构"。 思维与算法模型：提出五大核心操作能力，包括递归处理、条件分支、映射转换、类型推断和联合类型操作，这些能力
2026-01-06 15:50:37
1210
原创 动态表单设计解析
动态表单体系架构解析 动态表单体系是一种由Schema驱动、Engine运行、Renderer渲染的规则执行系统，其本质是"规则→状态→决策→表现"的过程。相比传统UI框架表单，动态表单体系具有更高抽象层级和更强扩展性，能够解决复杂表单场景下的维护性、复用性和动态性问题。 核心架构分为三层： Schema层：定义字段结构、校验规则和联动关系，遵循可序列化、UI无关原则 Engine层：负责状态管理、校验裁决和联动执行，是规则的实际执行者 Renderer层：将Schema转化为具体UI展
2026-01-01 17:54:12
1023
原创 知识库分享业务
摘要：前端分享功能的设计与实现 本文系统阐述了前端分享功能的本质和实现方案。分享不仅是生成链接，而是完整的权限管理体系，包含内容、身份、权限、范围、时间和风险六个维度。文章详细分析了分享业务的分类方式（按对象、内容、权限），并提出了核心模型：分享实体模型（独立授权记录）和访问模型（权限校验流程）。前端在分享流程中承担9大职责，从权限校验到风控限制。重点介绍了分享面板的实现细节，包括二维码生成与权限控制的实时同步。企业级系统需确保权限修改立即生效，撤销后所有访问方式即时失效。文章强调前端是权限体验的第一道防线
2026-01-01 13:26:02
718
原创 权限与访问控制
摘要 本文系统梳理了前端视角下的用户权限与访问控制业务体系。主要内容包括：权限控制的概念定位（身份认证与业务执行间的"闸门"）、前端8大核心能力全景图（身份状态管理、角色模型等）、四层权限控制模型（登录态层、路由层、菜单层、组件层）、典型数据流以及三种常见权限模型（RBAC、PBAC、ABAC）。重点剖析了用户鉴权机制，详细讲解了JWT双Token的企业级实现方案，并提供了金融后台系统的完整鉴权示例。文章强调前端主要负责权限的展示与引导，而安全控制必须由后端统一裁决，形成前后端双层校验体
2025-12-31 23:14:18
1069
原创 支付系统业务
本文系统阐述了支付系统中前端的核心职责与技术要点。主要内容包括：1）前端作为支付流程编排者，承担状态机执行、风险防控等关键角色；2）支付链路的完整流程与核心业务对象（订单、支付单、交易）的区分；3）支付状态机的必要性及其实现方案；4）支付页各模块（金额展示、支付方式选择、提交支付）的技术细节；5）第三方支付对接的注意事项；6）支付结果确认的轮询机制与异常处理；7）前端安全防护要点；8）支付系统作为前端天花板业务的复杂度分析；9）各类支付异常的详细分类与兜底策略。文章强调支付前端开发需遵循"失败路径
2025-12-26 00:01:41
798
原创 js 数据结构
本文系统梳理了前端开发中的数据结构体系，主要内容包括： 前端数据结构体系：不仅限于JS原生结构，还包括抽象数据结构（栈/队列/树等）、框架内部结构（VDOM/Fiber）、浏览器结构（DOM树）和数据模型设计。 主流框架数据结构对比：详细分析了React（链表+优先队列）、Vue（树+图）、Solid（图）和Svelte（编译期结构）等框架的核心数据结构差异，揭示了不同框架的设计哲学。 JS数据结构全景：梳理了JS原生数据结构（Array/Object/Map/Set）和常见抽象数据结构的实现方式、复杂度及
2025-12-23 20:03:53
1198
原创 uni-app 全面深入的解读
uni-app是基于Vue的跨端开发框架，通过编译器将一套代码适配到H5、小程序、App等多端。其核心原理是编译时生成各平台原生代码，结合Vue响应式系统实现跨端渲染。技术架构包含Vue层、编译器、跨端运行时和原生桥接，通过条件编译隔离平台差异。开发者使用统一的Vue语法和uni组件/API，最终生成不同平台代码。uni-app适合需要快速覆盖多端的项目，尤其在小程序和H5场景优势明显，但App端性能受限于JSBridge通信。
2025-12-17 11:53:30
818
原创 低代码开发之道
低代码技术解析与应用指南 低代码是一种通过配置化方式构建应用的技术，将业务通用模式抽象为可配置模型（Schema/DSL），实现"模型驱动UI"。相比传统开发，低代码能显著提升效率，固化业务规则，降低认知成本。它适用于表单系统、后台CRUD、数据仪表盘等场景，但不适合游戏、高复杂度交互等特殊需求。 低代码平台由三大核心组成：领域模型（Schema）、渲染引擎和可视化编辑器。前端工程师需掌握JSON Schema、动态组件渲染、拖拽实现等关键技术，并了解主流框架如Amis、LowCodeE
2025-12-01 18:40:19
1035
原创 Web3 基于区块链的下一代互联网（科普）
Web3是基于区块链的下一代互联网，其核心特征包括去中心化、用户自持身份、可验证性和抗审查等。Web3的三大支柱是加密资产、区块链和智能合约，关键形态涵盖钱包、DeFi、NFT、DAO和GameFi。在技术架构上，Web3将传统后端的很大部分功能交给智能合约和区块链处理，形成了"跨前端+链上后端"的全栈模式。Web3前端工程师需要掌握钱包交互、智能合约调用等新技能，而后端则演变为数据服务和链下基础设施。智能合约成为新的"硬核后端"，Web3全栈工程师（前端+Solid
2025-11-30 09:34:58
1514
原创 CI 和 CD（持续集成 & 持续交付/部署）
本文系统介绍了CI/CD在前端开发中的应用与必要性。首先解析了CI（持续集成）和CD（持续交付/部署）的核心概念和工作流程，CI确保代码自动构建和测试，CD实现自动部署。文章指出CI/CD能提高效率、减少错误、保证质量，是现代开发的必备技能。重点推荐了前端常用的CI/CD工具如GitHub Actions、Vercel等，并详细说明了前端项目从构建到部署的完整自动化流程，包括环境管理、版本回滚等关键环节。最后提供了前端CI/CD的学习路径，强调掌握自动化构建、测试和部署等核心技能对开发者的重要性。
2025-11-29 13:43:45
1431
原创 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
1136
原创 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
944
原创 Fastify 深入浅出的学习
Fastify是一个高性能的Node.js Web框架，专注于开发者体验和性能优化。它具有插件机制、内置Schema校验、优秀的TypeScript支持等特点，适用于API服务、微服务等场景。核心功能包括请求/响应API、JSON Schema校验、生命周期钩子、装饰器和封装机制。Fastify通过fast-json-stringify优化序列化性能，建议使用Schema驱动开发并合理组织项目结构。文档还提供了TypeScript集成指南、性能优化建议以及分层架构的最佳实践，帮助开发者构建高效可靠的Web应
2025-11-26 19:18:56
981
原创 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
962
原创 Zustand 学习
摘要：Zustand是一个轻量级React状态管理库，基于订阅模式，提供简洁的Hooks API。核心优势包括细粒度订阅、无Provider设计、低性能开销，适合中小型应用或替代Context/Redux的简单场景。支持中间件扩展（如devtools、持久化）。通过选择器优化渲染性能，推荐拆分模块化store。与React Query协同时，Zustand管理UI状态，服务器状态交由专用库。性能优于Redux，但复杂中间件或时间旅行需求仍建议使用Redux。
2025-11-21 14:14:11
777
原创 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
817
原创 React 系统的梳理
Vue 官网这样说：渐进式 JavaScript 框架。易学易用，性能出色，适用场景丰富的 Web 前端框架。React 官网这样说：React 用于构建 Web 和原生交互界面的库。React 更像是一个 UI 渲染框架（——数据驱动视图），React 需要依赖强大的第三方库，这使得 React 更加灵活，但也更加混乱。Vue 更像一个系统框架，因为 Vue 内置了UI + 反应式 + 数据流 + 模板引擎的一体化的官方解决方案，这使得 Vue 的更加规范且清晰，而 React 没有。
2025-11-15 14:06:24
945
1
原创 vite里的Rollup打包配置
本文介绍了Vite项目中通过build.rollupOptions自定义Rollup打包配置的方法。主要内容包括基础配置中的external（忽略外部依赖）、input（入口文件设置）和output（输出配置），以及进阶配置中的assetFileNames（静态资源命名规则）。文章详细说明了各项参数的取值方式和使用场景，并提供了代码示例，如多入口配置、动态生成入口文件等。还介绍了输出格式（amd/cjs/es/iife/umd/system）的选择和全局变量映射等高级用法，帮助开发者根据项目需求灵活定制打包
2024-08-22 14:21:56
8981
2
原创 一些图表的实现
本文对比了主流前端图可视化库（G6、Cytoscape.js、Relation-Graph等）的适用场景和核心能力。通过详细对比表格展示了各库在图可视化、大图性能、布局质量、交互能力等方面的差异，并提供了快速选型建议：G6适合专业关系图，Cytoscape.js擅长科研网络图，Relation-Graph是Vue项目快速实现关系图的首选。文章还包含各库的官网链接和典型代码示例，为开发者提供一站式选型参考。
2024-08-09 16:40:53
1028
原创 单点登录（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
1227
原创 网格布局 Grid
grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。Grid 布局远比 Flex 布局强大。
2023-12-16 18:15:51
15935
原创 iframe 使用心得
本文全面介绍了HTML中的<iframe>元素，包括其工作原理、基本语法、跨源通信、使用场景、安全性考量和性能优化。<iframe>允许在当前页面内嵌入外部资源，通过隔离环境实现跨页面展示。文章详细讲解了postMessage实现跨源通信的方法，并列举了嵌入视频/地图、支付页面等典型应用场景。在安全方面，建议使用sandbox属性、X-Frame-Options和CSP策略进行防护。性能优化部分提出了延迟加载、srcdoc内联内容、重用iframe等技巧。最后总结了限制权限、避免过度
2023-07-16 23:55:27
589
原创 前端缓存 & 浏览器存储
前端缓存 一般用于缓存一些不常修改的常量数据或一些静态资源文件。大部分接口请求的数据都缓存在了服务端，方便统一管理缓存数据。前端做缓存的必要性：可以缓解服务端的压力，减少带宽的占用，同时也可以提升前端的查询性能。浏览器缓存和HTTP 缓存。
2022-11-22 20:13:16
4594
原创 前端性能优化之道
前端性能优化指南 核心优化思路 理解浏览器工作原理：掌握渲染流程、进程线程机制对性能的影响 精准性能分析：使用Lighthouse、PageSpeed Insights等工具获取性能报告 针对性优化：通过Chrome DevTools定位性能瓶颈 关键优化指标 FP/FCP（首次绘制/内容绘制） LCP（最大内容渲染） CLS（布局偏移） TTI（可交互时间） FID（输入延迟） 主要优化策略 网络优化： 使用CDN加速 DNS预解析 减少TCP连接 资源加载优化： 预加载关键资源 懒加载非关键资源 合理使
2021-10-15 15:27:34
565
1
原创 微前端架构
微前端架构实践指南 微前端是一种将前端拆分为多个独立微应用的前端架构模式，每个应用可独立开发、部署和运行，最终由壳应用组合成统一体验。其核心理念是将后端微服务的优势带到前端，适用于超大型后台系统、多团队协作开发等场景，但不适合小型项目或移动端高性能需求。 主流实现方案包括： iframe（简单但性能差） single-spa（经典方案） Qiankun（国内最流行） Webpack模块联邦（新潮高性能） single-spa作为微前端运行时内核，通过生命周期管理(bootstrap/mount/unmoun
2021-10-09 12:01:52
431
原创 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
1237
原创 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
15489
6
原创 git 基础知识
一、git 有三个分区工作区：就是你在电脑里能看到的目录（代码编辑区）。 暂存区：一般存放在 ".git目录下" 下的index文件中（过渡层，避免误操作）。 版本库：工作区有一个隐藏目录.git （本地仓库，专门控制版本）。另外还有一个远程仓库：比如GitHub上的库。他们之间的关系如下：二、git 的常用命令1、克隆—git clone从远程仓库克隆代......
2020-02-18 19:48:30
9795
2
原创 git 安装教程
本文提供了Git在不同操作系统下的安装指南。Windows用户可通过官网下载.exe文件安装，MacOS推荐使用Homebrew安装，Linux用户可使用系统包管理器（如apt/dnf/yum）安装。安装后需配置用户名和邮箱，并通过git --version验证安装。常见问题包括PATH设置错误导致命令未找到，建议重启终端解决。安装完成后即可使用Git进行版本控制操作。
2026-03-09 09:42:18
448
原创 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
394
原创 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
676
原创 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
850
原创 Vue3 的状态管理
Vue状态管理采用分层设计：组件局部状态（ref/reactive）、组件通信状态（props/emit、provide/inject）和全局状态（Pinia）。Pinia作为Vue官方推荐的状态管理方案，具有类型支持、模块化和DevTools集成等优势，适合中大型项目。对于小型应用，可使用组合式API+单例状态；大型系统可结合领域拆分、持久化插件和微前端架构。Event Bus（如mitt）仅适用于事件通知而非状态管理，应与Pinia配合使用。技术选型建议：小工具用reactive单例，常规业务用Pini
2026-02-11 00:11:04
951
原创 Vue 实例详解
Vue实例创建的本质是启动一个完整的UI运行时系统，包括组件实例、响应式作用域、渲染副作用和生命周期调度。Vue3通过createApp创建应用实例后，mount阶段才会真正启动渲染。核心流程包括：创建组件实例对象（内存形态）、初始化组件内容（处理Options API或Composition API）、建立响应式渲染副作用（实现自动更新机制）。整个过程创建了5个核心系统：组件实例对象、响应式状态系统、渲染函数、渲染副作用effect和生命周期调度器。Vue实例实质上是一个能自动追踪依赖并触发UI更新的智能
2026-02-09 20:49:40
692
原创 Vue 组件的生命周期
Vue2与Vue3生命周期对比摘要：Vue3在Options API中保留了Vue2的生命周期概念，但命名更语义化（如beforeDestroy改为beforeUnmount），并新增调试钩子renderTracked/renderTriggered。Composition API通过setup()函数取代beforeCreate/created阶段，以onMounted等函数形式注册生命周期，支持逻辑复用且不依赖this。Vue3的生命周期设计更符合组合式思想，提供更好的类型推导支持，同时保持与Optio
2026-02-09 18:55:56
651
原创 Vue3 渲染调度机制（异步更新）
Vue3的渲染调度机制通过队列化和异步批处理优化了组件更新性能。核心机制包括：1) 使用队列存储更新任务并进行去重；2) 通过微任务异步执行批量更新；3) 维护pre和post两类副作用队列控制执行时机；4) 按组件创建顺序排序确保父子组件更新顺序正确。该机制解决了频繁重渲染、更新顺序错乱等问题，同时nextTick本质是等待当前批处理完成的微任务。整个流程为：数据变更→入队→微任务触发→执行pre队列→组件更新→执行post队列，实现高效且可预测的UI更新。
2026-02-09 14:34:16
1210
原创 Vue3 的组件运行机制
Vue3 组件运行机制解析：从创建到销毁的完整生命周期 Vue3 组件运行机制是一个完整的闭环流程，包含组件从创建到销毁的全过程。核心流程为：创建组件实例 → 初始化props/slots → 执行setup() → 建立响应式effect → 首次render挂载 → 响应式数据变化触发更新 → 重新render → 最终卸载。 关键机制在于：1）通过effect将组件变为响应式副作用；2）数据变化触发trigger，调度器批量更新；3）patch阶段采用虚拟DOM Diff算法高效更新UI，包括组件递归
2026-02-09 11:42:55
934
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人