面试

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 事件循环、前端存储、React 生命周期、列表和key、react 事件机制、react 渲染机制、浏览器的同源策略、CSRF攻击、 XSS防御、跨域资源共享（CORS） 本轮共 23 道题。答案默认折叠，便于先自行作答。 1. 介绍一下你觉的比较有成就感的项目 题目要点 STAR法则 参考答案 老传统了，基于简历挖掘一个最有亮点的项目 2. 遇到的最有挑战的技术是什么 题目要点 略 参考答案 略 3. 项目技术选型是如何衡量的 题目要点 列举技术选型的核心衡量标准 说明评估流程和实操方法 强调综合权衡，避免片面判断 结合项目需求和团队实际展开 参考答案 考察点 ● 理解技术选型的核心因素及其权衡原则 考察对项目需求、团队能力与技术趋势的综合分析能力。 ● 掌握技术选型中性能、开发效率、维护性等多维度考虑 考察系统架构设计和项目管理思维。 参考答案 一、技术选型的衡量维度 1. 业务需求匹配度 技术是否满足项目的功能需求、性能要求和扩展性。 是否支持项目特有的场景或复杂逻辑。 2. 团队技术栈和能力 团队是否熟悉该技术，学习成本及培训投入。 技术社区活跃度，文档完善程度，易用性。 3. 性能表现 技术的响应速度、负载能力、资源消耗。 是否支持性能优化方案（如 SSR、缓存策略等）。 4. 生态和兼容性 技术生态是否丰富，有无成熟的第三方库和工具支持。 与现有系统和平台的兼容性。 5. 维护成本与长期可持续性 技术的稳定性和升级频率。 社区支持和企业采用情况，避免技术孤岛。 6. 开发效率 开发周期和上线速度。 工具链和开发体验是否高效。 7. 安全性和合规性 技术在安全防护、隐私保护方面的能力。 是否满足行业合规标准。 二、技术选型的评估流程 需求调研：明确项目功能和非功能需求。 方案调研：收集备选技术方案及案例。 技术预研和验证：通过小型原型测试技术可行性。 成本评估：综合考量开发、维护、培训等成本。 风险分析：识别潜在风险，如社区活跃度、技术稳定性。 决策和方案确定：结合以上评估，选择最优技术方案。 三、总结 技术选型是一个多维度权衡过程，既要满足业务需求，也需考虑团队与生态。 注重长期维护和性能表现，避免盲目追新或仅凭个人偏好。 通过科学的评估流程和数据支撑，做出理性选择。 4. 项目中的性能监控和错误上报讲一下 题目要点 列举关键性能指标及监控方法 说明错误类型、捕获机制和上报流程 强调数据分析与持续优化的重要性 结合实际项目实践进行阐述 参考答案 考察点 ● 理解前端性能监控的关键指标和监控手段 考察对用户体验优化和实时监控的认知。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： Web Storage、离线存储、浏览器解析 HTML 文件、浏览器渲染过程、浏览器的缓存机制、浏览器的存储机制 本轮共 22 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的3D渲染的项目 题目要点 略 参考答案 略 2. 3D渲染顶点着色、剪裁你是怎么实现的 题目要点 略 参考答案 略 3. 顶点着色阶段中的坐标变换通常包括哪些步骤？为什么剪裁能提升性能 题目要点 略 参考答案 略 4. 在透视投影中，为什么需要视口变换（Viewport Transformation） 题目要点 略 参考答案 略 5. 像素着色阶段的任务是什么？它如何与光照模型（如Phong或Blinn-Phong）结合 题目要点 略 参考答案 略 6. 延迟渲染（Deferred Rendering）与前向渲染（Forward Rendering）在像素着色阶段的区别 题目要点 略 参考答案 略 7. 深度缓冲（Z-Buffer）的工作原理是什么 题目要点 略 参考答案 略 8. 浏览器绘制一帧的完整流程（从输入事件到像素合成） 题目要点 理清浏览器渲染从事件到显示的每个关键步骤。 解释每个阶段的作用和产生的结果。 强调布局、绘制和合成的性能开销及优化手段。 结合实际开发中的性能调优措施说明。 参考答案 考察点 ● 理解浏览器渲染的全流程 考察从用户输入到最终视觉呈现的各个环节。 ● 掌握事件处理、样式计算、布局、绘制和合成机制 考察对浏览器渲染流水线各阶段的深入理解。 ● 理解性能瓶颈和优化点 参考答案 一、浏览器绘制一帧的整体流程概览 从用户输入事件触发，到最终屏幕显示，浏览器大致执行以下步骤： 事件处理（Input Handling） JavaScript 执行（JS Execution） 样式计算（Style Recalculation） 布局计算（Layout / Reflow） 绘制（Painting） 合成（Compositing） 像素呈现（Rasterization & Display） 二、详细流程解析 1. 用户输入事件处理 浏览器捕获用户的输入事件（如点击、滚动、键盘等），将事件放入事件队列。 主线程从事件队列中取出事件，执行对应的事件处理程序（如回调函数）。 2. JavaScript 执行 事件处理回调可能修改 DOM 或样式。 JavaScript 运行在浏览器主线程，操作 DOM 会影响后续渲染。 3. 样式计算（Style Recalculation） 浏览器根据最新的 DOM 结构和 CSS 规则，计算每个元素的最终样式。 可能触发样式树（style tree）的重建或更新。 4. 布局计算（Layout / Reflow） 计算元素的几何信息（大小、位置等），生成布局树（layout tree）。 重新计算会影响元素相对或绝对位置。 这是性能较昂贵的过程，尤其是节点多或频繁触发。 5. 绘制（Painting） 将布局树转换为绘制指令（绘制图层的内容），如颜色、文字、边框等。 生成绘制层（paint layers），具体绘制到图层画布（layer canvas）。 6. 合成（Compositing） 多个绘制层按照层级关系组合（合成）成最终页面。 使用 GPU 加速合成，将图层合并为一张完整的图像。 合成阶段可以通过硬件加速提升性能，避免全部重绘。 7. 像素呈现（Rasterization & Display） 将合成后的图像转换成屏幕像素。 GPU 或显示设备将最终像素渲染到屏幕，完成一帧的视觉呈现。 三、流程图示意 用户输入 → 事件处理 → JS 执行 → 样式计算 → 布局 → 绘制 → 合成 → 屏幕显示 四、优化与注意点 避免频繁触发布局和绘制，减少重排和重绘次数。 使用 CSS3 硬件加速属性（transform、opacity）优化合成性能。 将复杂动画放入合成层，减少主线程压力。 合理分层减少合成开销，避免过度分层。 减少 JavaScript 执行时间，避免阻塞主线程。 9. 追问：requestAnimationFrame（RAF）在哪个阶段执行？为什么它比setTimeout更适合动画 题目要点 明确 RAF 在浏览器渲染流程中“绘制前”执行。 解释 RAF 与浏览器刷新同步，自动节流的机制。 对比 setTimeout，突出 RAF 动画性能和体验优势。 强调实际开发中推荐使用 RAF 实现动画更新。 参考答案 一、requestAnimationFrame 执行阶段 requestAnimationFrame 回调函数执行时机： RAF 的回调函数会在浏览器开始下一次渲染帧之前执行，即在 浏览器渲染管线中的“绘制（Painting）”之前或合成前的空隙期。 具体来说，RAF 的回调是在浏览器完成一帧的布局（Layout）和样式计算（Style Recalculation）之后，紧接着准备绘制和合成之前触发，保证动画逻辑与渲染同步。 二、为什么 RAF 比 setTimeout 更适合动画 1. 与浏览器刷新频率同步 RAF 会按照屏幕刷新频率（通常是 60fps，即约 16.7ms 一帧）自动调用回调，保证动画平滑且不卡顿。 setTimeout 不与渲染同步，回调可能在任意时刻执行，导致动画帧率不稳定甚至丢帧。 2. 自动节流和性能优化 浏览器在后台标签页会自动暂停 RAF 调用，节省资源；而 setTimeout 仍然会尝试执行，浪费性能。 RAF 允许浏览器合并多次绘制请求，提升性能。 3. 减少视觉撕裂 由于 RAF 在绘制之前触发，能保证动画状态在绘制前更新，减少视觉撕裂和跳帧现象。 setTimeout 可能导致更新与渲染不同步，画面不连贯。 三、总结 特点 requestAnimationFrame setTimeout 执行时机 渲染帧开始前（绘制前） 指定时间后，非渲染同步 帧率同步 与显示器刷新率同步，平滑动画 不保证同步，可能导致跳帧 性能优化 后台标签页自动暂停，节约资源 即使后台也运行，浪费性能 视觉效果 减少撕裂，动画更流畅 易出现撕裂和卡顿 10. 在布局（Layout）和绘制（Paint）阶段，浏览器如何避免不必要的重排（Reflow）和重绘（Repaint） 题目要点 明确重排与重绘的区别和性能影响 介绍浏览器批量更新、延迟计算和图层合成机制 结合实例说明如何避免强制同步布局 总结开发中避免不必要重排重绘的具体技巧和建议 参考答案 考察点 ● 理解重排和重绘的区别及性能影响 考察对浏览器渲染优化关键环节的掌握。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 全方位解读this、作用域链与闭包、事件循环、call、apply和bind、前端存储、react hooks、react 渲染机制、React函数组件更新 本轮共 25 道题。答案默认折叠，便于先自行作答。 1. 讲一下你平常使用的React Hooks 题目要点 熟练掌握常用 Hook（useState/useEffect/useRef/useMemo/useCallback/useContext） 能结合实际项目说明每个 Hook 的使用动机和实现效果 理解 Hook 的核心机制（闭包陷阱、依赖数组规则、执行时机等） 参考答案 考察点 ● 理解 React Hooks 的基本使用场景及原理 面试官关注候选人是否掌握了常用 Hook 的使用规范与时机。 ● 能否结合项目实际表达 Hooks 的应用能力 考察是否具备将 React 函数组件与 Hooks 结合的实际经验与思维能力。 参考答案 一、常用 React Hooks 介绍 1. useState —— 管理组件内部状态 功能：定义响应式的本地状态。 典型使用场景：表单输入值、按钮开关、局部 UI 状态等。 示例： const [count, setCount] = useState(0); 2. useEffect —— 副作用逻辑处理 功能：用于处理副作用逻辑，如数据请求、DOM 操作、订阅事件等。 依赖数组决定副作用执行时机。 常见场景： 页面初始化请求数据（空依赖数组） 监听某个状态变化触发逻辑（依赖项更新） 组件卸载时清理订阅（返回 cleanup 函数） useEffect(() => { const id = setInterval(() => { console.log('tick'); }, 1000); return () => clearInterval(id); }, []); 3. useRef —— 获取 DOM 或存储跨渲染变量 功能：可以持久保存可变值而不触发组件重新渲染；或获取 DOM 元素引用。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 事件冒泡、事件捕获、事件委托、浏览器的缓存机制、组件通信、异步组件 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 实现数组里的拍平 数组本身的拍平 题目要点 递归遍历数组并合并结果。 判断元素类型是否为数组。 结合ES6 flat方法提升效率。 参考答案 考察点 ● 理解递归与数组操作 考察候选人对递归处理嵌套数据结构的能力。 ● 掌握ES6及新特性（如flat） 能结合不同方案解决扁平化问题。 参考答案 /** * 递归实现数组拍平 * @param {Array} arr - 待拍平数组，可能嵌套多层 * @returns {Array} - 扁平后的数组 */ function flatten(arr) { let result = []; for (const item of arr) { if (Array.isArray(item)) { result = result.concat(flatten(item)); } else { result.push(item); } } return result; } 或者使用ES6内置方法（只拍平一层）： const flatOnce = arr => arr.flat(); ES2019+ 支持深度拍平： ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮共 22 道题。答案默认折叠，便于先自行作答。 1. 编写一个函数解析URL，提取其中的协议、域名、路径和查询参数 题目要点 URL 结构 / URL API 使用 / 查询参数处理 / 错误处理 参考答案 考察点 ● 理解 URL 结构及其组成部分 面试官关注候选人是否熟悉 URL 的协议（scheme）、域名（host）、路径（path）、查询参数（query）等基本组成。 ● 掌握字符串处理和正则表达式技巧 是否能用合适的方法提取各部分信息。 ● 能写出健壮且兼容性好的解析函数 考虑边界条件和异常输入。 参考答案 原理说明 URL 由以下几部分构成（简化版）： 协议://域名\[:端口]/路径\[?查询参数]\[#锚点] 协议（scheme）：如 http、https、ftp 等； 域名（host）：主机名或 IP 地址； 路径（path）：服务器资源路径； 查询参数（query）：key=value 形式，多个参数用 & 分隔。 解析时重点提取协议、域名、路径和查询参数。 核心代码示例（JavaScript） function parseURL(url) { try { const urlObj = new URL(url); // 提取协议，去掉末尾冒号 const protocol = urlObj.protocol.replace(':', ''); // 域名（包含端口，如果有） const host = urlObj.host; // 路径 const path = urlObj.pathname; // 查询参数转成对象 const queryParams = {}; urlObj.searchParams.forEach((value, key) => { queryParams[key] = value; }); return { protocol, host, path, queryParams, }; } catch (error) { throw new Error('Invalid URL'); } } 使用示例 const url = 'https://www.example.com:8080/path/to/page?name=alice&age=25'; const result = parseURL(url); console.log(result); /* { protocol: "https", host: "www.example.com:8080", path: "/path/to/page", queryParams: { name: "alice", age: "25" } } */ 常见误区或面试陷阱 误区一：使用正则解析复杂 URL 正则难以覆盖各种边界情况，不建议复杂场景使用； 推荐使用浏览器内置的 URL 类。 误区二：忽略端口号 域名部分可能包含端口，直接取 hostname 会缺失端口。 误区三：查询参数未统一处理 查询参数可能重复，需根据需求选择保存方式（这里简单取最后一个值）。 总结回顾 解析 URL 推荐使用原生 URL API，简洁且兼容性好。重点提取协议、域名（含端口）、路径和查询参数，并把查询参数转换为对象方便后续使用。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 9 道题。答案默认折叠，便于先自行作答。 1. 讲一下“智慧医疗系统”项目背景、目标以及你主要负责的模块 题目要点 结合自己简历上的一个亮点项目准备 参考答案 结合自己简历上的一个亮点项目准备 2. 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？ 题库原题：什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？ 题目要点 响应式设计（Responsive Design）是一种网页设计方法，旨在使网页在各种设备和屏幕尺寸上都能提供良好的用户体验。响应式设计通过使用流式布局、弹性网格和媒体查询，使得网页能够根据不同的设备特性（如屏幕大小、分辨率、方向等）自动调整其布局和内容。 响应式设计的基本原理 流式布局（Fluid Layouts）： 使用相对单位（如百分比、vw、vh）而不是绝对单位（如像素），使得网页布局能够根据容器的宽度自动调整。例如，使用百分比设置宽度，可以让列宽度随着屏幕尺寸的变化而变化。 弹性网格（Flexible Grid Systems）： 利用网格系统设计布局，将页面划分为多个灵活的区域。这些区域能够根据屏幕尺寸调整大小，从而实现不同设备上的适配。 媒体查询（Media Queries）： 使用 CSS 媒体查询，根据设备的特性（如宽度、高度、分辨率等）应用不同的样式规则。媒体查询可以针对不同的屏幕尺寸、方向（横向或纵向）等条件设置样式。 如何实现响应式设计 使用流式布局： 在 CSS 中使用相对单位（如 %, em, rem, vh, vw）设置宽度和高度。例如： .container { width: 80%; /* 宽度为容器的 80% */ } 利用弹性网格系统： 创建一个弹性网格布局，可以使用 CSS Grid 或 Flexbox。例如，使用 Flexbox： .container { display: flex; flex-wrap: wrap; /* 自动换行 */ } .item { flex: 1 1 300px; /* 自动调整宽度，最小宽度为 300px */ margin: 10px; } 编写媒体查询： ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 动画、响应式设计、事件循环、跨域、浏览器的缓存机制、列表和key、生命周期 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 请介绍一下你的科研项目经历。 题目要点 STAR法则 参考答案 结合自身经历展开 2. 为什么选择前端开发作为你的职业方向？ 题目要点 无 参考答案 无 3. 你学习前端开发有多久了？谈谈你的学习经历。 题目要点 无 参考答案 无 4. 如何使用CSS实现动画效果？举个项目中的例子。 题目要点 transition/animation 区别 / transform+opacity / 项目落地举例 / 动画性能 参考答案 考察点 ● CSS 动画相关属性与原理掌握 面试官希望了解候选人是否掌握 CSS 动画的基本实现方式，包括 transition、animation、关键帧、补间函数等。 ● 能结合项目场景举例说明 不仅要懂 API，更重要的是知道什么时候使用、为什么使用，是否有性能考量和交互体验意识。 ● 对动画效果的性能与体验理解 是否清楚哪些动画对性能影响大，哪些动画适合用 CSS 实现，如何避免卡顿或丢帧。 参考答案 原理说明 一、CSS 动画的实现方式 CSS 提供了两类动画机制： 1. 过渡动画（transition） 通过 transition 属性定义在样式变更时自动补间的动画： .button { transition: all 0.3s ease-in-out; } 特点： ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 二面，以实际场景、设计架构出发，考察候选人的综合知识和深度 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 描述一个你解决的复杂性能优化案例（指标提升与具体手段） 题目要点 按照START法则来讲解 参考答案 结合自身项目经历来说 2. React/Vue框架设计思想对比（如数据绑定、虚拟DOM） 题目要点 React/Vue/设计思想/双向绑定/单向数据流/虚拟DOM/Fiber/Proxy/模板编译 参考答案 一、考察点 是否理解 React 和 Vue 的设计理念与核心架构区别 是否能准确比较两者在数据绑定、组件化、更新机制上的异同 是否理解虚拟 DOM 的实现方式及两者的优化策略 是否能结合实际项目场景，选择合适的框架思路 二、参考答案 1.1 核心设计思想对比 ✅ 一、框架理念对比 维度 Vue React 核心理念 渐进式框架，关注视图层 函数式 + 声明式 UI，构建 UI 的库 学习曲线 简洁、直观、HTML+JS 分离 更偏工程化，需要理解 JSX、Hooks 模板机制 模板语法（HTML-like） + 指令（v-xxx） 使用 JSX 全部由 JS 描述 UI ✅ 二、数据绑定机制 🔹 Vue 使用响应式系统（Vue2 的 Object.defineProperty，Vue3 的 Proxy）； 支持 双向绑定（如 v-model）； 模板中变量变化会自动更新视图，开发体验友好。 🔹 React 数据是不可变状态（immutable state）； 单向数据流（父 → 子）； 利用 setState() 或 useState() 触发重新渲染； 更强调“以状态驱动视图”，需要手动绑定与更新。 ✅ 三、虚拟 DOM 实现与 Diff 策略 Vue 自主构建 Virtual DOM（与模板语法结合）； Vue2 使用双端比较 diff 算法； Vue3 引入 静态提升 + Block Tree + 最长递增子序列（LIS），减少不必要 patch； 编译优化层更强，template 更容易静态分析。 React 以函数式组件为主，使用 JSX 构建虚拟 DOM； 使用 Fiber 架构重构更新机制，实现异步可中断渲染； 更新优先级调度（如 startTransition）是核心优势之一； Diff 算法基于同层比较 + key 优化，机制稳定。 ✅ 四、组件设计与状态管理 对比项 Vue React 状态管理 Vuex（Vue2） / Pinia（Vue3） Redux / Context API / Zustand 等 生命周期 Options API（Vue2）/ Composition API（Vue3） 类组件生命周期 / 函数组件 Hooks 组件通信 props / emit / provide/inject props / context / props drilling 3. React Hooks闭包陷阱的产生原因？ 题目要点 React Hooks/闭包陷阱/useEffect/useRef/setInterval/函数式更新/stale closure ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 一面，更多考察的是八股文的基础知识 本轮共 20 道题。答案默认折叠，便于先自行作答。 1. 什么是 HTML 语义化？ 题库原题：什么是 HTML 语义化？ 题目要点 先看下什么是HTML： 参考答案 先看下什么是HTML： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。 那么如何理解 Web 语义化？ 通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构。 单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等。 但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？ 那是因为各个浏览器都自带的有相应标签的默认样式，为了方便在没有设定样式的情况下友好的展示页面。 良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。 为什么要使用语义化标签？ 有伙伴会认为，我用DIV+CSS也能做出来一样的效果，虽然单纯看实现效果，两者并没有什么区别。 但是页面不止是给人看的，机器也要看爬虫也要看，网页结构更清晰方便开发维护。 特别是在网络或其他原因页面样式文件丢失的时候，良好语义结构组成的页面，肯定比全是div的页面对用户更友好。 总结下语义化的优点： 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。 有利于不同设备的解析（屏幕阅读器，盲人阅读器等） 有利于构建清晰的机构，有利于团队的开发、维护 2. CSS盒模型、Flex布局与Grid布局的区别及适用场景 题目要点 CSS盒模型/box-sizing/Flex布局/Grid布局/一维 vs 二维/布局适用场景/页面结构设计 参考答案 一、考察点 是否掌握 CSS 中盒模型的基本概念及布局行为 Flex 与 Grid 的本质区别及使用场景是否清晰 能否结合实际 UI 场景选择最合适的布局方式 是否理解布局系统与页面结构解耦的设计思想 二、参考答案 1.1 原理说明 ✅ 一、CSS 盒模型（Box Model） 定义：所有 HTML 元素都可以看作一个矩形盒子，由以下四层组成： ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本轮面试注重基础知识的掌握与表达，涵盖了前端语言、框架原理、计算机基础、网络协议、数据库设计、加密安全等内容，兼顾技术深度与广度。 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 面向对象和面向程序设计的主要区别 题目要点 面向过程以过程为中心，强调顺序执行逻辑，适合小型程序； 参考答案 面向过程以过程为中心，强调顺序执行逻辑，适合小型程序； 面向对象以对象和行为抽象为中心，强调封装、继承、多态，适合复杂系统的可维护性与复用性设计。 2. 面向对象的三大特性 题目要点 封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。 参考答案 封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。 3. 开发的过程中你用到过哪些设计模式？ 题库原题：开发的过程中你用到过哪些设计模式？ 题目要点 设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。 参考答案 设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。 以下是一些常用的设计模式： 单例模式（Singleton）：确保一个类只有一个实例，并提供全局访问点来获取该实例。 工厂模式（Factory）：通过工厂方法创建对象，而不是直接使用new操作符。这样可以隐藏具体实现，并根据需要创建所需类型的对象。 观察者模式（Observer）：定义了一种一对多的依赖关系，当一个对象状态发生改变时，它的所有依赖者（观察者）都会收到通知并自动更新。 装饰器模式（Decorator）：动态地将责任附加到对象上。通过将对象包装在装饰器对象中，可以在运行时为对象添加新的行为。 策略模式（Strategy）：定义了一系列算法，将每个算法封装起来并使它们可以相互替换。策略模式可以让算法独立于客户端而变化。 适配器模式（Adapter）：将一个类的接口转换成客户端所期望的另一个接口。适配器模式使得原本由于接口不匹配而无法一起工作的类可以协同工作。 每个设计模式都有其特定的应用场景和优缺点，可以根据具体情况来选择使用。设计模式可以提高代码结构的灵活性、可维护性和可扩展性，并促进重用和解耦。然而，需要根据实际需求慎重选择和应用设计模式，避免过度设计或不必要的复杂性。 4. JavaScript 中引用数据类型和基本数据类型 题目要点 基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。 参考答案 基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。 5. 谈谈对Vue中双向绑定的理解 题库原题：谈谈对Vue中双向绑定的理解 题目要点 Vue中的双向绑定是其核心特性之一，它极大地简化了数据在视图（View）和模型（Model）之间的同步过程。双向绑定意味着当数据发生变化时，视图会自动更新以反映这些变化，反之亦然，用户在视图上的操作（如输入）也会自动更新到数据中。 实现原理 Vue的双向绑定主要依赖于其响应式系统（Reactivity System）和模板引擎（Template Engine）。 响应式系统：Vue使用Object.defineProperty（在Vue 3中使用了Proxy）来劫持（或说“代理”）对象的getter和setter。当组件的data中的属性被访问或修改时，Vue会拦截这些操作，并执行相应的依赖更新逻辑。这样，Vue就能追踪到数据的变化，并在需要时更新视图。 模板引擎：Vue的模板引擎使用基于HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例的数据上。当数据变化时，Vue的模板引擎会重新渲染模板，生成新的虚拟DOM树，并通过高效的DOM diff算法更新真实的DOM，以反映数据的最新状态。 参考答案 一、什么是双向绑定 我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子 ...