DesignPattern_Architecture 面试专题手册
💡 本章节共收录 735 道面试真题，建议每天复习 10-20 题。
Q1: 请解释单例模式在前端中的应用场景，以及为什么选择单例模式？如果某个全局组件需要扩展出不同变体，你会使用什么设计模式？
【核心解析】 单例模式确保全局唯一实例；应用场景：全局状态管理、弹窗组件、缓存；选择原因：节省资源、避免重复创建；扩展变体：工厂模式或策略模式
Q2: 请解释观察者模式的优点，并举例在前端开发中的应用场景。
【核心解析】 解耦主题与观察者；支持广播通信；易于扩展；实现事件监听、响应式数据绑定；Vue的响应式系统基于观察者模式
Q3: 请手写一个EventEmitter发布订阅模式。
【核心解析】 维护事件名到回调数组的映射；on方法注册监听；emit方法触发事件；off方法移除监听；once方法单次监听
Q4: 你为什么要使用命令模式？每个命令的数据类型是什么样的？
【核心解析】 命令模式将请求封装为对象，支持撤销、重做、队列；每个命令包含执行和撤销方法；数据类型：命令名称、参数、执行函数；适用于操作历史记录
Q5: 结合增量快照，如何判断一个操作应该使用命令模式还是增量快照？
【核心解析】 命令模式适合可撤销的原子操作；增量快照适合记录状态变化；判断依据：操作粒度、回滚需求、性能；命令模式保存操作，快照保存状态
Q6: 开放思维题：有一根粗细不均匀的绳子，燃烧需要一小时，现在有两根绳子，如何衡量45分钟？
【核心解析】 同时点燃第一根两端和第二根一端；第一根燃尽（30分钟）时点燃第二根另一端；第二根燃尽（15分钟）总时间45分钟；逻辑推理；问题抽象
Q7: 请设计一个支付页面，包括前端架构、数据模型、API集成和优化方案。
【核心解析】 需求分析：多种支付方式、安全合规、性能要求；架构设计：组件结构、状态管理；数据模型：订单、支付、用户信息；API设计：创建订单、处理支付、查询状态、Webhook；优化：缓存、CDN、降级策略
Q8: 请设计一个图片上传和裁剪系统，包括前端实现和后端交互。
【核心解析】 前端：文件选择、预览、裁剪组件（如react-easy-crop）；后端：接收文件、存储、生成缩略图；优化：分片上传、压缩、CDN
Q9: Electron中的IPC（进程间通信）是如何工作的？
【核心解析】 主进程与渲染进程；IPC通信方式：ipcMain/ipcRenderer；contextBridge暴露API；安全考虑：禁用nodeIntegration；常见模式：双向通信、异步消息
Q10: 请解释微前端的技术选型及原因。
【核心解析】 常见方案：iframe、Web Components、single-spa、qiankun、Module Federation；选型考虑：隔离性、通信、性能、学习成本、生态；qiankun：基于single-spa，提供沙箱和样式隔离；Module Federation：Webpack5特性，运行时共享模块；iframe：简单但通信复杂、性能差
Q11: 浏览器和服务器如何实现单例模式？
【核心解析】 单例模式确保一个类只有一个实例；浏览器中：全局对象（window）、模块单例（ES6模块）；服务器中：Node.js模块缓存、依赖注入容器；实现方式：闭包、静态属性、双重检查锁
Q12: 什么是MVVM？
【核心解析】 Model-View-ViewModel；数据驱动视图；双向绑定；视图与模型解耦；Vue是MVVM实现
Q13: 在系统设计面试中，如何有效地阐述架构方案？请结合前端系统设计，说明从高层到细节的讲解策略以及权衡取舍的思考。
【核心解析】 先讲整体架构再深入模块；画图辅助说明（架构图、数据流图）；讨论方案A/B/C的优劣；根据面试官反馈调整深度；参考《System Design Interview》等资源
Q14: 你了解哪些设计模式？请举例说明在前端中的应用。
【核心解析】 单例模式（全局状态管理）、观察者模式（事件监听）、发布订阅模式（EventBus）、工厂模式（创建组件）、策略模式（表单验证）
Q15: 你用过哪些设计模式？请举例说明。
【核心解析】 单例模式；观察者模式；发布订阅模式；工厂模式；装饰器模式；策略模式；实际应用场景
Q16: 微前端框架qiankun有什么好处？如何让子应用适配主应用的样式？
【核心解析】 独立开发部署；技术栈无关；样式隔离（shadow DOM或CSS scoped）；生命周期管理；通信机制
Q17: 请解释React和Vue中组件通信的方式。
【核心解析】 父子通信（props、emit/事件）；兄弟通信（状态提升、Event Bus）；跨层级通信（Context/Provide-inject、Redux/Pinia）；Vue中$attrs、$listeners；React中useReducer、useContext
Q18: 请实现一个支持链式调用的HardMan类（包含Promise）。
【核心解析】 链式调用设计；任务队列；Promise控制异步；sleep方法；类结构
Q19: 场景题：设计一个前端表单，涵盖数据采集、前后端对接等，说说你的思路。
【核心解析】 表单组件化；数据模型（Schema）；校验规则（前端+后端）；状态管理；提交与错误处理；异步提交与防重复；前后端接口设计（REST/GraphQL）
Q20: 讲一下编辑冲突的思路。
【核心解析】 Git手动处理冲突：合并时冲突标记，手动修改；在线办公软件：提示弹窗、编辑丢失问题；实时显示他人指针位置可规避冲突；OT算法（操作转换）或CRDT（无冲突数据类型）实现协同编辑
Q21: 微前端隔离的实现方式有哪些？快照和Proxy有什么区别？
【核心解析】 快照：保存/恢复全局变量，实现简单，性能差；Proxy：代理window实现沙箱，隔离好、性能高，兼容略差；其他方式：iframe、Shadow DOM
Q22: 谈谈微前端架构，为什么需要它？
【核心解析】 微前端的定义与核心思想；解决单体应用耦合、技术栈统一困难、团队协作效率低等问题；主流方案（qiankun、Module Federation）；隔离与通信机制；适用场景与挑战
Q23: 如何设计一个低代码平台？
【核心解析】 核心架构：可视化编辑器、组件库、配置面板、代码生成器；组件协议规范；数据流与状态管理；扩展性（自定义组件、插件）；渲染引擎与运行时
Q24: 设计组件时如何考虑通用性和扩展性？
【核心解析】 单一职责；props配置化；插槽/children；组合优于继承；提供默认行为；暴露API；类型定义
Q25: 前端开发中常用的设计模式有哪些？请详细说明单例模式的应用场景及潜在问题，以及发布订阅模式的核心逻辑。
【核心解析】 单例模式：确保全局唯一实例，如状态管理、日志记录；潜在问题包括全局状态污染、测试困难、多线程环境下的线程安全；发布订阅模式：解耦发布者和订阅者，通过事件中心管理消息传递；核心逻辑包括订阅、发布、取消订阅
Q26: 请谈谈你对前端架构中离线包的理解，包括离线包解决什么样的问题，以及如何下发和更新？
【核心解析】 离线包解决弱网或无网环境下的页面加载问题，提升首屏速度和用户体验；下发通过CDN或预置在App中；更新采用增量更新或全量更新策略，通过版本号管理，在后台静默下载
Q27: 请解释观察者模式和发布订阅模式的区别。
【核心解析】 观察者模式：主题直接通知观察者；发布订阅模式：通过事件中心解耦；发布订阅更灵活；两者都用于事件驱动
Q28: 请解释设计的四大基本原则（CRAP原则）及其在设计中的应用。
【核心解析】 对比：创造视觉焦点；重复：统一风格；对齐：建立秩序；亲密性：信息归组
Q29: 手写发布订阅模式。
【核心解析】 事件中心存储事件与回调；on订阅事件；emit触发事件；off取消订阅
Q30: 传统iframe有哪些缺点？如何解决URL丢失和DOM节点割裂问题？请结合wujie微前端框架说明其沙箱实现和DOM代理机制。
【核心解析】 iframe的缺点：URL不同步、DOM隔离、性能开销、通信复杂；URL丢失解决方案（history API或hash）；DOM节点割裂问题；wujie的沙箱实现（Proxy代理window）；DOM代理机制（类似Vue的发布订阅模式）
Q31: 如果让你开发一个动态路由管理系统，你会怎么做？权限滥用问题如何解决？
【核心解析】 动态路由表设计；权限模型（RBAC/ABAC）；路由守卫与权限校验；前端路由与后端权限同步；防止权限滥用的策略
Q32: 请实现一个拖拽功能，并说明其设计思路。
【核心解析】 mousedown/mousemove/mouseup事件；计算偏移量；设置元素位置（transform或left/top）；考虑边界限制；触摸事件支持；性能优化（requestAnimationFrame）
Q33: 在项目开发中如何进行技术选型？请结合具体场景说明理由。
【核心解析】 业务需求分析；团队技术栈匹配；社区活跃度与生态；性能与可维护性；长期可扩展性
Q34: 实现高度可扩展的组件的思路是什么？如何平衡通用性和特定业务逻辑的定制需求？
【核心解析】 组件设计原则：单一职责、开闭原则；props驱动配置；插槽/slot；高阶组件；组合式API；提供默认行为与自定义扩展点
Q35: 请解释模块联邦（Module Federation）架构的原理和优势，以及项目中为什么使用它。
【核心解析】 Webpack 5特性；微前端方案；运行时加载远程模块；共享依赖；独立部署
Q36: 什么样的设计模式适合设计状态管理？请解释Zustand内部底层是如何实现的。
【核心解析】 观察者模式；发布订阅模式；Zustand基于Proxy或useSyncExternalStore；不可变更新；选择器优化
Q37: 请设计一个多人在线画图功能，包括数据同步、冲突处理和架构设计。
【核心解析】 WebSocket实时通信；操作数据模型（如绘制指令序列）；冲突处理：OT算法或CRDT；前端渲染：Canvas或SVG；撤销重做：操作栈；性能优化：增量更新、节流；架构：客户端-服务器模式，服务器负责广播和持久化
Q38: 请解释微前端架构的原理及实现方案？
【核心解析】 微前端将前端应用拆分为独立子应用；技术栈无关；通信机制（自定义事件、共享状态）；实现方案（iframe、Web Components、Module Federation、qiankun）；沙箱隔离
Q39: 如何封装postMessage通讯协议以统一处理Electron桌面端、移动端和Web端？
【核心解析】 统一消息格式；监听message事件；处理不同源；封装发送和接收方法；跨端兼容性处理
Q40: 请解释如何开发多端组件（如PC、移动、小程序），以及如何实现响应式设计。
【核心解析】 使用CSS媒体查询、flexible布局；组件库适配；跨端方案（Taro/Uni-app）；条件编译；响应式单位（rem、vw）
Q41: 请解释观察者模式与发布订阅模式的区别，并举例前端应用场景。
【核心解析】 观察者模式：目标直接通知观察者，耦合度高；发布订阅模式：通过事件中心解耦；前端场景：EventEmitter、Redux、Vue响应式；优缺点
Q42: 发布订阅模式通常需要先注册事件，有没有方法可以实现自动监听，无需手动注册？
【核心解析】 使用Proxy或Object.defineProperty拦截属性变化；MutationObserver监听DOM变化；IntersectionObserver自动监听元素可见性；WebSocket/EventSource自动接收推送；框架响应式系统（Vue的reactive自动追踪依赖）
Q43: 请手写实现一个观察者模式。
【核心解析】 定义Subject和Observer接口；Subject维护观察者列表；提供添加、删除、通知方法；Observer定义更新方法；解耦发布者和订阅者
Q44: 请解释SSR（服务端渲染）的原理及优缺点。
【核心解析】 在服务器生成HTML字符串发送给客户端；优点：首屏加载快、SEO友好；缺点：服务器压力大、交互响应慢；Next.js/Nuxt.js实现
Q45: 如何设计一个撤销重做功能？
【核心解析】 命令模式；维护历史状态栈；撤销/重做操作；状态快照；性能优化（如redux-undo）
Q46: 如何设计一个撤销重做功能？
【核心解析】 命令模式；维护历史状态栈；撤销/重做操作；状态快照；性能优化（如redux-undo）
Q47: 请解释Koa洋葱圈模型及Express与Koa的区别。
【核心解析】 洋葱圈模型（中间件按顺序执行，类似洋葱，请求和响应各经过一层）；Express（基于回调，中间件顺序执行，功能更全）；Koa（基于async/await，更轻量，上下文封装更好）；区别（错误处理、中间件机制、体积）
Q48: 请解释Node.js的事件循环机制。
【核心解析】 Node事件循环阶段（timers、pending callbacks、idle/prepare、poll、check、close callbacks）；与浏览器事件循环区别（有libuv实现）；process.nextTick（在当前阶段结束后立即执行）；微任务（Promise.then）在每次切换阶段时执行
Q49: 请解释如何封装一个组件，以及判断是否需要封装的原则。
【核心解析】 封装原则（高内聚低耦合、单一职责、可复用性）；判断标准（重复出现、逻辑复杂、可独立维护）；组件设计（props、slots、事件）；通用化处理（抽象、配置化）
Q50: 请解释微前端的实现原理，包括沙箱机制以及主应用如何加载子应用。
【核心解析】 微前端核心是应用拆分与独立部署；沙箱机制通过Proxy或快照隔离全局变量和副作用；主应用通过路由匹配或手动加载子应用资源；子应用需暴露生命周期钩子（bootstrap/mount/unmount）；样式隔离可采用Shadow DOM或CSS命名空间
Q51: 请手写实现一个发布订阅模式。
【核心解析】 维护一个事件名到回调数组的映射；on方法注册回调；emit方法触发事件并执行回调；off方法移除回调；once方法只执行一次
Q52: 请解释position属性的各个值及其相对于什么定位。
【核心解析】 static默认；relative相对自身；absolute相对最近非static祖先；fixed相对视口；sticky相对滚动容器；z-index层叠上下文
Q53: 请解释观察者模式和发布订阅模式的区别，并举例前端应用场景。
【核心解析】 观察者模式：目标直接通知观察者；发布订阅模式：通过事件中心解耦；区别：耦合度不同；前端场景：EventBus（发布订阅）、Vue响应式（观察者）
Q54: 工厂模式与策略模式有什么区别？请举例说明。
【核心解析】 工厂模式用于创建对象，封装实例化逻辑；策略模式用于封装算法族，实现行为切换；工厂模式关注对象创建，策略模式关注行为选择；适用场景对比
Q55: 如果让你设计一个协同文档的架构，你会如何设计？
【核心解析】 CRDT或OT算法；WebSocket实时通信；操作转换；冲突解决；版本控制；前端状态管理（如Yjs）
Q56: 请解释观察者模式和发布订阅模式的区别。
【核心解析】 观察者模式：主题直接通知观察者；发布订阅模式：通过事件中心解耦；观察者模式耦合更高；发布订阅更灵活
Q57: 请解释单例模式在前端的应用。
【核心解析】 全局状态管理（Redux store）；缓存对象；工具类（如axios实例）；实现方式（闭包、模块模式）；懒加载单例
Q58: 请解释微前端架构的设计思路。
【核心解析】 主应用与子应用；独立开发部署；技术栈无关；通信机制（自定义事件、共享状态）；样式隔离（CSS Modules, Shadow DOM）；沙箱隔离
Q59: 请实现一个EventEmitter类，支持on、emit、off等方法，实现发布订阅模式。
【核心解析】 事件名与回调函数的映射；emit触发事件并执行回调；off移除指定回调；考虑多次订阅和一次性订阅
Q60: 请解释面向对象编程的思想及其设计原则。
【核心解析】 面向对象三大特性（封装、继承、多态）；设计原则（SOLID：单一职责、开闭原则、里氏替换、接口隔离、依赖反转）；设计模式（工厂、单例、观察者等）
Q61: 请解释软件工程的设计理念。
【核心解析】 高内聚低耦合；模块化；可维护性；可扩展性；设计模式的应用；架构模式（MVC、MVVM、微服务、微前端）
Q62: 请解释发布订阅模式和观察者模式的区别？
【核心解析】 观察者模式直接通知；发布订阅通过事件中心；耦合度不同；应用场景；前端事件系统
Q63: 请解释微前端架构及其与微服务的区别。
【核心解析】 独立部署；技术栈无关；子应用隔离；通信机制；微服务后端概念
Q64: 请手写实现一个发布订阅模式（EventEmitter）。
【核心解析】 维护事件名到回调函数列表的映射；on方法注册监听器；emit方法触发事件并执行回调；off方法移除监听器；once方法实现单次监听
Q65: 请解释微服务的概念，以及前端如何理解微服务。
【核心解析】 微服务：独立部署、松耦合、单一职责；前端微服务（微前端）：独立开发部署、技术栈无关、集成方式（iframe、Web Components、Module Federation）
Q66: 请解释发布-订阅模式（Pub/Sub）与观察者模式的区别，并手写一个简单的EventEmitter。
【核心解析】 观察者模式直接通知；发布订阅通过事件中心解耦；EventEmitter实现：on、emit、off；应用：跨组件通信
Q67: 请解释单例模式在前端的应用场景，并手写实现。
【核心解析】 全局状态管理（如Redux store）；缓存；确保只有一个实例；闭包或class实现；模块化天然单例
Q68: 请解释微前端架构的原理和常见实现方案。
【核心解析】 主应用加载子应用；隔离（沙箱、样式隔离）；通信（自定义事件、共享状态）；方案：qiankun、Module Federation
Q69: 如何设计一个支持撤销/重做功能的富文本编辑器？请描述核心数据结构与实现思路。
【核心解析】 命令模式；操作历史栈（undo/redo栈）；快照或增量记录；状态合并与边界处理；与内容编辑器的集成
Q70: 设计一个跨端组件库的架构方案，需要考虑哪些关键问题？
【核心解析】 跨端适配（Web/小程序/React Native）；DSL统一；样式隔离；平台差异抽象；按需加载；测试与文档
Q71: 前端微前端方案如何解决样式隔离问题？请列举常见方案及其优缺点。
【核心解析】 CSS Modules；Shadow DOM；CSS-in-JS；命名空间约定；postcss插件自动加前缀；BEM
Q72: 介绍一下你的个人项目（低代码平台），它的目标或背景是什么？
【核心解析】 低代码平台核心概念；可视化拖拽与配置；组件化与模板化；目标用户与场景
Q73: 详细介绍一下项目中关于撤销重做（Undo/Redo）的内存优化。描述一下Redux的数据流是怎样的？
【核心解析】 命令模式或备忘录模式；状态快照与差异存储；Redux单向数据流；Action/Reducer/Store；内存优化策略（限制历史记录、压缩快照）
Q74: 微前端解决了什么问题？有什么弊端？
【核心解析】 解决大型应用拆分、独立部署、技术栈无关；弊端：性能开销、样式隔离、通信复杂度、路由冲突、测试困难
Q75: 工作中有过埋点的经历吗？请描述埋点的实现方式。
【核心解析】 手动埋点（代码侵入）；无痕埋点（AOP）；可视化埋点；数据上报（图片/Beacon）；事件监听和全局拦截
Q76: 请解释微前端架构的原理和常见实现方案。
【核心解析】 微前端将前端应用拆分为独立模块；实现方案：iframe、Web Components、Module Federation、qiankun；优点：独立开发部署、技术栈无关；挑战：样式隔离、通信、性能
Q77: 介绍RBAC权限管理模型，如何实现组件级的权限控制？权限中途变更如何处理？
【核心解析】 RBAC：用户-角色-权限的关联；组件级控制：通过自定义指令或高阶组件判断权限；权限变更：实时更新用户权限状态，重新渲染或刷新页面
Q78: 手写实现一个令牌认证类，涉及Promise等异步操作。
【核心解析】 令牌存储与刷新；异步锁防止并发刷新；Promise链式调用；错误处理与重试
Q79: 请解释发布-订阅模式与观察者模式的区别，并举例说明在前端开发中的应用场景。
【核心解析】 发布-订阅模式通过事件中心解耦；观察者模式直接通知；前端事件总线、Redux、Vue事件总线；优缺点对比
Q80: 请介绍工厂模式及其在前端开发中的使用场景。
【核心解析】 简单工厂、工厂方法、抽象工厂；创建对象封装；React.createElement、Vue组件创建
Q81: 设计一个场景：有一种花定时开放，两种鸟看到花开会叫，叫声不同。请用代码实现。
【核心解析】 发布-订阅模式；观察者模式；事件触发；解耦；类设计
Q82: 如果让你设计一个俄罗斯方块游戏，你会如何设计？如何提升游戏体验？
【核心解析】 模块化设计（游戏状态、渲染、输入、AI）；MVC/MVVM架构；性能优化（requestAnimationFrame、减少重排）；交互反馈（旋转、加速、预览）；分数与等级系统
Q83: 请解释进程和线程的区别，以及进程间通信的方式。
【核心解析】 资源分配与调度；地址空间；通信方式（管道、消息队列、共享内存、信号、Socket）；浏览器多进程架构
Q84: 请解释进程中的内存是如何分布的？
【核心解析】 代码段、数据段、堆、栈；栈向下增长、堆向上增长；静态变量与全局变量；内存映射段
Q85: 请谈谈你参与过的一个前端项目，遇到了哪些挑战以及如何解决的。
【核心解析】 项目背景与职责；技术栈选型；具体挑战（性能优化、复杂状态管理、跨端适配、团队协作）；解决方案（代码重构、引入工具、优化架构）；成果与反思
Q86: 请解释装饰器模式，并举例说明。
【核心解析】 动态添加功能；不修改原有代码；AOP；应用：日志、权限、缓存
Q87: 除了装饰器模式，你还知道哪些设计模式？
【核心解析】 单例模式；观察者模式；工厂模式；策略模式；代理模式
Q88: 你知道哪些设计模式？什么情况下需要用到单例模式？
【核心解析】 常见设计模式（单例、工厂、观察者、发布订阅、策略、装饰器）；单例模式（全局唯一实例，如全局状态管理、日志记录、配置对象）；实现（闭包、模块模式、ES6模块）
Q89: 如果让你从0到1设计腾讯元宝，你会怎么做？
【核心解析】 前端技术选型：React/Next.js；后端：Node.js/Go；数据库：MySQL/Redis；架构：微服务；考虑性能、可扩展性、用户体验
Q90: 请介绍低代码平台中动态表单的设计思路，以及如何实现有深度的功能（如复杂联动、自定义组件）。
【核心解析】 JSON Schema驱动渲染；组件注册与动态加载；联动规则引擎；自定义组件扩展接口
Q91: 请讲解组件库中命令式组件的设计，如何抽离高阶函数用于创建、渲染和销毁组件，并实现所有命令式组件的共用。
【核心解析】 命令式API（如$message）；高阶函数封装创建/挂载/卸载逻辑；单例模式管理实例；与声明式组件的对比
Q92: 请设计一个多人协作文档系统，需要考虑哪些方面？如何实现？
【核心解析】 WebSocket实时通信；操作转换（OT）或CRDT；锁机制或冲突解决；富文本编辑器（如Quill）
Q93: 请解释单例模式的定义、实现方式（懒汉/饿汉）以及在前端项目中的应用场景。
【核心解析】 确保一个类只有一个实例；懒汉式（延迟创建）；饿汉式（提前创建）；应用：全局状态管理（Vuex/Pinia）、日志对象、缓存、弹窗组件
Q94: 请解释模板方法模式的定义及其在前端开发中的应用。
【核心解析】 定义算法骨架，子类实现具体步骤；抽象类与具体类；应用：生命周期钩子、渲染流程、表单验证流程
Q95: 请解释低代码平台的优缺点，以及低代码与组件的差异。
【核心解析】 低代码：可视化拖拽、快速开发、降低门槛；缺点：灵活性差、性能问题、难以定制；组件：可复用的代码单元，需手动组合；低代码平台通常基于组件库，提供更高级的抽象
Q96: 请解释观察者模式和发布订阅模式的区别。
【核心解析】 观察者模式直接通知；发布订阅通过事件中心；耦合度；应用场景（如Vue响应式、EventEmitter）
Q97: 微前端中组件复用和路由冲突如何解决？
【核心解析】 组件复用：共享库、npm包、webpack externals；路由冲突：命名空间、基座路由分发、沙箱隔离
Q98: 请解释设计模式中的SOLID原则？
【核心解析】 单一职责；开闭原则；里氏替换；接口隔离；依赖倒置；前端应用举例
Q99: 请解释单例模式的实现（饿汉式、懒汉式）？
【核心解析】 确保只有一个实例；饿汉式：类加载时创建；懒汉式：首次使用时创建；双重检查锁；ES6模块单例
Q100: 请解释微前端架构？
【核心解析】 独立部署；技术栈无关；子应用隔离；通信机制；框架：qiankun、Module Federation