- 博客(451)
- 收藏
- 关注
RSS订阅
原创 js 数据结构
本文系统梳理了前端开发中的数据结构体系，主要内容包括： 前端数据结构体系：不仅限于JS原生结构，还包括抽象数据结构（栈/队列/树等）、框架内部结构（VDOM/Fiber）、浏览器结构（DOM树）和数据模型设计。 主流框架数据结构对比：详细分析了React（链表+优先队列）、Vue（树+图）、Solid（图）和Svelte（编译期结构）等框架的核心数据结构差异，揭示了不同框架的设计哲学。 JS数据结构全景：梳理了JS原生数据结构（Array/Object/Map/Set）和常见抽象数据结构的实现方式、复杂度及
2025-12-23 20:03:53
851
原创 前端沙箱机制
前端沙箱机制是一种隔离技术，用于在浏览器中安全运行不可信代码而不影响宿主应用。其核心目标包括隔离（避免污染主应用）、限制（控制API访问）和监控（审计行为）。常用技术包括iframe（最强隔离）、Proxy+with（微前端常用）、ShadowRealm（未来标准）、AST编译限制和WASM等。典型应用场景涵盖微前端、低代码平台、在线代码运行、第三方脚本隔离等。需要注意的是，非iframe沙箱存在被突破风险，构建安全级沙箱需组合多种方案。随着前端复杂度的提升，沙箱技术成为保障应用安全的关键机制。
2025-12-04 19:48:16
604
原创 低代码开发之道
低代码技术解析与应用指南 低代码是一种通过配置化方式构建应用的技术，将业务通用模式抽象为可配置模型（Schema/DSL），实现"模型驱动UI"。相比传统开发，低代码能显著提升效率，固化业务规则，降低认知成本。它适用于表单系统、后台CRUD、数据仪表盘等场景，但不适合游戏、高复杂度交互等特殊需求。 低代码平台由三大核心组成：领域模型（Schema）、渲染引擎和可视化编辑器。前端工程师需掌握JSON Schema、动态组件渲染、拖拽实现等关键技术，并了解主流框架如Amis、LowCodeE
2025-12-01 18:40:19
915
原创 Web3 基于区块链的下一代互联网（科普）
Web3是基于区块链的下一代互联网，其核心特征包括去中心化、用户自持身份、可验证性和抗审查等。Web3的三大支柱是加密资产、区块链和智能合约，关键形态涵盖钱包、DeFi、NFT、DAO和GameFi。在技术架构上，Web3将传统后端的很大部分功能交给智能合约和区块链处理，形成了"跨前端+链上后端"的全栈模式。Web3前端工程师需要掌握钱包交互、智能合约调用等新技能，而后端则演变为数据服务和链下基础设施。智能合约成为新的"硬核后端"，Web3全栈工程师（前端+Solid
2025-11-30 09:34:58
1040
原创 CI 和 CD（持续集成 & 持续交付/持续部署）
本文系统介绍了CI/CD在前端开发中的应用与必要性。首先解析了CI（持续集成）和CD（持续交付/部署）的核心概念和工作流程，CI确保代码自动构建和测试，CD实现自动部署。文章指出CI/CD能提高效率、减少错误、保证质量，是现代开发的必备技能。重点推荐了前端常用的CI/CD工具如GitHub Actions、Vercel等，并详细说明了前端项目从构建到部署的完整自动化流程，包括环境管理、版本回滚等关键环节。最后提供了前端CI/CD的学习路径，强调掌握自动化构建、测试和部署等核心技能对开发者的重要性。
2025-11-29 13:43:45
1176
原创 Docker 的使用说明
Docker是一个容器化工具，可将软件及其运行环境打包成镜像，实现"一次构建，到处运行"。核心概念包括镜像（软件安装包）、容器（运行实例）和Dockerfile（镜像构建说明书）。相比传统部署方式，Docker解决了环境不一致、依赖冲突等问题，使部署更简单可靠。前端应用场景广泛：部署静态资源、Node服务、快速搭建开发环境等。随着全栈趋势，掌握Docker已成为前端开发者必备技能，能显著提升部署效率和运维能力。
2025-11-28 21:47:18
714
原创 使用 node.js 的心得
Node.js核心概念与关键组件摘要 Node.js是基于V8引擎和libuv的JavaScript运行时，采用单线程事件循环模型实现高并发I/O处理。其核心架构包含： 事件循环机制：通过libuv实现非阻塞I/O调度，支持数万并发连接 多组件协同： V8引擎执行JS代码 线程池处理CPU密集型任务 Buffer和Stream处理二进制数据流 核心优势： 事件驱动架构（EventEmitter） 异步I/O模型 轻量级网络栈实现 生态体系：通过npm管理庞大的模块生态系统 适用场景包括API服务、实时应用、
2025-11-25 23:13:46
1092
原创 Tailwind 学习
Tailwind CSS 实用指南 Tailwind CSS 是一款革命性的原子化 CSS 框架，通过"Utility-first"的设计理念彻底改变了前端样式开发方式。与传统框架不同，Tailwind 提供原子化类名(如p-4、flex)而非预置组件样式，让开发者能自由组合构建个性化UI。 核心优势包括： 消除CSS污染，提高可维护性 高度可定制化，支持设计系统统一管理 工程友好，自动实现Tree-shaking 完美适配主流前端框架 学习路径建议从Layout、Typography等
2025-11-19 21:51:08
737
原创 前端开发者如何拥抱 AI-Agent（科普）
在人工智能领域，Agent 到底扮演着什么角色？层级核心能力特点举例AI（模型层）推理、语言理解、生成只能“说”，不会主动执行Agent（行动层）调用工具、执行多步任务会自动完成一个任务链Multi-Agent System / Orchestrator（协作层）多 Agent 协作、任务分发、资源调度像“公司调度中心”，管理多 Agent，实现复杂目标AutoGPT + Worker 集群、LangGraphAutonomous System / AI-native 应用（生态层）
2025-11-18 23:06:41
760
原创 新视角看 js 的数据类型
JavaScript数据类型分为基本类型和引用类型两大部分。基本类型包括Number、BigInt、String、Boolean、Symbol、Undefined和Null共7种，存储在栈内存中且不可变。引用类型则包含Object、Function、Array等所有对象类型，存储在堆内存中且可变。ES16新增了Iterator和AsyncIterator等引用类型，同时提供了Map、Set等结构化数据容器以及Promise、Generator等异步相关类型。值得注意的是，typeof null返回"
2025-11-13 00:08:04
1089
原创 必会利器：scp 命令
scp 命令是 Secure Copy Protocol（安全复制协议）的缩写，用于在本地和远程主机之间或者两台远程主机之间安全地复制文件。PuTTY：Windows 用户可以通过安装 PuTTY 工具包来使用类似功能的命令（如 pscp）来实现安全文件传输。如果远程服务器使用非默认的 SSH 端口（默认是 22），可以使用 -P 参数指定端口。-P：指定 SSH 连接的端口（注意是大写的 P，因为小写的 -p 用于保留文件属性）。如果你使用公钥认证而非密码，scp 会自动使用你本地的 SSH 密钥。
2025-05-29 15:31:13
848
原创 一些图表的实现
本文对比了主流前端图可视化库（G6、Cytoscape.js、Relation-Graph等）的适用场景和核心能力。通过详细对比表格展示了各库在图可视化、大图性能、布局质量、交互能力等方面的差异，并提供了快速选型建议：G6适合专业关系图，Cytoscape.js擅长科研网络图，Relation-Graph是Vue项目快速实现关系图的首选。文章还包含各库的官网链接和典型代码示例，为开发者提供一站式选型参考。
2024-08-09 16:40:53
899
原创 Nginx 安装与实践
在本地通过 Nginx 运行项目后，很想查看项目的运行日志，于是我们先来了解下查看日志的 Linux 命令。推荐使用 HomeBrew 来安装 Nginx。
2024-04-06 12:32:14
1266
原创 前端性能优化之道
前端性能优化指南 核心优化思路 理解浏览器工作原理：掌握渲染流程、进程线程机制对性能的影响 精准性能分析：使用Lighthouse、PageSpeed Insights等工具获取性能报告 针对性优化：通过Chrome DevTools定位性能瓶颈 关键优化指标 FP/FCP（首次绘制/内容绘制） LCP（最大内容渲染） CLS（布局偏移） TTI（可交互时间） FID（输入延迟） 主要优化策略 网络优化： 使用CDN加速 DNS预解析 减少TCP连接 资源加载优化： 预加载关键资源 懒加载非关键资源 合理使
2021-10-15 15:27:34
502
1
原创 微前端架构讲解
1、什么是微前端？一种由独立交付的多个前端应用组成整体的架构风格。具体的，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。2、微前端的特点：简单、松耦合的代码库：代码库更小，更内聚、可维护性更高增量升级：渐进地升级、更新甚至重写部分前端功能成为了可能。在逐步重构的同时，既要确保中间版本能够平滑过渡，同时还要持续交付新特性。先让新旧代码和谐共存，再逐步转化旧代码，直到整个重构完成。这种增量升级的能力意味着我们能够对产品功能进行低风险的局部替换，包括
2021-10-09 12:01:52
342
原创 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
15410
6
原创 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
359
原创 uni-app 全面深入的解读
uni-app是基于Vue的跨端开发框架，通过编译器将一套代码适配到H5、小程序、App等多端。其核心原理是编译时生成各平台原生代码，结合Vue响应式系统实现跨端渲染。技术架构包含Vue层、编译器、跨端运行时和原生桥接，通过条件编译隔离平台差异。开发者使用统一的Vue语法和uni组件/API，最终生成不同平台代码。uni-app适合需要快速覆盖多端的项目，尤其在小程序和H5场景优势明显，但App端性能受限于JSBridge通信。
2025-12-17 11:53:30
734
原创 主流 AI 应用的“流式技术”的探索交流
本文探讨了AI Agent中流式输出的必要性及其技术实现。文章指出，主流AI Agent采用切片分段输出是由于大模型天生流式生成、Agent长期运行特性、执行路径不可预期等因素决定的。文中详细分析了六种常见的流式技术（LLM Token Streaming、HTTP Chunked、SSE、WebSocket、Async Generator、Message Stream），比较了它们的优缺点和适用场景。特别强调了ReadableStream作为标准承载体在流式分层模型中的关键作用，它能将异步产出转化为标准流
2025-12-14 23:45:05
778
1
原创 Monaco Editor 的使用与二次开发
Monaco Editor 是一个功能强大的代码编辑器，本文总结了其快速上手方法和常用功能。主要内容包括：安装方法、核心代码模板、20个常用配置项（布局、编辑、高亮等）、常用API操作（主题设置、内容编辑、快捷键、搜索查找等）、以及自定义语言支持。文章提供了丰富的代码示例，涵盖编辑器设置、内容操作、模型管理等实用技巧，适合开发者快速掌握Monaco Editor的核心功能。
2025-12-05 20:05:10
718
原创 油猴（Tampermonkey）开发“攻防一体化”
Tampermonkey是一款强大的浏览器用户脚本管理器，允许开发者通过JS/CSS修改网页内容、拦截请求或实现自动化操作。本文介绍了其核心功能，包括脚本结构、运行时机、常用API（如跨域请求GM_xmlhttpRequest、持久化存储GM_setValue等）以及开发技巧。重点讲解了DOM操作、UI注入、请求拦截等实战场景，并提供了工程化开发建议，帮助前端开发者高效定制浏览器功能。通过Tampermonkey，开发者无需插件即可实现复杂的网页定制需求。
2025-12-01 22:55:31
888
原创 React + Fastify + DeepSeek 实现一个简单的对话式 AI 应用
本文介绍了一个基于React前端和Fastify后端的DeepSeek API集成方案。系统采用三层架构：前端负责用户交互，后端作为API代理保护密钥，DeepSeek提供LLM对话、图像识别和文本向量生成三大核心能力。文章详细说明了三种API的调用流程（对话、图像问答、文本向量），并提供了完整的Fastify后端实现代码和React前端示例。该方案遵循API密钥不暴露在前端的原则，支持消息和图像的统一处理，并预留了向量检索(RAG)的扩展空间。
2025-11-28 23:09:46
905
原创 Vue + Express + DeepSeek 实现一个简单的对话式 AI 应用
本文介绍了如何基于DeepSeek API构建多模态AI应用的关键思路和实现方案。主要内容包括： 安全架构设计：建议通过轻量后端代理API调用，避免前端直接暴露密钥 核心功能模块： LLM聊天生成 视觉理解(图片分析、OCR等) 向量检索(RAG) 技术实现： 提供Node/Express后端示例代码，展示API代理、多模态处理流程 包含Vue3前端组件框架 系统架构图：展示前后端协作流程 关键注意事项：模型选择、安全实践等 该方案充分利用DeepSeek的OpenAI兼容接口和视觉语言模型能力，实现文本+
2025-11-28 21:50:14
1053
原创 Express 深入浅出的学习
Express是一个基于Node.js的极简灵活且高可扩展的Web框架，仍然是企业级应用中最成熟的Node Web框架。其核心设计思想是"万物皆中间件"，所有功能都通过中间件链实现。本文详细讲解了Express的核心API，包括服务创建、中间件机制、路由系统、请求体解析等，并提供了企业级项目结构的最佳实践。文章还涵盖JWT鉴权、CORS配置等进阶能力，以及性能优化、安全防护等企业级解决方案，最后总结了开发中的常见陷阱。通过Express可以深入理解HTTP、中间件和服务器架构的本质，为N
2025-11-28 21:45:49
607
原创 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
961
原创 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
830
原创 Fastify 深入浅出的学习
Fastify是一个高性能的Node.js Web框架，专注于开发者体验和性能优化。它具有插件机制、内置Schema校验、优秀的TypeScript支持等特点，适用于API服务、微服务等场景。核心功能包括请求/响应API、JSON Schema校验、生命周期钩子、装饰器和封装机制。Fastify通过fast-json-stringify优化序列化性能，建议使用Schema驱动开发并合理组织项目结构。文档还提供了TypeScript集成指南、性能优化建议以及分层架构的最佳实践，帮助开发者构建高效可靠的Web应
2025-11-26 19:18:56
864
原创 Electron + React + Vite 实践
本文介绍了使用Vite构建Electron+React应用的开发方案。主要内容包括：1) Electron主进程与预加载脚本的配置，强调通过contextBridge安全桥接通信；2) React组件通过预加载API与主进程交互的实现；3) 使用electron-builder进行跨平台打包的配置要点；4) 开发中的注意事项，如避免直接Node集成、正确处理路径差异等。相比CRA方案，Vite提供了更快的HMR和ESM支持，更适合现代Electron开发。
2025-11-23 18:52:47
186
原创 Electron + Vue 3 + Vite 实践
本文介绍了Electron与Vue 3的集成开发方案。项目采用Vite作为构建工具，通过electron-builder实现跨平台打包。主进程通过BrowserWindow加载Vue应用，使用preload.ts脚本桥接安全通信。Vue组件通过预暴露的API与Electron交互，避免直接使用Node API。文章详细说明了项目结构、开发环境配置、打包流程，并强调了安全注意事项，包括禁用Renderer的Node集成、正确使用路径处理等。同时提供了多窗口优化建议，为Electron+Vue开发提供了完整的解
2025-11-23 18:37:25
156
原创 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
827
原创 Jotai 学习
Jotai是一个基于原子模型的React状态管理库，提供极简API和细粒度订阅能力。核心概念包括atom创建状态单元、useAtom读写状态、Provider隔离状态容器。支持派生状态、异步操作、存储持久化等增强功能，通过原子组合实现复杂状态逻辑。相比Redux等方案，Jotai更轻量、与React Hooks自然契合，适合需要细粒度渲染优化的场景。其设计理念强调小而可组合，将状态拆分为最小粒度原子，使组件仅订阅所需状态变更，实现极致性能优化。
2025-11-22 23:21:36
130
原创 Zustand 学习
摘要：Zustand是一个轻量级React状态管理库，基于订阅模式，提供简洁的Hooks API。核心优势包括细粒度订阅、无Provider设计、低性能开销，适合中小型应用或替代Context/Redux的简单场景。支持中间件扩展（如devtools、持久化）。通过选择器优化渲染性能，推荐拆分模块化store。与React Query协同时，Zustand管理UI状态，服务器状态交由专用库。性能优于Redux，但复杂中间件或时间旅行需求仍建议使用Redux。
2025-11-21 14:14:11
90
原创 React 的路由（React Router / RSC + 文件路由）
React Router v6+ 采用现代化设计理念，将路由声明与UI组件结合，支持嵌套路由、动态参数和高效导航。相比v5版本，v6优化了路由匹配机制，引入数据加载器和动作处理功能，提升开发体验。传统SPA路由存在首次加载慢、数据瀑布等问题，而React Router v6+通过loader/action机制部分缓解了这些痛点。不过它仍属于客户端路由，与新兴的RSC+文件路由（如Next.js）相比，在首屏性能、SEO等方面存在差距。未来React官方推荐Server-first路线，但React Rout
2025-11-21 11:26:04
124
原创 React 性能优化
本文系统总结了React性能优化实践方法。核心要点包括：1）通过Web Vitals工具定位性能瓶颈（LCP、FID/INP、CLS）；2）遵循"先测量后修复"原则，重点优化首屏和交互流畅度；3）采用现代React技术栈组合（RSC、并发特性、数据缓存等）；4）避免常见性能陷阱，如不必要的重渲染、不稳定引用、错误状态管理等。文章详细列举了12项关键优化技巧，包括列表渲染优化、useMemo/useCallback的正确使用、组件拆分策略等，并强调应根据具体场景选择合适方案。
2025-11-19 19:08:10
796
原创 RTK（Redux Toolkit） 学习
Redux Toolkit (RTK) 通过简化 Redux 的复杂样板代码，提供了一套现代化的状态管理方案。其核心模块包括： createSlice - 自动生成 action types 和 reducers，内置 Immer 实现不可变数据； createAsyncThunk - 统一管理异步请求的状态； configureStore - 自动配置最佳实践。 RTK Query 提供强大的服务器状态管理能力，可替代传统数据请求库。在企业项目中，推荐采用模块化架构组织代码。根据场景不同，可选择： RTK
2025-11-17 00:17:35
779
原创 react 的状态管理
本文系统梳理了React状态管理的四大层级及应用场景：1)局部UI状态(useState) 2)组件级业务状态(useReducer) 3)跨组件共享(Context) 4)应用级状态(Zustand/Redux)。重点分析了React内置状态管理的进阶用法，指出Context易被误用的问题，并对比推荐了第三方状态管理方案：Zustand简单高效、Jotai适合原子化状态、Redux Toolkit适用于大型企业应用。文章还探讨了React 19及RSC技术对状态管理的影响，最后根据不同应用规模给出了选型建
2025-11-16 22:41:50
691
原创 TanStack Query 的 React Query 学习
本文介绍了React Query的安装注册和使用方法。主要内容包括：1）通过npm安装@tanstack/react-query并在入口文件配置QueryClientProvider；2）使用useQuery获取服务器状态数据并处理加载和错误状态；3）使用useMutation实现新增和删除数据操作，包括自动刷新列表和乐观更新功能；4）组件组合示例。文章还对比了React Query的适用场景（管理服务器状态、缓存、自动刷新等）和不适用场景（本地UI状态、表单状态等）。通过Todo列表示例，展示了React
2025-11-16 22:33:25
413
原创 react 学习
Vue 官网这样说：渐进式 JavaScript 框架。易学易用，性能出色，适用场景丰富的 Web 前端框架。React 官网这样说：React 用于构建 Web 和原生交互界面的库。React 更像是一个 UI 渲染框架（——数据驱动视图），React 需要依赖强大的第三方库，这使得 React 更加灵活，但也更加混乱。Vue 更像一个系统框架，因为 Vue 内置了UI + 反应式 + 数据流 + 模板引擎的一体化的官方解决方案，这使得 Vue 的更加规范且清晰，而 React 没有。
2025-11-15 14:06:24
884
1
原创 vite里的Rollup打包配置
在使用 vite 配置其 build 属性时，我们可以通过 build.rollupOptions 来自定义底层的 Rollup 打包配置（
2024-08-22 14:21:56
8565
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人