【KO】前端面试题一
以下是这些前端开发项目场景题的解答：
25. 如何减少项目里面if - else
- 使用对象映射：将条件判断的结果与对应的处理逻辑作为键值对存到对象里，通过条件直接查找执行，如根据不同类型执行函数 ，
const handler = { type1: () => {}, type2: () => {} }; handler[condition]();。 - 利用策略模式：把不同条件的处理逻辑封装成策略类/函数，根据条件选择策略执行，解耦条件判断和逻辑。
- 可选链与空值合并：处理对象属性判断时，
obj?.prop?.method()简化存在性判断，结合??处理默认值，减少条件嵌套。 - 提前返回：在函数开头处理特殊情况（如参数不合法）直接返回，减少嵌套的
if - else，让主逻辑更清晰。
26. babel - runtime作用是啥
babel - runtime是 Babel 生态工具，用于解决 Babel 转译代码时，辅助函数（如_extend等）重复注入问题。- 它通过抽取复用辅助函数，减少打包后代码体积；还提供
core - js等 polyfill 能力（按需引入），让转译后的代码能在低版本环境运行，实现语法和 API 兼容。
27. 如何实现预览PDF文件
- 浏览器内置能力：直接用
<embed><object>标签，设置src为 PDF 地址，浏览器支持的话可渲染，如<embed src="xxx.pdf" type="application/pdf">。 - PDF.js 库：Mozilla 开发的开源库，可在 canvas 上渲染 PDF ，支持自定义样式、交互，引入库后初始化加载显示，
pdfjsLib.getDocument('xxx.pdf').promise.then(pdf => { /* 渲染页面等操作 */ })。 - 第三方服务：如 Google Docs 查看器（需联网、有隐私考量），
<iframe src="https://docs.google.com/gview?url=xxx.pdf&embedded=true">。
28. 如何在划词选择的文本上添加右键菜单
- 监听
mouseup事件，判断是否有选中文本（window.getSelection().toString().trim()非空）。 - 创建自定义右键菜单（
div模拟），通过event.clientXevent.clientY定位，阻止默认右键事件（event.preventDefault()），点击菜单项执行对应操作，操作完隐藏菜单。
29. 富文本里面，是如何做到划词的
- 富文本编辑器（如 Quill、Slate 等）一般基于
contenteditable实现。 - 监听编辑器容器的
mouseup或selectionchange事件，利用window.getSelection()获取选区信息（范围、文本等），结合编辑器内部文档模型（如 Quill 的 Delta ，Slate 的节点树 ），确定选中文本在富文本内容里的位置、关联节点，进而做高亮、操作等处理。
30. 如何做好前端监控方案
- 错误监控：用
window.onerrorwindow.addEventListener('unhandledrejection'捕获 JS 错误、未处理 Promise rejection ，上报错误信息（栈、消息、URL 等）。 - 性能监控：通过
Performance API（performance.getEntries()等）采集首屏时间、白屏时间、资源加载耗时，计算并上报性能指标。 - 用户行为监控：监听点击、路由变化、AJAX 请求等事件，记录操作路径、交互内容，用于分析流程、复现问题。
- 上报与存储：将监控数据通过
fetch或sendBeacon上报到服务端，服务端存储（如用 Elasticsearch ），配合可视化平台（Grafana 等）展示分析。
31. 如何标准化处理线上用户反馈的问题
- 统一收集渠道：搭建反馈平台（如页面内嵌表单、客服系统对接），规范用户提交入口，方便集中收集。
- 信息结构化：要求用户反馈时填写版本号、操作路径、设备信息（浏览器、系统）、问题描述、截图/录屏，前端可自动采集部分信息（如
navigator.userAgent、当前 URL ）。 - 分类与流转：后端接收后按问题类型（功能异常、性能差、UI 问题等）分类，分配给对应研发/运维处理，记录处理状态（待处理、处理中、已解决），同步给用户。
- 复盘与优化：定期汇总反馈问题，分析高频问题根因，推动产品迭代优化，形成闭环。
32. px 如何转为 rem
- 原理：
rem是相对根元素（html）字体大小的单位。先设置html的font - size（如基于设计稿宽度，750px 设计稿设font - size: 75px，即 1rem = 10px ）。 - 手动转换：写样式时，按设计稿
px值除以基准值（如 10 ）得到rem值，width: 150px→width: 1.5rem。 - 自动化工具：用 PostCSS 插件（
postcss - px - to - rem），配置基准值，构建时自动将px转rem；或在前端框架（Vue、React ）中结合webpack配置 loader 处理。
33. 浏览器有同源策略，但是为何cdn请求资源的时候不会有跨域限制
- 同源策略限制的是脚本（如 JS 发起 AJAX 、
fetch）的跨域读写操作。 - CDN 资源（如 JS 、CSS 、图片）是通过标签（
<script><link><img>等）加载，属于浏览器“非脚本主动读写”的资源引入，这类标签的跨域加载默认被允许（浏览器对其有特殊处理，不触发同源策略的限制校验 ），但脚本不能直接读取这些资源的内容（如 JS 不能通过XMLHttpRequest读 CDN 上 JS 文件源码 ）。