微前端深度实践
在微前端架构从“跑通”走向“生产级”的过程中，单纯的嵌入只是第一步。要构建一个健壮的系统，我们必须解决通信闭环、状态保持、路由接管、资源路径这四个核心问题。 以下是针对 React 场景的深度实践技巧和完整代码配置。 二、 路由接管与 B…
1231 字5 分钟
前端开发 / 工程化Obsidian
载入中...
载入中...
共 200 篇文章
在微前端架构从“跑通”走向“生产级”的过程中，单纯的嵌入只是第一步。要构建一个健壮的系统，我们必须解决通信闭环、状态保持、路由接管、资源路径这四个核心问题。 以下是针对 React 场景的深度实践技巧和完整代码配置。 二、 路由接管与 B…
第一部分：现有框架主题色逻辑深度解析 通过对 ThemeColor.tsx、UseProvider.tsx 及 actions 代码的分析，该框架采用的是 “动态 CSS 编译 + 分布式状态同步” 模式。 1. 核心流程架构图 代码段 …
本文将通过代码精简、核心流程图解和深度原理解析三个维度，带你彻底搞懂 React 与 G6 的协同工作机制。 我们剥离掉样式细节（颜色、阴影、具体的坐标计算），只保留数据流和控制流的核心骨架。 第二部分：核心流程图 Mermaid 这张图…
使用 G6 绘制流程图（Flowchart）或架构图（Architecture Diagram），与绘制社交网络图（力导向图）的逻辑完全不同。 社交网络图追求的是“节点不重叠，看着均匀”；而流程图和架构图追求的是“层级分明、方向统一、模块嵌…
要彻底搞懂 AntV G6，不能只看 API 文档（因为它的文档在 v4 和 v5 之间有巨大的断层，容易让人迷失），而必须建立起一套“图可视化引擎”的底层思维模型。 G6 的本质不是“画图工具”，而是一个关系数据的渲染与交互引擎。它的核心…
Vue 3 并不是 Vue 2 的简单升级，它在核心层面进行了重大的重新设计，旨在解决 Vue 2 在大规模应用、性能瓶颈和类型支持方面遇到的问题。 用一句话总结：Vue 3 在保持 Vue 2 易用性的基础上，通过全新的底层（响应式系统、…
Vue 的插槽（Slot）机制是其组件化系统真正的精髓之一，它解决了“内容分发”的核心问题。彻底理解它，对构建可复用、高灵活性的组件至关重要。 我们来从“为什么需要插槽”开始，一步步拆解它的用法、原理，以及 Vue 2 和 3 的演进。 …
本文档旨在解析一个基于 React 的交互功能：用户在一段不可编辑的文本内容上，通过鼠标划词选中，将选中的文本添加为一个“关键词”，并使该段落中所有与关键词匹配的文本都高亮显示。 此功能的核心在于巧妙地结合了浏览器原生 API、React …
我们来系统且深入地讲清楚 Dockerfile 中最常用的命令。 Dockerfile 是一个文本文档，它包含了用户在命令行上可以调用来组合成一个镜像的所有命令。它本质上是构建 Docker 镜像的“蓝图”或“食谱”。理解它的核心命令是高效…
将 React 项目打包成 Docker 镜像并推送到 Harbor 仓库，主要分为三个步骤： 1. 创建 React 项目的 Dockerfile：定义如何构建镜像。 2. 构建 Docker 镜像：在本地根据 Dockerfi…
好的，我们来系统性、深入地梳理 TypeScript 在面试中可能遇到的所有核心考点。 这不仅仅是一份“题库”，而是一套从“是什么”到“为什么”再到“怎么用”的完整知识体系。我会遵循第一性原理，从 TypeScript 要解决的根本问题出发…