京东 一面 3.30 14:00-14:30

流程

两位面试官（hr+技术）hr 先问自我介绍+到岗时长+地点等问题，然后开始技术面，反复拷打项目，问了 9-10 道关于项目的问题，基本上没答出来几道，最后 hr 总结，反问环节表示项目并不是我从 0-1 搭建的，理解的还不够深刻

单例、组件化、地图

单例化和组件化了什么 Tmap

  • Mapbox map 只创建一次，多个 Vue 控件/图层组件通过 TMap.getInstance() 共享同一张地图；组件复用体现在控件和图层封装成独立 .vue 组件，可插拔组合使用，而 TMap 是提供共享 map 的服务模块，不是 Vue 组件本身
  • 单例化：一种「对象管理策略」，核心是「全局只保留一个实例」
  • 组件化：一种「代码组织方式」，核心是「按职责拆模块，复用与维护更好」

3D 视角切换

  • 3D 视角切换是通过 UI 按钮触发，底层调用 Mapbox flyTo 修改相机参数（pitch、bearing），依托 TMap 单例保证所有控件都操作同一张地图

图层级交互

  • 完成图层级交互能力建设（hover 高亮、click 定位、flyTo/fitBounds、图层可见性/透明度/顺序动态调整），保障复杂地图场景下的可用性与可维护性，这一句怎么实现的

  • 已修改为「完成图层级交互能力建设，支持要素悬停高亮、点击定位（flyTo/fitBounds）、图层可见性切换、透明度调整与图层顺序重排，保证多图层场景下的可用性与可维护性」

  • 登录验证码怎么实现的，有跟后端结合吗 略

MapboxGL / ECharts 是什么

  • MapboxGL： 浏览器端的 WebGL 地图库，用来渲染可交互地图，并支持矢量/栅格/热力/地形、图层样式表达式以及事件交互；你项目用它做 GIS 可视化底座 + 图层/控件体系
  • ECharts： 百度开源的前端图表库，用 option 配置渲染柱状图/饼图等，项目里用于统计可视化

防抖、节流

  • 防抖（Debounce）在事件停止触发后执行一次函数【延迟执行，避免重复触发】
  • 节流（Throttle）在事件持续触发时按固定时间间隔执行函数【限制函数执行频率】

异步竞态

  • 页面上有两个按键，按下 a 由于网络问题没有反应，然后按下 b，b 的数据成功加载了，之后这个页面的数据会怎么变，a 对应的业务逻辑还会触发嘛，数据还会显示嘛

考察你对异步请求的竞态条件（Race Condition）、用户交互的响应设计以及网络异常处理：

  • 这个问题涉及前端异步请求的竞态条件处理。如果代码没有做特殊控制，那么 A 的请求虽然延迟了，但最终返回时依然会触发它的回调，导致页面数据被 A 覆盖，用户明明最后点了 B，看到的却是 A 的数据，这是一个典型的 Bug。
  • 在实际开发中，我们需要处理这种情况。比较常见的方案是使用 AbortController 在发起 B 请求时取消 A 请求，或者利用请求 ID（requestID）来忽略过时响应。这样做的结果是：A 的业务逻辑要么被取消，要么响应被丢弃，页面最终只展示 B 的数据。
  • 此外，针对「按下 A 没有反应」这个描述，我也认为这是体验问题。在用户点击 A 时，我们应该立即给用户一个视觉反馈（如按钮置灰、loading 状态），并设置超时机制，避免用户因「没反应」而误操作 B。本质上是考察我对异步竞态、用户体验和错误降级的综合处理能力。

CSS 的居中

（各种居中方式都要掌握）

水平：
方法 适用场景 写法
margin: 0 auto 块级元素 + 定宽 margin: 0 auto;
text-align 行内 / inline-block 父：text-align: center
flex 通用 justify-content: center
grid 通用 justify-content: center
absolute + transform 任意元素 left:50%; transform:translateX(-50%)
  • margin: auto 必须有宽度
  • text-align 只对行内元素有效
  • transform 不会影响文档流

垂直：
方法 适用场景 写法
flex 最常用 align-items: center
grid 简洁 place-items: center
line-height 单行文本 line-height = height
absolute + transform 通用 top:50%; transform:translateY(-50%)
table-cell 兼容旧浏览器 display: table-cell; vertical-align: middle
  • line-height❗ 只适用于单行文本
  • vertical-align: middle❗ 必须配合 table-cell 或 inline
  • height: auto❗ 不能用 line-height 居中
  • flex 默认是横向（别写错）

水平+垂直：

面经图 3

  • absolute 必须有 定位父元素
  • transform 是基于自身尺寸
  • flex 会影响子元素布局（比如变成弹性项）

文本：
类型 方法 写法
水平 text-align text-align: center
垂直（单行） line-height 同高度
多行 flex align-items: center
多行 table-cell vertical-align: middle

  • 多行文本❌ 不能用 line-height

  • vertical-align❌ 对 block 元素无效

  • 「CSS 面试坑点大全（比如 BFC、层叠上下文、z-index）」

面经图 4