Runtime API Examples
This page demonstrates usage of some of the runtime APIs provided by VitePress.
The main useData() API can be used to access site, theme, and page data for the current page. It works in both .md and .vue files:
md
<script setup>
import { useData } from 'vitepress'
const { theme, page, frontmatter } = useData()
</script>
## Results
### Theme Data
<pre>{{ theme }}</pre>
### Page Data
<pre>{{ page }}</pre>
### Page Frontmatter
<pre>{{ frontmatter }}</pre>Results
Theme Data
{
"sidebar": [
{
"text": "索引大纲",
"link": "/src/_01_索引大纲"
},
{
"text": "_01_面试准备与自我介绍",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "个人信息与技术背景简介",
"link": "/src/_01_面试准备与自我介绍/_01_基础/_01_个人信息与技术背景简介"
},
{
"text": "项目经验梳理方法",
"link": "/src/_01_面试准备与自我介绍/_01_基础/_02_项目经验梳理方法"
},
{
"text": "技术栈关键词提炼技巧",
"link": "/src/_01_面试准备与自我介绍/_01_基础/_03_技术栈关键词提炼技巧"
},
{
"text": "自我介绍的黄金结构（1分钟版/3分钟版）",
"link": "/src/_01_面试准备与自我介绍/_01_基础/_04_自我介绍的黄金结构（1分钟版3分钟版）"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "项目难点与解决方案表达策略",
"link": "/src/_01_面试准备与自我介绍/_02_进阶/_01_项目难点与解决方案表达策略"
},
{
"text": "个人技术亮点挖掘方法",
"link": "/src/_01_面试准备与自我介绍/_02_进阶/_02_个人技术亮点挖掘方法"
},
{
"text": "职业规划与岗位匹配度表达",
"link": "/src/_01_面试准备与自我介绍/_02_进阶/_03_职业规划与岗位匹配度表达"
},
{
"text": "针对不同公司的自我介绍定制技巧",
"link": "/src/_01_面试准备与自我介绍/_02_进阶/_04_针对不同公司的自我介绍定制技巧"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "面试官视角：自我介绍中的加分项识别",
"link": "/src/_01_面试准备与自我介绍/_03_高阶/_01_面试官视角：自我介绍中的加分项识别"
},
{
"text": "压力面试中的自我介绍调整策略",
"link": "/src/_01_面试准备与自我介绍/_03_高阶/_02_压力面试中的自我介绍调整策略"
},
{
"text": "跨领域项目经验的技术转化表达",
"link": "/src/_01_面试准备与自我介绍/_03_高阶/_03_跨领域项目经验的技术转化表达"
},
{
"text": "高级工程师/架构师岗位的自我介绍侧重点",
"link": "/src/_01_面试准备与自我介绍/_03_高阶/_04_高级工程师架构师岗位的自我介绍侧重点"
}
]
}
]
},
{
"text": "_02_编码能力考查",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "express 洋葱模型",
"link": "/src/_02_编码能力考查/_01_基础/express洋葱模型"
},
{
"text": "npm依赖",
"link": "/src/_02_编码能力考查/_01_基础/npm依赖相关的问题"
},
{
"text": "react中的错误捕获",
"link": "/src/_02_编码能力考查/_01_基础/react中如何捕获组件中的错误"
},
{
"text": "_03_Map 和 Set 数据结构",
"link": "/src/_02_编码能力考查/_01_基础/_003_Map和Set"
},
{
"text": "_04_事件循环",
"link": "/src/_02_编码能力考查/_01_基础/_004_事件循环"
},
{
"text": "深浅拷贝",
"link": "/src/_02_编码能力考查/_01_基础/_005_深浅拷贝"
},
{
"text": "sort 排序手写",
"link": "/src/_02_编码能力考查/_01_基础/_006sort_"
},
{
"text": "filter 过滤手写",
"link": "/src/_02_编码能力考查/_01_基础/_007filter_"
},
{
"text": "async 判断",
"link": "/src/_02_编码能力考查/_01_基础/_008async_"
},
{
"text": "手写promise",
"link": "/src/_02_编码能力考查/_01_基础/_009my_promise_"
},
{
"text": "_01_Proxy",
"link": "/src/_02_编码能力考查/_01_基础/_01_Proxy"
},
{
"text": "_02_数据类型",
"link": "/src/_02_编码能力考查/_01_基础/_02_数据类型"
},
{
"text": "react 面试总结",
"link": "/src/_02_编码能力考查/_01_基础/_react面试总结"
},
{
"text": "页面白屏的判断",
"link": "/src/_02_编码能力考查/_01_基础/页面白屏"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "算法复杂度分析与优化方向",
"link": "/src/_02_编码能力考查/_02_进阶/_01_算法复杂度分析与优化方向"
},
{
"text": "代码可读性与可维护性平衡技巧",
"link": "/src/_02_编码能力考查/_02_进阶/_02_代码可读性与可维护性平衡技巧"
},
{
"text": "错误处理与异常捕获的最佳实践",
"link": "/src/_02_编码能力考查/_02_进阶/_03_错误处理与异常捕获的最佳实践"
},
{
"text": "编码题中的设计模式应用",
"link": "/src/_02_编码能力考查/_02_进阶/_04_编码题中的设计模式应用"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "大型应用中的编码规范制定",
"link": "/src/_02_编码能力考查/_03_高阶/_01_大型应用中的编码规范制定"
},
{
"text": "性能优先的编码策略",
"link": "/src/_02_编码能力考查/_03_高阶/_02_性能优先的编码策略"
},
{
"text": "团队协作中的编码风格统一方案",
"link": "/src/_02_编码能力考查/_03_高阶/_03_团队协作中的编码风格统一方案"
},
{
"text": "编码题中的架构思维体现",
"link": "/src/_02_编码能力考查/_03_高阶/_04_编码题中的架构思维体现"
}
]
}
]
},
{
"text": "_03_项目经验与问题解决",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "项目背景与职责描述模板",
"link": "/src/_03_项目经验与问题解决/_01_基础/_01_项目背景与职责描述模板"
},
{
"text": "技术选型理由表达框架",
"link": "/src/_03_项目经验与问题解决/_01_基础/_02_技术选型理由表达框架"
},
{
"text": "遇到的问题与解决方案结构",
"link": "/src/_03_项目经验与问题解决/_01_基础/_03_遇到的问题与解决方案结构"
},
{
"text": "个人贡献量化表达方法",
"link": "/src/_03_项目经验与问题解决/_01_基础/_04_个人贡献量化表达方法"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "技术难点突破过程的STAR表达法",
"link": "/src/_03_项目经验与问题解决/_02_进阶/_01_技术难点突破过程的STAR表达法"
},
{
"text": "跨团队协作问题的解决策略",
"link": "/src/_03_项目经验与问题解决/_02_进阶/_02_跨团队协作问题的解决策略"
},
{
"text": "项目性能优化案例分析框架",
"link": "/src/_03_项目经验与问题解决/_02_进阶/_03_项目性能优化案例分析框架"
},
{
"text": "技术债务识别与处理经验",
"link": "/src/_03_项目经验与问题解决/_02_进阶/_04_技术债务识别与处理经验"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "从0到1项目的架构设计思路",
"link": "/src/_03_项目经验与问题解决/_03_高阶/_01_从0到1项目的架构设计思路"
},
{
"text": "大型项目重构经验与教训",
"link": "/src/_03_项目经验与问题解决/_03_高阶/_02_大型项目重构经验与教训"
},
{
"text": "技术方案决策过程与权衡分析",
"link": "/src/_03_项目经验与问题解决/_03_高阶/_03_技术方案决策过程与权衡分析"
},
{
"text": "带领团队解决技术难题的经验",
"link": "/src/_03_项目经验与问题解决/_03_高阶/_04_带领团队解决技术难题的经验"
}
]
}
]
},
{
"text": "_04_核心技术栈考察",
"collapsed": true,
"items": [
{
"text": "_01_JavaScriptTypeScript",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "JS数据类型及检测方法",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_01_基础/_01_JS数据类型及检测方法"
},
{
"text": "原型链与继承基础",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_01_基础/_02_原型链与继承基础"
},
{
"text": "作用域与闭包概念",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_01_基础/_03_作用域与闭包概念"
},
{
"text": "TS基础类型与接口定义",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_01_基础/_04_TS基础类型与接口定义"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "异步编程模式（Promise/async-await）",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_02_进阶/_01_异步编程模式（Promiseasync-await）"
},
{
"text": "函数式编程概念与实践",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_02_进阶/_02_函数式编程概念与实践"
},
{
"text": "TS高级类型（泛型/条件类型/映射类型）",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_02_进阶/_03_TS高级类型（泛型条件类型映射类型）"
},
{
"text": "模块化方案演进（CommonJS/ES Module）",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_02_进阶/_04_模块化方案演进（CommonJSES Module）"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "V8引擎工作原理",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_03_高阶/_01_V8引擎工作原理"
},
{
"text": "内存泄漏排查与优化",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_03_高阶/_02_内存泄漏排查与优化"
},
{
"text": "TS类型系统设计模式",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_03_高阶/_03_TS类型系统设计模式"
},
{
"text": "大型项目JS架构设计原则",
"link": "/src/_04_核心技术栈考察/_01_JavaScriptTypeScript/_03_高阶/_04_大型项目JS架构设计原则"
}
]
}
]
},
{
"text": "_02_前端框架",
"collapsed": true,
"items": [
{
"text": "_01_React",
"collapsed": true,
"items": [
{
"text": "组件定义与使用方法",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_01_组件定义与使用方法"
},
{
"text": "Props与State管理",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_02_Props与State管理"
},
{
"text": "生命周期函数理解",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_03_生命周期函数理解"
},
{
"text": "事件处理机制",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_04_事件处理机制"
},
{
"text": "Hooks API使用与原理（useState/useEffect/useCallback）",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_05_Hooks API使用与原理（useStateuseEffectuseCallback）"
},
{
"text": "Context API与状态管理",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_06_Context API与状态管理"
},
{
"text": "React Router路由管理",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_07_React Router路由管理"
},
{
"text": "性能优化基础（memo/useMemo）",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_08_性能优化基础（memouseMemo）"
},
{
"text": "Fiber架构与协调算法",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_09_Fiber架构与协调算法"
},
{
"text": "Concurrent Mode与Suspense",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_10_Concurrent Mode与Suspense"
},
{
"text": "服务端渲染（SSR/SSG）实践",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_11_服务端渲染（SSRSSG）实践"
},
{
"text": "React源码关键实现分析",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_01_React/_12_React源码关键实现分析"
}
]
},
{
"text": "_02_Vue",
"collapsed": true,
"items": [
{
"text": "再探 Vue 实例与生命周期：从基础到实践",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_01_Vue实例与生命周期"
},
{
"text": "Vue模板语法：从插值到指令的优雅实践",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_02_模板语法与指令系统"
},
{
"text": "Vue组件：从定义到通信的完整指南",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_03_组件定义与通信方式"
},
{
"text": "计算属性与侦听器的区别及适用场景",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_04_计算属性与侦听器"
},
{
"text": "Vue响应式系统与计算属性缓存：从原理到实现",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_05_Vue响应式原理（数据劫持依赖收集）"
},
{
"text": "Vue组件高级特性：slot、mixin与自定义指令全解析",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_06_组件高级特性（slotmixincustom directive）"
},
{
"text": "Vuex与Pinia：Vue状态管理的两种范式",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_07_VuexPinia状态管理"
},
{
"text": "Vue Router高级用法与复杂路由场景实现",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_08_Vue Router高级用法"
},
{
"text": "Vue3 Composition API：从设计思想到实战价值",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_09_Vue3 Composition API设计思想"
},
{
"text": "Vue响应式系统的性能优化手段与避坑指南",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_10_响应式系统性能优化"
},
{
"text": "Vue编译优化：从模板到运行时的性能跃迁",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_11_Vue编译优化原理"
},
{
"text": "大型Vue应用的架构设计：可维护性与扩展性的实践指南",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_02_Vue/_12_大型Vue应用架构设计"
}
]
},
{
"text": "_13_React专题",
"collapsed": true,
"items": [
{
"text": "001react专题知识大纲",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/00目录索引"
},
{
"text": "01深入理解React Fiber算法：从卡顿根源到性能救赎",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/01react中的fiber算法"
},
{
"text": "02React性能优化实战：从卡顿到丝滑的修炼之路",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/02react性能优化"
},
{
"text": "03React使用技巧进阶：从\"能用\"到\"优雅\"的实战指南",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/03react使用技巧"
},
{
"text": "04React懒加载全解析：从实现到原理，再到浏览器中的表现",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/04react中如何实现懒加载"
},
{
"text": "05React渲染原理与虚拟DOM：从设计图到建筑的全过程解析",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/05react的渲染原理是什么"
},
{
"text": "06React Router 完全指南：从基础使用到实现原理",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/06react-router的基本使用与实现原理"
},
{
"text": "07Redux生态全解析：从基础到异步流管理",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/07redux、redux-thunk、redux-saga的基本使用与实现原理"
},
{
"text": "08一万条数据渲染方案全解析：从卡顿到丝滑的实战指南",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/08假设页面有一万条数据，如何进行渲染"
},
{
"text": "09MVC与MVVM：前端架构模式的演进与对比",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/09什么是MVC、MVVM"
},
{
"text": "10React组件类型及区别：从基础到进阶的组件分类指南",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/10React组件类型及区别"
},
{
"text": "11React Hooks核心知识点：从使用到原理的全面解析",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/11Hooks核心知识点"
},
{
"text": "12React状态管理深入：组件通信与状态更新机制解析",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/12状态管理深入"
},
{
"text": "13React事件系统：合成事件与事件冒泡的深度解析",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/13React事件系统"
},
{
"text": "14React的协调与渲染阶段：从虚拟DOM到真实DOM的桥梁",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/14协调（Reconciliation）与渲染（Commit）阶段"
},
{
"text": "15React错误边界（Error Boundary）：优雅处理组件渲染错误",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/15错误边界"
},
{
"text": "16Redux生态补充：中间件、对比与现代状态管理工具",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/16Redux生态补充"
},
{
"text": "17React Router进阶：路由守卫、模式与动态路由详解",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/17React-Router进阶"
},
{
"text": "18React渲染优化细节：避免不必要的重渲染",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/18渲染优化细节"
},
{
"text": "19资源加载优化",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/19"
},
{
"text": "20React项目构建工具",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/20React项目构建工具"
},
{
"text": "21TypeScript与React：类型安全的组件开发",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/21TypeScript与React"
},
{
"text": "22类组件与函数组件的对比及React测试实践",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/22测试相关"
},
{
"text": "React 18新特性：提升性能与开发体验的关键升级",
"link": "/src/_04_核心技术栈考察/_02_前端框架/_13_React专题/23React18新特性"
}
]
}
]
},
{
"text": "_03_工程化工具",
"collapsed": true,
"items": [
{
"text": "_01_Webpack",
"collapsed": true,
"items": [
{
"text": "Webpack工程初始化与配置文件结构：从基础到实战",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_01_工程初始化与配置文件结构"
},
{
"text": "Webpack四大核心概念：entry、output、loader、plugin深度解析",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_02_核心概念（entryoutputloaderplugin）"
},
{
"text": "常见Loader配置详解：babel-loader、CSS相关Loader与file-loader",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_03_常见Loader配置（babelcssfile）"
},
{
"text": "开发环境与生产环境配置分离：优化前端构建流程",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_04_开发环境与生产环境配置分离"
},
{
"text": "Webpack插件开发原理与实践：从入门到实战",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_05_插件开发原理与实践"
},
{
"text": "Webpack性能优化策略：缓存、分包与压缩全解析",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_06_性能优化策略（缓存分包压缩）"
},
{
"text": "Webpack构建流程优化与分析：从缓慢到高效的蜕变",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_07_构建流程优化与分析"
},
{
"text": "Webpack多页面应用配置方案：从结构到实践",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_08_多页面应用配置方案"
},
{
"text": "Webpack源码核心流程分析：从启动到输出的全解析",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_09_Webpack源码核心流程分析"
},
{
"text": "自定义Loader开发实战：从原理到实践",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_10_自定义Loader开发实战"
},
{
"text": "大型项目构建架构设计：从复杂到有序的工程化实践",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_11_大型项目构建架构设计"
},
{
"text": "构建系统的监控与告警：保障持续集成的稳定性",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_01_Webpack/_12_构建系统的监控与告警"
}
]
},
{
"text": "_02_Vite",
"collapsed": true,
"items": [
{
"text": "Vite项目初始化与目录结构：从搭建到定制的完整指南",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_01_项目初始化与目录结构"
},
{
"text": "Vite开发服务器：特性、配置与实战场景",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_02_开发服务器特性与配置"
},
{
"text": "Vite插件系统基础使用：扩展能力的核心玩法",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_03_插件系统基础使用"
},
{
"text": "与Webpack的差异对比：为什么Vite成了新宠？",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_04_与Webpack的差异对比"
},
{
"text": "依赖预构建原理：Vite速度的\"隐形引擎\"",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_05_依赖预构建原理"
},
{
"text": "热模块替换（HMR）实现机制：Vite的\"局部刷新\"魔法",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_06_热模块替换（HMR）实现机制"
},
{
"text": "生产构建优化策略：让Vite打包产物更小、加载更快",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_07_生产构建优化策略"
},
{
"text": "Vite自定义插件开发：打造专属构建能力",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_08_自定义插件开发"
},
{
"text": "Vite架构设计与性能优势：新一代前端构建工具的革新",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_09_Vite架构设计与性能优势"
},
{
"text": "大型项目Vite配置优化：从卡顿到丝滑的实战指南",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_10_大型项目Vite配置优化"
},
{
"text": "构建工具选型决策框架：从需求到落地的科学选择",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_11_构建工具选型决策框架"
},
{
"text": "Vite与微前端集成方案：现代构建工具与微前端架构的协同实践",
"link": "/src/_04_核心技术栈考察/_03_工程化工具/_02_Vite/_12_Vite与微前端集成方案"
}
]
}
]
}
]
},
{
"text": "_05_性能优化",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "前端性能指标：从用户体验到技术落地的核心衡量标准",
"link": "/src/_05_性能优化/_01_基础/_01_性能指标理解（FCPLCPFIDCLS）"
},
{
"text": "前端代码体积优化：从\"臃肿\"到\"轻盈\"的瘦身指南",
"link": "/src/_05_性能优化/_01_基础/_02_代码体积优化方法（压缩Tree-Shaking）"
},
{
"text": "图片优化：从\"加载慢\"到\"秒开\"的前端性能提速关键",
"link": "/src/_05_性能优化/_01_基础/_03_图片优化策略（格式选择懒加载响应式图片）"
},
{
"text": "前端缓存机制：从\"重复请求\"到\"瞬间加载\"的性能跃迁",
"link": "/src/_05_性能优化/_01_基础/_04_缓存机制应用（HTTP缓存Service Worker）"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "关键渲染路径优化：让页面\"快到可见\"的核心逻辑",
"link": "/src/_05_性能优化/_02_进阶/_01_关键渲染路径优化"
},
{
"text": "资源加载策略：让浏览器\"聪明地\"加载资源，提升页面响应速度",
"link": "/src/_05_性能优化/_02_进阶/_02_资源加载策略（预加载预连接优先级调整）"
},
{
"text": "运行时性能优化：让页面交互\"如丝般顺滑\"",
"link": "/src/_05_性能优化/_02_进阶/_03_运行时性能优化（重排重绘事件委托）"
},
{
"text": "大数据渲染优化：从\"卡顿崩溃\"到\"流畅丝滑\"的解决方案",
"link": "/src/_05_性能优化/_02_进阶/_04_大数据渲染优化方案（虚拟滚动分页）"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "一、明确核心监控指标：从\"用户体验\"出发",
"link": "/src/_05_性能优化/_03_高阶/_01_性能监控体系搭建"
},
{
"text": "大型前端项目工程化架构设计：从原则到落地实践",
"link": "/src/_05_性能优化/_03_高阶/_02_性能瓶颈定位工具与方法"
},
{
"text": "大型应用性能优化",
"link": "/src/_05_性能优化/_03_高阶/_03_大型应用性能优化实战案例"
},
{
"text": "1. **目标对齐与指标定义（跨团队启动）**",
"link": "/src/_05_性能优化/_03_高阶/_04_性能优化团队协作流程"
}
]
}
]
},
{
"text": "_06_网络与安全",
"collapsed": true,
"items": [
{
"text": "_01_网络基础",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "从HTTP到HTTPS：深入理解网络传输的安全基石",
"link": "/src/_06_网络与安全/_01_网络基础/_01_基础/_01_HTTP和HTTPS"
},
{
"text": "TCP/IP协议栈核心概念",
"link": "/src/_06_网络与安全/_01_网络基础/_01_基础/_01_TCPIP协议栈核心概念"
},
{
"text": "HTTP请求方法与状态码",
"link": "/src/_06_网络与安全/_01_网络基础/_01_基础/_02_HTTP请求方法与状态码"
},
{
"text": "浏览器缓存机制详解",
"link": "/src/_06_网络与安全/_01_网络基础/_01_基础/_03_浏览器缓存机制详解"
},
{
"text": "跨域资源共享（CORS）原理",
"link": "/src/_06_网络与安全/_01_网络基础/_01_基础/_04_跨域资源共享（CORS）原理"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "HTTPS工作原理与TLS握手过程",
"link": "/src/_06_网络与安全/_01_网络基础/_02_进阶/_01_HTTPS工作原理与TLS握手过程"
},
{
"text": "HTTP/2与HTTP/3新特性",
"link": "/src/_06_网络与安全/_01_网络基础/_02_进阶/_02_HTTP2与HTTP3新特性"
},
{
"text": "WebSocket协议与实时通信",
"link": "/src/_06_网络与安全/_01_网络基础/_02_进阶/_03_WebSocket协议与实时通信"
},
{
"text": "网络请求优化策略",
"link": "/src/_06_网络与安全/_01_网络基础/_02_进阶/_04_网络请求优化策略"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "大型应用网络架构设计",
"link": "/src/_06_网络与安全/_01_网络基础/_03_高阶/_01_大型应用网络架构设计"
},
{
"text": "CDN原理与最佳实践",
"link": "/src/_06_网络与安全/_01_网络基础/_03_高阶/_02_CDN原理与最佳实践"
},
{
"text": "网络异常处理与降级方案",
"link": "/src/_06_网络与安全/_01_网络基础/_03_高阶/_03_网络异常处理与降级方案"
},
{
"text": "分布式系统中的网络问题排查",
"link": "/src/_06_网络与安全/_01_网络基础/_03_高阶/_04_分布式系统中的网络问题排查"
}
]
}
]
},
{
"text": "_02_安全",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "深入浅出理解 XSS 攻击：原理与防御措施",
"link": "/src/_06_网络与安全/_02_安全/_01_基础/_01_XSS攻击原理与防御措施"
},
{
"text": "深入理解CSRF攻击：从原理到防御的全方位解析",
"link": "/src/_06_网络与安全/_02_安全/_01_基础/_02_CSRF攻击原理与防御措施"
},
{
"text": "点击劫持：视觉欺骗的陷阱与防御之道",
"link": "/src/_06_网络与安全/_02_安全/_01_基础/_03_点击劫持与防御"
},
{
"text": "前端常见安全漏洞全景解析：类型识别与检测方法",
"link": "/src/_06_网络与安全/_02_安全/_01_基础/_04_常见安全漏洞类型识别"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "内容安全策略（CSP）：Web安全的\"守门人\"机制详解",
"link": "/src/_06_网络与安全/_02_安全/_02_进阶/_01_内容安全策略（CSP）配置"
},
{
"text": "前端敏感数据保护：从识别到防御的全链路方案",
"link": "/src/_06_网络与安全/_02_安全/_02_进阶/_02_敏感数据保护方案"
},
{
"text": "前端身份认证常用方式与授权最佳实践",
"link": "/src/_06_网络与安全/_02_安全/_02_进阶/_03_身份认证与授权最佳实践"
},
{
"text": "前端安全审计工具与漏洞扫描实践指南",
"link": "/src/_06_网络与安全/_02_安全/_02_进阶/_04_安全审计与漏洞扫描工具使用"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "大型应用的前端安全架构设计：组成与实践要点",
"link": "/src/_06_网络与安全/_02_安全/_03_高阶/_01_大型应用安全架构设计"
},
{
"text": "前端可能发生的安全事件类型",
"link": "/src/_06_网络与安全/_02_安全/_03_高阶/_02_安全事件响应流程"
},
{
"text": "前端攻防对抗演练：常见场景与实战经验",
"link": "/src/_06_网络与安全/_02_安全/_03_高阶/_03_攻防对抗演练经验"
},
{
"text": "前端安全合规要求与隐私保护规范实践",
"link": "/src/_06_网络与安全/_02_安全/_03_高阶/_04_安全合规与隐私保护（GDPR等）"
}
]
}
]
}
]
},
{
"text": "_07_工程化与架构",
"collapsed": true,
"items": [
{
"text": "_01_前端工程化",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "前端代码规范与ESLint配置：从协作痛点到自动化方案",
"link": "/src/_07_工程化与架构/_01_前端工程化/_01_基础/_01_代码规范与ESLint配置"
},
{
"text": "前端团队的Git工作流与版本管理：从协作混乱到高效协同的实践指南",
"link": "/src/_07_工程化与架构/_01_前端工程化/_01_基础/_02_Git工作流与版本管理"
},
{
"text": "前端构建工具入门：从功能解析到实战操作",
"link": "/src/_07_工程化与架构/_01_前端工程化/_01_基础/_03_构建工具基础使用"
},
{
"text": "包管理工具实战指南：npm、yarn与pnpm的合理运用",
"link": "/src/_07_工程化与架构/_01_前端工程化/_01_基础/_04_包管理工具（npmyarnpnpm）"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "前端项目CI/CD流程搭建：从自动化集成到一键部署",
"link": "/src/_07_工程化与架构/_01_前端工程化/_02_进阶/_01_持续集成持续部署（CICD）流程搭建"
},
{
"text": "前端自动化测试策略全解析：从单元到端到端的全方位保障",
"link": "/src/_07_工程化与架构/_01_前端工程化/_02_进阶/_02_自动化测试策略（单元测试集成测试E2E）"
},
{
"text": "前端项目文档自动化生成：从手动编写到一键生成",
"link": "/src/_07_工程化与架构/_01_前端工程化/_02_进阶/_03_项目文档自动化生成"
},
{
"text": "前端监控体系：构建全方位用户体验保障机制",
"link": "/src/_07_工程化与架构/_01_前端工程化/_02_进阶/_04_前端监控体系建设"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "大型前端项目工程化架构设计：从原则到落地实践",
"link": "/src/_07_工程化与架构/_01_前端工程化/_03_高阶/_01_大型项目工程化架构设计"
},
{
"text": "多团队协作下的前端工程化规范体系",
"link": "/src/_07_工程化与架构/_01_前端工程化/_03_高阶/_02_多团队协作工程化规范"
},
{
"text": "前端工程化工具链开发指南：构建高效稳定的开发基础设施",
"link": "/src/_07_工程化与架构/_01_前端工程化/_03_高阶/_03_工程化工具链开发"
},
{
"text": "前端团队践行DevOps文化：从理念到落地的完整路径",
"link": "/src/_07_工程化与架构/_01_前端工程化/_03_高阶/_04_DevOps文化在前端团队的实践"
}
]
}
]
},
{
"text": "_02_架构设计",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "MVC核心思想与实现",
"link": "/src/_07_工程化与架构/_02_架构设计/_01_基础/_01_MVC核心思想与实现"
},
{
"text": "MVVM数据驱动视图原理",
"link": "/src/_07_工程化与架构/_02_架构设计/_01_基础/_02_MVVM数据驱动视图原理"
},
{
"text": "组件化设计原则",
"link": "/src/_07_工程化与架构/_02_架构设计/_01_基础/_03_组件化设计原则"
},
{
"text": "状态管理基础",
"link": "/src/_07_工程化与架构/_02_架构设计/_01_基础/_04_状态管理基础"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "微前端架构设计与实践",
"link": "/src/_07_工程化与架构/_02_架构设计/_02_进阶/_01_微前端架构设计与实践"
},
{
"text": "跨端应用架构方案",
"link": "/src/_07_工程化与架构/_02_架构设计/_02_进阶/_02_跨端应用架构方案"
},
{
"text": "低代码平台架构设计",
"link": "/src/_07_工程化与架构/_02_架构设计/_02_进阶/_03_低代码平台架构设计"
},
{
"text": "大型应用状态管理策略",
"link": "/src/_07_工程化与架构/_02_架构设计/_02_进阶/_04_大型应用状态管理策略"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "前端架构师的职责与能力模型",
"link": "/src/_07_工程化与架构/_02_架构设计/_03_高阶/_01_前端架构师的职责与能力模型"
},
{
"text": "技术中台建设实践",
"link": "/src/_07_工程化与架构/_02_架构设计/_03_高阶/_02_技术中台建设实践"
},
{
"text": "架构演进与技术债务管理",
"link": "/src/_07_工程化与架构/_02_架构设计/_03_高阶/_03_架构演进与技术债务管理"
},
{
"text": "面向未来的前端架构设计",
"link": "/src/_07_工程化与架构/_02_架构设计/_03_高阶/_04_面向未来的前端架构设计"
}
]
}
]
}
]
},
{
"text": "_08_专项技术领域",
"collapsed": true,
"items": [
{
"text": "_01_低代码开发",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "低代码平台核心概念",
"link": "/src/_08_专项技术领域/_01_低代码开发/_01_基础/_01_低代码平台核心概念"
},
{
"text": "amis框架基础使用",
"link": "/src/_08_专项技术领域/_01_低代码开发/_01_基础/_02_amis框架基础使用"
},
{
"text": "可视化拖拽原理",
"link": "/src/_08_专项技术领域/_01_低代码开发/_01_基础/_03_可视化拖拽原理"
},
{
"text": "低代码与传统开发对比",
"link": "/src/_08_专项技术领域/_01_低代码开发/_01_基础/_04_低代码与传统开发对比"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "低代码平台架构设计",
"link": "/src/_08_专项技术领域/_01_低代码开发/_02_进阶/_01_低代码平台架构设计"
},
{
"text": "自定义组件开发规范",
"link": "/src/_08_专项技术领域/_01_低代码开发/_02_进阶/_02_自定义组件开发规范"
},
{
"text": "低代码生成代码质量优化",
"link": "/src/_08_专项技术领域/_01_低代码开发/_02_进阶/_03_低代码生成代码质量优化"
},
{
"text": "低代码平台性能优化",
"link": "/src/_08_专项技术领域/_01_低代码开发/_02_进阶/_04_低代码平台性能优化"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "企业级低代码平台建设",
"link": "/src/_08_专项技术领域/_01_低代码开发/_03_高阶/_01_企业级低代码平台建设"
},
{
"text": "低代码与DevOps集成",
"link": "/src/_08_专项技术领域/_01_低代码开发/_03_高阶/_02_低代码与DevOps集成"
},
{
"text": "低代码平台扩展性设计",
"link": "/src/_08_专项技术领域/_01_低代码开发/_03_高阶/_03_低代码平台扩展性设计"
},
{
"text": "低代码开发团队协作模式",
"link": "/src/_08_专项技术领域/_01_低代码开发/_03_高阶/_04_低代码开发团队协作模式"
}
]
}
]
},
{
"text": "_02_测试与质量保障",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "单元测试基础（Jest/Mocha）",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_01_基础/_01_单元测试基础（JestMocha）"
},
{
"text": "测试用例设计原则",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_01_基础/_02_测试用例设计原则"
},
{
"text": "断言库使用方法",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_01_基础/_03_断言库使用方法"
},
{
"text": "测试覆盖率概念",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_01_基础/_04_测试覆盖率概念"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "组件测试（React Testing Library/Vue Test Utils）",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_02_进阶/_01_组件测试（React Testing LibraryVue Test Utils）"
},
{
"text": "E2E测试（Cypress/Playwright）",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_02_进阶/_02_E2E测试（CypressPlaywright）"
},
{
"text": "测试驱动开发（TDD）实践",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_02_进阶/_03_测试驱动开发（TDD）实践"
},
{
"text": "测试自动化与CI集成",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_02_进阶/_04_测试自动化与CI集成"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "大型应用测试策略",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_03_高阶/_01_大型应用测试策略"
},
{
"text": "测试性能优化",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_03_高阶/_02_测试性能优化"
},
{
"text": "质量门禁与质量指标体系",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_03_高阶/_03_质量门禁与质量指标体系"
},
{
"text": "测试左移与全链路质量保障",
"link": "/src/_08_专项技术领域/_02_测试与质量保障/_03_高阶/_04_测试左移与全链路质量保障"
}
]
}
]
},
{
"text": "_03_插件与工具开发",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "插件基本概念与作用",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_01_基础/_01_插件基本概念与作用"
},
{
"text": "不同环境插件区别（浏览器/构建工具/编辑器）",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_01_基础/_02_不同环境插件区别（浏览器构建工具编辑器）"
},
{
"text": "插件开发基本流程",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_01_基础/_03_插件开发基本流程"
},
{
"text": "简单插件示例（Webpack HelloWorld插件）",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_01_基础/_04_简单插件示例（Webpack HelloWorld插件）"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "插件生命周期与钩子函数",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_02_进阶/_01_插件生命周期与钩子函数"
},
{
"text": "插件间通信机制",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_02_进阶/_02_插件间通信机制"
},
{
"text": "配置与参数处理最佳实践",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_02_进阶/_03_配置与参数处理最佳实践"
},
{
"text": "插件调试与测试技巧",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_02_进阶/_04_插件调试与测试技巧"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "插件架构设计原则",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_03_高阶/_01_插件架构设计原则"
},
{
"text": "性能优化策略",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_03_高阶/_02_性能优化策略"
},
{
"text": "跨环境兼容处理",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_03_高阶/_03_跨环境兼容处理"
},
{
"text": "大型插件的模块化拆分",
"link": "/src/_08_专项技术领域/_03_插件与工具开发/_03_高阶/_04_大型插件的模块化拆分"
}
]
}
]
},
{
"text": "_04_人工智能与前端",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "前端AI应用场景（智能交互/图像识别/NLP）",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_01_基础/_01_前端AI应用场景（智能交互图像识别NLP）"
},
{
"text": "TensorFlow.js基础使用",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_01_基础/_02_TensorFlow"
},
{
"text": "预训练模型应用（人脸识别/情感分析）",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_01_基础/_03_预训练模型应用（人脸识别情感分析）"
},
{
"text": "AI+前端典型案例",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_01_基础/_04_AI+前端典型案例"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "模型优化与轻量化技术",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_02_进阶/_01_模型优化与轻量化技术"
},
{
"text": "WebAssembly加速AI计算",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_02_进阶/_02_WebAssembly加速AI计算"
},
{
"text": "前端推理性能优化",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_02_进阶/_03_前端推理性能优化"
},
{
"text": "本地AI计算与隐私保护",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_02_进阶/_04_本地AI计算与隐私保护"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "大语言模型API集成（ChatGPT/文心一言）",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_03_高阶/_01_大语言模型API集成（ChatGPT文心一言）"
},
{
"text": "AI辅助开发工具链构建",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_03_高阶/_02_AI辅助开发工具链构建"
},
{
"text": "AIGC内容生成与前端渲染",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_03_高阶/_03_AIGC内容生成与前端渲染"
},
{
"text": "前端智能化架构设计",
"link": "/src/_08_专项技术领域/_04_人工智能与前端/_03_高阶/_04_前端智能化架构设计"
}
]
}
]
}
]
},
{
"text": "_09_技术选型能力",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "技术选型的核心原则：从“能用”到“好用”的三重校验",
"link": "/src/_09_技术选型能力/_01_基础/_01_技术选型核心原则（适合性成熟度团队熟悉度）"
},
{
"text": "需求分析三要素：技术落地前的“三维CT扫描”",
"link": "/src/_09_技术选型能力/_01_基础/_02_需求分析三要素（业务场景性能要求用户规模）"
},
{
"text": "如何评估技术栈的匹配度？三个维度让技术选型不再“凭感觉”",
"link": "/src/_09_技术选型能力/_01_基础/_03_技术栈匹配度评估方法"
},
{
"text": "常见的技术对比维度：五个维度帮你看透技术“真面目”",
"link": "/src/_09_技术选型能力/_01_基础/_04_常见技术对比维度"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "技术选型决策矩阵模型：让技术选型从“拍脑袋”到“算明白”",
"link": "/src/_09_技术选型能力/_02_进阶/_01_技术选型决策矩阵模型"
},
{
"text": "技术选型中的风险评估与备选方案设计：为技术决策上“双保险”",
"link": "/src/_09_技术选型能力/_02_进阶/_02_风险评估与备选方案设计"
},
{
"text": "技术债务的管理策略：从“被动还债”到“主动理财”",
"link": "/src/_09_技术选型能力/_02_进阶/_03_技术债务管理策略"
},
{
"text": "大型项目技术栈拆分实践：从“一团乱麻”到“各司其职”",
"link": "/src/_09_技术选型能力/_02_进阶/_04_大型项目技术栈拆分实践"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "如何进行技术趋势的预判？从“跟风”到“掌舵”的四步法则",
"link": "/src/_09_技术选型能力/_03_高阶/_01_技术趋势预判方法"
},
{
"text": "1. 多端适配能力评估",
"link": "/src/_09_技术选型能力/_03_高阶/_02_跨端技术选型框架"
},
{
"text": "微前端架构技术选型",
"link": "/src/_09_技术选型能力/_03_高阶/_03_微前端架构技术选型"
},
{
"text": "技术中台建设",
"link": "/src/_09_技术选型能力/_03_高阶/_04_技术中台建设中的技术选型策略"
}
]
}
]
},
{
"text": "_10_设计模式与架构思想",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "单例模式（登录弹窗/全局状态）",
"link": "/src/_10_设计模式与架构思想/_01_基础/_01_单例模式（登录弹窗全局状态）"
},
{
"text": "工厂模式（组件工厂/服务工厂）",
"link": "/src/_10_设计模式与架构思想/_01_基础/_02_工厂模式（组件工厂服务工厂）"
},
{
"text": "观察者模式（事件监听/状态订阅）",
"link": "/src/_10_设计模式与架构思想/_01_基础/_03_观察者模式（事件监听状态订阅）"
},
{
"text": "装饰器模式（高阶组件/中间件）",
"link": "/src/_10_设计模式与架构思想/_01_基础/_04_装饰器模式（高阶组件中间件）"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "策略模式（表单验证/支付方式）",
"link": "/src/_10_设计模式与架构思想/_02_进阶/_01_策略模式（表单验证支付方式）"
},
{
"text": "代理模式（数据缓存/图片懒加载）",
"link": "/src/_10_设计模式与架构思想/_02_进阶/_02_代理模式（数据缓存图片懒加载）"
},
{
"text": "适配器模式（API兼容/第三方库封装）",
"link": "/src/_10_设计模式与架构思想/_02_进阶/_03_适配器模式（API兼容第三方库封装）"
},
{
"text": "组合模式（组件树/权限管理）",
"link": "/src/_10_设计模式与架构思想/_02_进阶/_04_组合模式（组件树权限管理）"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "设计模式组合使用（观察者+策略模式）",
"link": "/src/_10_设计模式与架构思想/_03_高阶/_01_设计模式组合使用（观察者+策略模式）"
},
{
"text": "反模式识别与重构技巧",
"link": "/src/_10_设计模式与架构思想/_03_高阶/_02_反模式识别与重构技巧"
},
{
"text": "SOLID原则在前端的实践",
"link": "/src/_10_设计模式与架构思想/_03_高阶/_03_SOLID原则在前端的实践"
},
{
"text": "大型项目设计模式落地规范",
"link": "/src/_10_设计模式与架构思想/_03_高阶/_04_大型项目设计模式落地规范"
}
]
}
]
},
{
"text": "_11_运维与部署",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "制品发布流程：从代码到用户手中的完整旅程",
"link": "/src/_11_运维与部署/_01_基础/_01_制品发布流程"
},
{
"text": "版本控制与回滚机制：为发布稳定性筑牢防线",
"link": "/src/_11_运维与部署/_01_基础/_02_版本控制与回滚机制"
},
{
"text": "环境配置管理：驯服复杂系统的“配置魔法”",
"link": "/src/_11_运维与部署/_01_基础/_03_环境配置管理"
},
{
"text": "静态资源部署：从本地文件到全球加速的最优解",
"link": "/src/_11_运维与部署/_01_基础/_04_静态资源部署方案"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "Docker容器化部署：从镜像到运行的核心要点解析",
"link": "/src/_11_运维与部署/_02_进阶/_01_容器化部署（Docker基础）"
},
{
"text": "搭建可靠的自动化部署流程：从手动操作到\"一键发布\"的蜕变",
"link": "/src/_11_运维与部署/_02_进阶/_02_自动化部署流程搭建"
},
{
"text": "多环境部署策略设计：让开发、测试与生产“和平共处”",
"link": "/src/_11_运维与部署/_02_进阶/_03_多环境部署策略"
},
{
"text": "部署监控与告警体系：为系统装上“千里眼”和“顺风耳”",
"link": "/src/_11_运维与部署/_02_进阶/_04_部署监控与告警"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "微服务部署架构：从“单体大厦”到“城市集群”的设计之道",
"link": "/src/_11_运维与部署/_03_高阶/_01_微服务部署架构"
},
{
"text": "蓝绿部署与灰度发布：平稳过渡的\"发布艺术\"",
"link": "/src/_11_运维与部署/_03_高阶/_02_蓝绿部署灰度发布实践"
},
{
"text": "高可用架构部署：从“单点运行”到“万无一失”的生存法则",
"link": "/src/_11_运维与部署/_03_高阶/_03_高可用架构设计"
},
{
"text": "DevOps文化下的部署实践：从“隔墙协作”到“无缝衔接”",
"link": "/src/_11_运维与部署/_03_高阶/_04_DevOps文化与实践"
}
]
}
]
},
{
"text": "_12_拓展性问题与面试结束",
"collapsed": true,
"items": [
{
"text": "_01_基础",
"collapsed": true,
"items": [
{
"text": "常见收尾问题准备（团队规模/技术栈/业务方向）",
"link": "/src/_12_拓展性问题与面试结束/_01_基础/_01_常见收尾问题准备（团队规模技术栈业务方向）"
},
{
"text": "薪资谈判基础准备",
"link": "/src/_12_拓展性问题与面试结束/_01_基础/_02_薪资谈判基础准备"
},
{
"text": "反问环节问题设计",
"link": "/src/_12_拓展性问题与面试结束/_01_基础/_03_反问环节问题设计"
},
{
"text": "面试结束礼仪",
"link": "/src/_12_拓展性问题与面试结束/_01_基础/_04_面试结束礼仪"
}
]
},
{
"text": "_02_进阶",
"collapsed": true,
"items": [
{
"text": "公司技术挑战的挖掘与提问",
"link": "/src/_12_拓展性问题与面试结束/_02_进阶/_01_公司技术挑战的挖掘与提问"
},
{
"text": "职业发展路径的提问技巧",
"link": "/src/_12_拓展性问题与面试结束/_02_进阶/_02_职业发展路径的提问技巧"
},
{
"text": "团队协作模式的了解方法",
"link": "/src/_12_拓展性问题与面试结束/_02_进阶/_03_团队协作模式的了解方法"
},
{
"text": "技术学习资源的询问策略",
"link": "/src/_12_拓展性问题与面试结束/_02_进阶/_04_技术学习资源的询问策略"
}
]
},
{
"text": "_03_高阶",
"collapsed": true,
"items": [
{
"text": "从提问中评估公司技术氛围",
"link": "/src/_12_拓展性问题与面试结束/_03_高阶/_01_从提问中评估公司技术氛围"
},
{
"text": "高级岗位的挑战性问题设计",
"link": "/src/_12_拓展性问题与面试结束/_03_高阶/_02_高级岗位的挑战性问题设计"
},
{
"text": "职业规划与公司发展的匹配度询问",
"link": "/src/_12_拓展性问题与面试结束/_03_高阶/_03_职业规划与公司发展的匹配度询问"
},
{
"text": "面试后的跟进策略",
"link": "/src/_12_拓展性问题与面试结束/_03_高阶/_04_面试后的跟进策略"
}
]
}
]
}
],
"socialLinks": [
{
"icon": "github",
"link": "https://gitee.com/kevintauraus/frontend-interview"
}
]
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.